Jak vytvořit design systém ve Figmě
Kompletní průvodce budováním škálovatelného design systému s komponentami, typografií a barevnými sadami
Design systém není jen sbírka barev a komponent. Je to základní костру vaší práce — něco, co vám ušetří spoustu času. Když to děláte správně, všechny vaše designy jsou konzistentní a tvorba novách rozhraní je mnohem rychlejší.
Figma je k tomu ideální. Má všechno, co potřebujete — komponenty, tokenů, knihovny. Věc je v tom, jak to všechno seskládat dohromady. V tomhle průvodci vám ukážu, jak na to.
Začněte se základy
Než budete klikovat v Figmě, musíte si ujasnit, co všechno do vašeho systému patří. Typicky to bývá: barvy, typografie, spacing (rozestupy), ikony a základní komponenty. Je to jako stavba domu — nejdřív základy, pak zdi.
Začněte jednoduchým seznamem. Kolik barev potřebujete? Obvykle se lidé drží zhruba 8–12 primárních barev. Na typografii — jedna nebo dvě rodiny písem stačí. Neberte si pět fontů, budou se vám plést. Spacing vychází z nějaké sady — třeba 4px, 8px, 16px, 32px. To je logické a snadno se to škáluje.
Komponenty jsou srdce systému
V Figmě jsou komponenty jako šablony. Vytvoříte tlačítko jednou, pak ho použijete stokrát. Když ho později změníte, změní se všechna jeho použití. To vás zachrání před chybami a ušetří vám dny práce.
Doporučuji začít s těmito: tlačítka (různé stavy), vstupní pole, karty, modály a navigační prvky. Každý komponent by měl mít jasné varianty — primary, secondary, disabled, loading. V Figmě se to dělá přes properties, což vám dá úplnou kontrolu. Používejte jasné pojmenování — `Button/Primary/Large/Enabled` je mnohem lepší než `btn_v1_final_real`.
Design tokeny dávají vám kontrolu
Tokeny jsou v podstatě proměnné pro váš design. Místo abychom všude psali `#3b82f6`, napíšeme `color-primary`. Když pak chcete barvу změnit, změníte ji jednom místě a je to.
V Figmě si můžete tokenů vytvořit přes Variables. Nemusíte to dělat, ale velmi to doporučuji. Udělejte si tokeny pro: barvy, rozestupy, velikosti písem, tloušťku linií, zaoblení rohů. Když máte týmové projekty nebo vícero designérů, jsou tokenů absolutně nezbytné. Všichni budou pracovat se stejnými hodnotami.
Praktický workflow pro vás a váš tým
Mít systém je jedna věc. Používat ho správně je jiná. Tady je postup, kterou funguje:
Vytvořte hlavní soubor systému
Jeden Figma soubor, kde žijí všechny komponenty, barvy a tokeny. Všichni na něj mají přístup. Neměňte ho na první pokus — zkusit a iterujte.
Publikujte knihovnu
Figma má funkci pro publikování komponent jako knihovny. Ostatní designéři si ji přidají a budou mít vždy nejnovější verzi. Když update komponent, všichni to vidí.
Dokumentujte pravidla
Přidejte do souboru stránky s dokumentací. Kdy se používá která barva? Jaké je minimální padding u tlačítka? Jak se piše text v kartách? Budete překvapeni, jak hodně si lidé myslí věci jinak.
Praktické tipy, které vám pomohou
Organizujte hierarchii
Složky v Figmě jsou vaši přátelé. Skupinu věci logicky — Colors, Typography, Components, Patterns. V komponentech pak Color/Primary, Color/Secondary. Když to děláte dobře, není co hledat.
Používejte varianty
Místo abychom měli 50 verzí tlačítka, mějte jedno tlačítko se všemi variantami. V Figmě jde to dělat přes Component Properties. Jednodušší a čistší.
Iterujte pravidelně
Design systém se nevytváří jednou a pak se neměnit. Měníte se spolu s vašim produktem. Jednou za měsíc si sednout a podívejte se, co se změnilo a co zlepšit.
Zajeďte svůj tým
Systém je jenom dobrý, když ho všichni používají. Projděte s týmem, jak se používá. Udělej cheat sheet. Bez toho se vrátíte na začátek.
Testujte dostupnost
Vaše barvy musí mít dobrý kontrast. Obsah musí být čitelný. Vezměte si plugin na kontrolu kontrastu a použijte ho na všechny komponenty. Nemusí být to dokonalé, ale mělo by to být přístupné.
Exportujte pro vývojáře
Vývojáři potřebují konkrétní hodnoty — barvy v hexu, rozestupy v pixelech, velikosti písem. Udělej si v Figmě speciální stránku jenom pro ně. Nebo používejte pluginy, který to dělá automaticky.
Na závěr: Začněte malý
Nemusíte to všechno mít hned. Nebudujete design systém přes noc. Začněte s tím, co máte — 5 barev, 2 fonty, základní komponenty. Pak postupně přidávejte. Když to děláte takhle, nebudete frustrovaní a víte, co jste kde zapsali.
Nejdůležitější je začít. Jakmile máte základy, zbytek přijde sám. A věřte mi, až si jednou zvyknete pracovat se systémem, už se bez něj neobejdete. Vše bude konzistentnější, rychlejší a mnohem méně bolestivé.
Máte otázky? Vezměte si tužku, papír a nakreslete si to. Potom si otevřete Figmu a začněte klikat. Naučíte se to mnohem rychleji, než čtením průvodce.
Pokračujte v čtení
Důležité upozornění
Tento článek je informační a vzdělávací materiál. Každý projekt je jiný a vaše konkrétní potřeby se mohou lišit. Design systém, který vám zde popisujeme, je obecný přístup. Vždy zvažte svou situaci, velikost týmu a specifické požadavky vašeho produktu. Figma nabízí také své oficiální dokumenty a průvodce, které vám mohou poskytnout dalších detailů a aktuálních informací.