Jak dlouho trvá ovládnout nástroj, který změnil pravidla hry?

Ve světě komplexních digitálních produktů, které v Abbrevě stavíme, už dávno nestačí jen „nakreslit hezký web“. Skutečná výzva začíná ve chvíli, kdy se vizuální nápad musí přetavit do funkčního kódu. Tady se láme chleba a tady v Abbrevě vstupuje do hry Figma.

Pro nás Figma není jen grafický editor. Je to centrální mozek projektu, společný jazyk našich designérů a vývojářů. Je to prostředek, který eliminuje dohady, minimalizuje chyby při předávání (handoffu) a urychluje vývoj o desítky procent. Otázka tedy nezní: „Jak dlouho se budu učit kreslit čáry?“, ale „Jak dlouho mi potrvá, než pochopím, jak design propojit s kódem?“.

Od vizuálu ke struktuře 

Rozhraní Figmy pochopíte okamžitě. Je intuitivní, čisté a přívětivé. Skutečné učení ale začíná, když přestanete přemýšlet v pixelech a začnete přemýšlet v boxech. Základní stavební kámen. Už tady designér definuje, jak se prvky budou chovat na různých obrazovkách. Definování konzistentního vizuálního jazyka, který vývojář později jen zkopíruje do CSS. Vidíte kurzory kolegů v reálném čase. Je to jako Google Docs pro design.

• Tady se rodí první wireframy, kde Validujeme byznys logiku dřív, než padne první řádka kódu. Je levnější změnit barvu pixelu než přepisovat hotovou databázi.

   

Responzivita a komponenty

Tady se designér mění v architekta. Pokud chcete, aby vaše návrhy byly použitelné pro programátory, musíte pochopit logiku stavby Absolutní nutnost. Design se musí chovat jako živý web natahovat se a smršťovat podle obsahu. To je přesně to, co vývojáři milují. Tvorba tlačítek, formulářů a sekcí, které změníte na jednom místě a opraví se na celém webu. Propojení obrazovek do klikatelného prototypu pro testování uživatelských cest.

• Auto Layout je pro nás standard. Díky němu vývojáři nemusí hádat paddingy, protože je vidí přímo ve vlastnostech elementu.

Design systémy a workflow 

Stát se expertem znamená přestat kreslit obrázky a začít stavět systémy. To je úroveň, kterou vyžadujeme u nás v Abbrevě pro projekty jako Nestlé nebo Wargaming. Tvorba komplexních knihoven, které používá celý tým a které jsou přímo propojené s front-endovými komponentami. Proměnné, podmínky a mikrointerakce, které vypadají jako finální aplikace. Příprava souborů tak, aby vývojář přesně věděl, jaký je padding, barva a font, aniž by se musel ptát.

Faktory, které ovlivňují vaši rychlost

Pokud znáte Sketch nebo Adobe XD, ve Figmě jste doma za odpoledne.

Figma má blíž k programování než k malování. Pokud chápete, jak fungují boxy a kontejnery, máte vyhráno. Na této úrovni se Figma stává jedinou „Single Source of Truth“ pro celý projekt. Vývojář nevidí jen obrázek, vidí přesná data pro implementaci.

30 minut denně je víc než 5 hodin jednou za čtrnáct dní.