Očima vývojáře: spolupráce ve Figmě

 

Bylo, nebylo...

Kdysi dávno jsme používali při tvorbě designu tehdejší nástroje od Adobe, a to hlavně Photoshop a jeho PSD formát. V té době to byla nejlepší volba, umělo to spoustu vychytávek, ale při pohledu zpět nás štvala tato zásadní negativa:

• Nefungoval na operačních systémech Linux, které máme v Trigamě mezi vývojáři rádi.
• Byl drahý. Šlo o placený nástroj, jenž se dal pořídit za rozumnou cenu pro designery, kteří v něm trávili mnoho času, ale nikoliv pro kodéry, kteří jen přijdou k hotové práci a chtěli design „přečíst“ a nakódovat.
• Neuměl verzovat, a tak jsme byli nuceni si posílat zdrojové soubory přes různá úložiště.

 

Lepší časy? Ještě ne.

Doba postupovala a pro vývojáře přestal být Photoshop jedinou možností pro čtení grafických návrhů. Na trhu se začaly objevovat nástroje, jejichž hlavní myšlenka byla přenesení potřeby instalovat software do prostředí webových aplikací. Tento zlom přinesl mnoho výhod:

• Nástroje nebyly závislé na operačním systému. Fungovaly ve všech webových prohlížečích.
• Cena začala být přijatelná, protože nebyly primárně tvořené pro designery, ale obsahovaly omezené množství funkcionalit, které využili pouze kodéři.
• Nástroje podporovaly import zdrojových souborů přímo z grafických editorů, a tak odpadla potřeba shromažďovat soubory na úložištích.

Mezi tyto skvělé nástroje, které jsme taky používali, se řadil například Avocode, Sketch nebo InVision.

Figma

Postupem času jsme začali používat Figmu. Krom všech již zmíněných výhod funguje Figma také jako grafický editor, který je připraven na kolaborativní práci. U nás v týmu se naprosto běžně při online meetingu probírá podoba designu a všichni zúčastnění kodéři vidí v reálnem čase designerovi pod ruce a mají možnost sledovat a komentovat všechny změny, které udělá. Figma je připravena i pro asynchronní komunikaci v týmu. Dala by se přirovnat ke komunikaci ve známém Wordu. Stejně jako se může komentovat jakýkoliv řádek textu v textovém editoru, dá se ve Figmě komentovat jakýkoliv pixel na plátně grafického výstupu.

Pro samotné kódování je Figma skvěle připravená. Bezchybně dokáže exportovat rastrové I vektorové obrázky. Podporuje všechny pro nás důležité formáty PNG, JPG i SVG. Definice stylů dokáže vyexportovat nejen v kaskádových stylech (CSS), ale i v syntaxi pro vývoj mobilních aplikací iOS a Android.

Velkou výhodou je podpora design systému. Základem všech grafických výstupů jednotlivých stránek aplikací jsou definice komponent – paleta barev, typografie, ikony a dále komponenty od nejmenších (ikony, buttony) až po robustní typu hlavička. Díky tomu si i my kodéři tyto definice nejprve centrálně připravíme a pak už je na jednotlivých stránkách jen opětovně používáme.

Figmu vnímáme jako moderní nástroj, který nám každý den ulehčuje vývoj aplikací a činí ho příjemnějším. I Figma má určitě (jako každý jiný nástroj) své nedostatky, ale jako kodér nevidím ani jednu nevýhodu, a proto ji mohu s klidným svědomím každému doporučit.

 

P.S.: ne, Figma nás za tenhle blog nijak neplatí, jen se s ní prostě dobře maká...:-)