Most mezi Figmou a kódem

Technologická DNA, která škáluje

Tento proces zajišťuje naprostou integritu produktu – to, co designér navrhl a klient schválil, je na pixel přesně to, co koncový uživatel uvidí v prohlížeči. V Abbrevě tomuto přístupu neříkáme jen design systém; je to naše technologická DNA. Je to systém, který zajišťuje, že každý export, každá nová funkce a každá podstránka dává smysl v kontextu celého celku a je připravena na budoucí rozšiřování bez nutnosti nákladných refaktorizací. Pro naše partnery, jako jsou Nestlé nebo Hyundai, to znamená jediné – jistotu, že jejich digitální platforma poroste s jejich byznysem, aniž by se pod tíhou změn zhroutila.

V digitálním světě roku 2026 už dávno neplatí, že grafik odevzdá statický obrázek a programátor ho „nějak“ přepíše . Tento zastaralý přístup je v Abbrevě nahrazen konceptem Design systému, který vnímáme jako živý organismus propojující Figmu s finálním produktem. Pokud má být výsledek perfektní, musí být cesta od prvního pixelu k poslednímu řádku kódu plynulá. Proto jsme vsadili na Figmu, což je nástroj, který se na první pohled může zdát jako hřiště pro designéry, ale ve skutečnosti je to mocné vývojové prostředí, které zásadně mění dynamiku celého týmu.

 

Naše workflow od prvního návrhu po čistý kód

Díky Michaelovi a našemu týmu jsme v Abbrevě vybrousili proces, který eliminuje největší bolest IT projektů a tím jsou informační šumy a dohady v kritické fázi hand-offu. Naše workflow není lineární seznam úkolů, ale uzavřený ekosystém, kde každá fáze logicky připravuje půdu pro tu následující.

Vše začíná u precizního designu, který ale v našem podání není jen estetickým návrhem. Již v této fázi designér přemýšlí v komponentách a logických celcích. Jakmile je vizuální směr potvrzen, dochází k transformaci do podoby template. Tato šablona pro nás není statickým nákresem, ale interaktivním prototypem a základním kamenem informační architektury. Je to blueprint, který definuje chování prvků v různých stavech a na různých zařízeních.

Digitální rentgen pro vývojáře

Zlomovým momentem, který odděluje amatérské „překreslování“ od profesionálního inženýrství, je plné využití Figma Dev Mode. Pro naše vývojáře je to v podstatě digitální rentgen. V tomto prostředí vývojář nevidí jen barvy a fonty, ale odkrývá celou anatomii designu, logické vazby, hierarchii vrstev a přesné technické parametry každého elementu. Figma nám zde slouží jako živá dokumentace, která dává vývojáři do ruky jasnou mapu bez nutnosti neustálých doptávání se designéra.

Jakmile vývojář vstoupí do této fáze, nezkoumá jen vizuální stránku. Přímo z Figmy čerpá structured data a podklady, které následně transformuje do našeho vnitřního standardu. Tento proces zahrnuje hlavně tvorbu DS, kde každý prvek je vyvíjen jako znovupoužitelná, izolovaná komponenta, což nám umožňuje extrémní rychlost při stavbě dalších částí webu. Psaní čistého CSS, žádné redundantní řádky. Píšeme kód, který je výkonný, udržitelný a snadno škálovatelný. Implementaci Twig šablon, které využíváme sílu Drupalu k tomu, aby byla logika zobrazení oddělena od dat, což garantuje čistou architekturu a bezpečnost.

Technologická DNA, která škáluje

Tento proces zajišťuje naprostou integritu produktu to, co designér navrhl a klient schválil, je na pixel přesně to, co koncový uživatel uvidí v prohlížeči. V Abbrevě tomuto přístupu neříkáme jen design systém; je to naše technologická DNA. Je to systém, který zajišťuje, že každý export, každá nová funkce a každá podstránka dává smysl v kontextu celého celku a je připravena na budoucí rozšiřování bez nutnosti nákladných refaktorizací. Pro naše partnery, jako jsou Nestlé nebo Hyundai, to znamená jediné a to jistotu, že jejich digitální platforma poroste s jejich byznysem, aniž by se pod tíhou změn zhroutila.

Figma jako nejlepší přítel programátora

Pohled vývojáře na designérské nástroje bývá často skeptický. Je to přirozené, nástroje pro tvorbu vizuálů mají obvykle diametrálně odlišné UX než vývojářské editory. Často se stává, že designérský tým prosadí aplikaci, kterou vývojáři odmítají, protože jim komplikuje práci. V Abbrevě jsme si ale ověřili, že Figma je unikátní výjimkou. Jak potvrzuje náš kolega Josef, pro programátory je to nejlepší nástroj, se kterým kdy pracovali.

Klíčem je možnost komentovat design přímo v prostředí Figmy bez nutnosti exportů do externích aplikací, což pro vývoj znamená obrovské plus v rychlosti a přesnosti. Figma nám umožňuje definovat tokeny, mřížky a komponenty tak precizně, že vývojář při pohledu do souboru vidí logické struktury připravené pro transformaci do SCSS nebo Twig šablon. Tím se minimalizuje prostor pro interpretaci a chyby, které dříve vznikaly při ručním přeměřování vzdáleností.

Kolaborace v remote éře a síla pluginů

Z pohledu UI designéra je největším přínosem Figmy její kolaborativní DNA. Možnost pracovat ve více lidech na jednom souboru v reálném čase se v našem hybridním nastavení (kombinace remote a kanceláří v Šafránkově) ukazuje jako naprostá nezbytnost. Odpadá chaos s verzováním souborů – vše je na jednom místě, přístupné komukoliv z týmu kdykoliv.

Další vrstvou efektivity jsou pluginy. Figma jich nabízí tisíce – od automatizovaného zarovnávání elementů až po pokročilé exporty do vývojářských frameworků. Tyto nástroje nám dovolují automatizovat rutinu, která dříve zabírala hodiny. Díky tomu se naši designéři mohou soustředit na to podstatné: na UX strategii a vizuální identitu pro značky.