Figma je cloudový dizajnový nástroj, ktorý agentúry používajú na návrh webov, prototypovanie a spoluprácu s klientmi v reálnom čase. Ak ste si niekedy objednávali web a dostali ste na schválenie statické PDF alebo screenshoty, poznáte frustráciu z nekonečných emailových vlákien. Figma tento proces zmenila a stala sa štandardom v profesionálnom webdizajne.
V tomto článku vám ukážeme, čo sa deje „pod kapotou“ keď agentúra navrhuje váš web. Nie technické tutoriály pre dizajnérov, ale reálny pohľad na proces z perspektívy firmy, ktorá si web objednáva. Pochopíte, prečo kvalitný dizajnový proces šetrí čas aj peniaze a na čo sa pýtať pri výbere dodávateľa.
Figma je cloudová platforma na návrh užívateľských rozhraní, webov a aplikácií. Na rozdiel od tradičných nástrojov ako Photoshop beží kompletne v prehliadači, takže nepotrebujete nič inštalovať a k návrhu máte prístup odkiaľkoľvek. Podľa UX Tools Survey používa Figmu ako primárny nástroj 83 % profesionálnych dizajnérov, čo z nej robí najrozšírenejší nástroj v odvetví.
Ešte pred desiatimi rokmi sa weby navrhovali v Photoshope ako statické obrázky. Dizajnér vytvoril PSD súbor, exportoval PNG a poslal klientovi emailom. Klient napísal poznámky do Wordu, dizajnér upravil, exportoval znova. Tento ping-pong trval týždne a často viedol k nedorozumeniam.
Figma tento prístup kompletne prevrátila. Namiesto statických obrázkov pracujete s interaktívnymi komponentmi. Namiesto emailov komentujete priamo v návrhu. Namiesto verzií v priečinkoch máte kompletnú históriu zmien. A namiesto lokálneho súboru máte zdieľaný priestor, kde klient aj dizajnér vidia to isté v reálnom čase.
Sketch bol dlhé roky štandardom na Mac počítačoch. Adobe XD sa snažil konkurovať integráciou s Creative Cloud. Oba nástroje však zdieľajú rovnaký problém. Sú to lokálne aplikácie, ktoré vyžadujú synchronizáciu súborov a komplikujú spoluprácu.
Figma vyriešila tri hlavné bolesti agentúrnej práce. Prvá je real-time kolaborácia, kde viacero ľudí edituje ten istý návrh súčasne bez konfliktov verzií. Druhá je cross-platform dostupnosť, pretože funguje rovnako na Mac, Windows aj Linux. Tretia je okamžité zdieľanie, kde klientovi pošlete link a on vidí návrh bez inštalácie čohokoľvek.
Adobe v roku 2022 oznámilo akvizíciu Figmy za 20 miliárd dolárov, čo hovorí o tom, akú hodnotu má v odvetví. Akvizícia nakoniec neprešla cez regulátorov, ale samotná snaha Adobe potvrdzuje dominanciu Figmy.
Keď si u agentúry objednáte web, vidíte zvyčajne len finálne návrhy na schválenie. Pod povrchom sa však deje systematický proces, ktorý má jasné fázy. Pri tvorbe webov na mieru tieto fázy určujú kvalitu výsledku aj to, koľko iterácií bude potrebných pred spustením.
Prvá fáza nie je o farbách ani fontoch. Je o štruktúre. Wireframe je schematický náčrt stránky, ktorý ukazuje, kde budú jednotlivé prvky umiestnené. Žiadne obrázky, žiadne finálne texty, len sivé boxy a placeholder text.
Prečo je to dôležité? Lebo riešiť rozloženie a vizuálny štýl súčasne je ako navrhovať interiér domu, ktorý ešte nemá schválené dispozície. Wireframe vám umožní odsúhlasiť, čo na stránke bude a kde to bude, bez rozptyľovania estetickými detailmi.
Vo Figme wireframy vznikajú rýchlo vďaka knižniciam predpripravených komponentov. Agentúra zvyčajne pripraví wireframy pre kľúčové stránky, domovskú, produktovú, kontaktnú, a až po ich schválení pokračuje k vizuálnemu dizajnu.
Po schválení wireframov prichádza fáza vizuálneho dizajnu. Tu sa aplikujú farby vašej značky, typografia, fotografie a ikony. Výsledkom sú high-fidelity mockupy, ktoré vyzerajú takmer ako hotový web.
V tejto fáze je kľúčová iterácia. Figma umožňuje klientovi komentovať priamo v návrhu, nie v samostatnom dokumente. Kliknete na konkrétny prvok, napíšete pripomienku a dizajnér ju vidí okamžite aj s presným kontextom. Žiadne „ten modrý gombík hore vpravo, nie ten druhý modrý“.
Typický projekt prechádza dvomi až tromi kolami revízií. Profesionálna agentúra má tento proces jasne definovaný, vrátane počtu revízií v cene a postupu pri dodatočných zmenách.
Mockup je statický obrázok. Prototyp je interaktívna simulácia. Vo Figme môžete prepojiť jednotlivé obrazovky tak, že klient klikne na tlačidlo a „prejde“ na ďalšiu stránku. Môžete simulovať hover efekty, rozbaľovacie menu, dokonca aj animácie.
Prototyp odhaľuje problémy s navigáciou a užívateľským tokom ešte pred napísaním jediného riadku kódu. Ak zistíte, že používateľ musí kliknúť šesťkrát, aby sa dostal k produktu, opravíte to za hodinu v návrhu. Nie za týždeň v hotovom webe.
Väčšina webov dnes má viac návštev z mobilov ako z desktopov. Podľa Statista je to globálne okolo 60 %. To znamená, že váš web musí fungovať na obrazovkách od 320 pixelov po 2560 pixelov. A tu prichádza responzívny dizajn.
Auto layout je funkcia Figmy, ktorá umožňuje vytvárať flexibilné komponenty. Predstavte si tlačidlo, ktoré sa automaticky roztiahne alebo zúži podľa dĺžky textu. Alebo kartu produktu, ktorá sa prispôsobí rôznym dĺžkam názvu bez toho, aby dizajnér manuálne upravoval každú variantu.
Pre vás ako klienta to znamená konzistentnejší výsledok. Keď dizajnér vytvorí komponent správne, funguje rovnako dobre s krátkym textom „Kúpiť“ aj s dlhým „Pridať do košíka a pokračovať v nákupe“. Bez auto layoutu by musel manuálne upravovať každú inštanciu, čo zvyšuje riziko chýb.
V praxi to vyzerá tak, že agentúra vytvorí návrh pre tri až štyri breakpointy. Desktop 1440 pixelov, tablet 768 pixelov, mobil 375 pixelov. Všetky varianty sú v jednom Figma súbore, takže vidíte, ako bude váš web vyzerať na každom zariadení.
Výhoda oproti starému prístupu? Nemusíte si predstavovať, ako sa desktop verzia „nejako prispôsobí“ mobilu. Vidíte to explicitne. A ak vám niečo na mobilnej verzii nevyhovuje, riešite to v návrhu, nie až keď je web naprogramovaný.
Dizajnový systém je sada pravidiel a komponentov, ktoré zabezpečujú, že váš web vyzerá konzistentne na každej stránke. Pri práci na UX/UI dizajne je vytvorenie systému kľúčové pre škálovateľnosť projektu.
Komponent je znovupoužiteľný prvok. Tlačidlo, karta produktu, hlavička, pätička. Keď dizajnér vytvorí komponent, môže ho použiť na stovkách miest. A keď ho zmení na jednom mieste, zmena sa prejaví všade.
Varianty sú rôzne stavy toho istého komponentu. Tlačidlo môže mať variant pre primárnu akciu, sekundárnu akciu, deaktivovaný stav a hover stav. Všetky sú súčasťou jedného master komponentu, čo eliminuje nekonzistencie typu „prečo má tlačidlo na kontaktnej stránke iný odtieň modrej“.
Design tokens sú premenné, ktoré definujú vizuálne vlastnosti. Primárna farba, sekundárna farba, veľkosť nadpisov, medzery medzi prvkami. Namiesto toho, aby dizajnér vyberal farbu manuálne zakaždým, použije token „brand-primary“ a systém zabezpečí konzistenciu.
Pre vás to znamená, že keď sa rozhodnete zmeniť primárnu farbu značky, zmena sa prejaví na celom webe úpravou jednej hodnoty. Nie manuálnym prechádzaním stoviek prvkov. A pri prepojení s vývojom sa tieto tokeny premietnu priamo do CSS premenných.
Tradičný workflow vyzerá takto. Agentúra pošle PDF, klient odpíše email s pripomienkami, agentúra upraví a pošle nové PDF. Tento cyklus sa opakuje, pričom verzovanie robí chaos v priečinkoch typu „web_final_v3_upraveny_FINAL2.pdf“.
Figma workflow je odlišný. Agentúra vám pošle link na návrh. Otvoríte ho v prehliadači bez inštalácie. Kliknete na prvok, ktorý chcete komentovať, a napíšete pripomienku. Dizajnér ju vidí okamžite aj s presnou pozíciou. Môže odpovedať, označiť ako vyriešené, alebo sa opýtať na spresnenie.
Komentáre zostávajú v kontexte. Keď sa k projektu vrátite o týždeň, vidíte celú históriu diskusie pri konkrétnych prvkoch. Nie roztrúsenú v desiatich emailoch.
Figma automaticky ukladá históriu verzií. Ak sa niečo pokazí alebo chcete porovnať aktuálny stav s návrhom spred týždňa, jednoducho otvoríte históriu a vidíte každú zmenu. Môžete sa vrátiť k akémukoľvek bodu bez straty práce.
Branching umožňuje experimentovať bez rizika. Dizajnér vytvorí vetvu, vyskúša radikálne odlišný prístup, a ak nefunguje, jednoducho ju zahodí. Hlavný návrh zostáva nedotknutý.
Najkritickejší moment projektu je prechod od návrhu k programovaniu. Tu sa rozhoduje, či výsledný web bude zodpovedať návrhu, alebo či vývojár bude „improvizovať“ lebo nedostal dostatočné špecifikácie.
Dev Mode je funkcia Figmy určená pre vývojárov. Keď vývojár otvorí návrh v Dev Mode, vidí iné rozhranie ako dizajnér. Pri kliknutí na akýkoľvek prvok získa CSS vlastnosti, presné rozmery, farby v hex kóde, spacing, typografiu.
Môže exportovať assety ako SVG ikony alebo obrázky v správnych rozmeroch. Vidí, ktoré komponenty sú znovupoužiteľné a aké majú varianty. Toto všetko bez toho, aby musel kontaktovať dizajnéra s otázkami typu „aká je medzera medzi týmito dvoma prvkami“.
Keď vývojár dostane nekvalitný návrh, trávi čas hádaním. Aká má byť medzera? Táto modrá alebo tamtá? Mobil vyzerá ako? Tieto otázky spomaľujú vývoj a vedú k nekonsistentným výsledkom.
Kvalitný Figma návrh s definovaným dizajnovým systémom môže skrátiť čas vývoja o 20 až 30 %. Pri projekte za niekoľko tisíc eur je to významná úspora. A eliminuje „prekvapenia“ pri odovzdaní, keď sa klient pýta prečo web nevyzerá ako návrh.
Pri projekte pre Metrostav Slovakia sme napríklad vytvorili komplexný dizajnový systém, ktorý umožnil efektívny vývoj aj následnú údržbu webu bez nekonzistencií.
Nie každý web potrebuje profesionálnu agentúru. Osobný blog alebo jednoduchá vizitka zvládne Wix alebo Squarespace. Ale keď váš web má generovať biznis, DIY prístup prináša riziká, ktoré si mnohí uvedomia až keď je neskoro.
Časté scenáre, ktoré vidíme pri auditoch:
Lacný web vyzerá ako úspora, kým nezačnete počítať skutočné náklady. Redizajn za rok, lebo „web nevyzerá dobre“ a „zákazníci si sťažujú“. Stratené konverzie, lebo formulár nefunguje na mobile. Čas strávený opravovaním vecí, ktoré mal riešiť profesionál.
Technický dlh sa kumuluje. Každá „rýchla oprava“ pridáva ďalšiu vrstvu závislostí. Po dvoch rokoch máte web, ktorý nikto nechce udržiavať a jediné riešenie je začať odznova.
Nie každá agentúra pracuje rovnako. Niektoré stále posielajú PDF a komunikujú cez email. Iné majú profesionálny proces, ktorý minimalizuje riziko nedorozumení. Pri výbere dodávateľa na profesionálny webdizajn sa oplatí pýtať konkrétne otázky.
Profesionálna agentúra by mala byť schopná ukázať vám svoj workflow aj predchádzajúce realizácie. Ak na tieto otázky nedostanete jasné odpovede, hľadajte ďalej.
Figma nie je jediný nástroj na webdizajn a pre časť projektov by postačil aj iný. Rozdiel je hlavne v tom, ako prebieha spolupráca s klientom a ako čisto sa dizajn odovzdáva vývojárom.
| Nástroj | Silná stránka | Kde naráža pri webových projektoch |
|---|---|---|
| Figma | Beží v prehliadači, klient vidí návrh v reálnom čase bez inštalácie. Komponenty a dizajnové systémy. | Pri veľmi rozsiahlych súboroch môže spomaliť. |
| Adobe XD | Prepojenie na ostatné Adobe nástroje. | Adobe vývoj utlmilo, spolupráca v reálnom čase zaostáva. |
| Sketch | Zabehnutý štandard s bohatou ponukou pluginov. | Iba pre macOS — klient na Windows sa nepozrie bez exportu. |
| Canva | Rýchla grafika bez zaškolenia. | Nie je to nástroj na webdizajn: chýbajú komponenty, stavy prvkov aj podklady pre vývoj. |
Pre klienta z toho vyplýva jeden praktický dôsledok. Vo Figme si návrh otvoríte v prehliadači na akomkoľvek zariadení, pripíšete komentár priamo k prvku a vidíte, ako sa pripomienka zapracovala. Pri ostatných nástrojoch to spravidla znamená kolobeh exportovaných PDF súborov e-mailom.
Nie. Na pripomienkovanie stačí odkaz, ktorý otvoríte v prehliadači — nepotrebujete konto ani inštaláciu. Kliknete na prvok, napíšete komentár a je priradený presne k danému miestu v návrhu. Práve preto pri projektoch pre slovenských klientov posielame návrhy takto namiesto PDF: pripomienka „toto tlačidlo je málo výrazné“ má jasnú adresu a nestratí sa v e-mailovom vlákne.
Áno, a práve to je jedna z hlavných výhod Figmy. Pred tým, ako napíšeme jediný riadok kódu, prezentujeme vám interaktívny prototype — klikateľné návrhy, ktoré fungujú ako hotový web. Vidíte, ako bude vyzerať každá stránka, ako budú fungovať prechody a kde bude umiestnený každý prvok. Zmeny v tejto fáze stoja zlomok toho, čo by stáli úpravy v hotovom webe.
Pre štandardný firemný web počítame s 3-5 týždňami od kickoff workshopu po schválený dizajn. Do tejto doby patrí analýza a wireframy, dizajn systém, dizajn kľúčových stránok a responzívne varianty pre mobil. Časový rámec závisí od rozsahu webu a rýchlosti schvaľovania z vašej strany.
Figma súbor zostáva váš — po odovzdaní projektu ho môžete ďalej používať, zdieľať s vývojármi alebo upravovať. Obsahuje všetky komponenty, dizajnový systém a dokumentáciu. Môžete ho využiť pri budúcich rozšíreniach webu alebo ako podklad pre prípadného nového dodávateľa.
Figma je štandard pre dizajn e-shopov rovnako ako pre firemné weby. V BigWay v nej navrhujeme kompletné e-commerce rozhrania — product listing stránky, filtrovanie, košík, checkout a mobilné verzie. Pri e-shopoch je obzvlášť dôležité testovanie UX flows v prototype móde ešte pred vývojom, pretože každý krok checkoutu priamo ovplyvňuje konverzie.
Dizajn nie je len o tom, ako web vyzerá. Je to o tom, ako funguje — ako rýchlo návštevník nájde to, čo hľadá, ako ľahko sa dostane k formuláru alebo produktu a prečo sa rozhodne ostať namiesto toho, aby odišiel ku konkurencii.
V BigWay začíname každý projekt dizajnovým briefingom, kde pochopíme vaše ciele, zákazníkov a konkurenciu. Potom ideme priamo do Figmy — bez generických šablón, s vizuálom navrhnutým pre váš konkrétny biznis.
Ak premýšľate nad novým webom alebo redizajnom a chcete vidieť, ako by mohol vyzerať ešte pred vývojom, kontaktujte nás. Radi vám ukážeme, ako pracujeme a čo môžete od spolupráce s BigWay očakávať.
