Figma je nástroj pro návrh uživatelského rozhraní, který pomáhá překlenout komunikační bariéru mezi návrháři a vývojáři.
Tento průvodce vysvětluje, jak můžete spolupracovat s Figma.
Přístup
- Přístup ke sdílenému odkazu: K Figma souboru projektu můžete přistoupit zde.
- Přihlásit se: Pokud ještě nejste přihlášeni, Figma vás k tomu vyzve.
Klíčové funkce jsou dostupné pouze přihlášeným uživatelům, jako je režim pro vývojáře a možnost výběru dedikovaného rámce.
Nebudete moci účinně spolupracovat bez účtu.
Struktura Figma
On the left sidebar, you can access the different pages of Twenty’s Figma. Takto jsou organizovány:
- Stránka komponentů: Toto je první stránka. Návrhář ji používá k vytváření a organizování znovupoužitelných návrhových prvků použitých v celém návrhovém souboru. Například tlačítka, ikony, symboly nebo jakékoli jiné znovupoužitelné komponenty. Slouží k zajištění konzistence v celém návrhu.
- Hlavní stránka: Druhá stránka je hlavní stránka, která zobrazuje kompletní uživatelské rozhraní projektu. Můžete stisknout “Přehrát”, abyste použili kompletní prototyp aplikace.
- Stránky funkcí: Ostatní stránky jsou obvykle věnovány funkcím ve vývoji. Obsahují návrh specifických funkcí nebo modulů aplikace či webu. Typicky se stále vyvíjejí.
Užitečné tipy
S přístupem pouze pro čtení nemůžete návrh upravovat, ale máte přístup ke všem funkcím užitečným pro přeměnu návrhu na kód.
Použití režimu pro vývojáře
Dev Mode Figma zvyšuje produktivitu vývojářů díky snadné navigaci designem, efektivnímu spravování prvků, efektivním komunikačním nástrojům, integracím do nástrojů, rychlým částem kódu a klíčovým informacím o vrstvě, čímž překonává mezeru mezi návrhem a vývojem. O Dev Mode se můžete dozvědět více zde.
Přepněte na režim „Vývojář“ v pravé části nástrojové lišty, kde si můžete prohlédnout specifikace návrhu, kopírovat CSS a přistupovat k prvkům.
Použití prototypu
Klikněte na libovolný prvek na plátně a stiskněte tlačítko „Přehrát“ v pravém horním rohu rozhraní k zobrazení prototypu. Režim prototypu vám umožňuje interakci s návrhem, jakoby to byl finální produkt. Ukazuje tok mezi obrazovkami a jak se prvky uživatelského rozhraní jako tlačítka, odkazy nebo menu chovají při interakci.
- Pochopení přechodů a animací: V prototypovém režimu můžete vidět libovolné přechody nebo animace, které návrhář přidal mezi obrazovky nebo prvky UI, což poskytuje jasné vizuální instrukce vývojářům o zamýšleném chování a stylu.
- Objasnění implementace: Prototyp může také pomoci snížit nejasnosti. Vývojáři s ním mohou interagovat pro lepší pochopení funkčnosti či vzhledu konkrétních prvků.
Pro podrobnější detaily a pokyny k Figma platformě můžete navštívit oficiální Figma Documentation.
Měření vzdálenosti
Vyberte prvek, podržte klávesu Option (Mac) nebo Alt (Windows) a pak přejeďte kurzorem nad jiným prvkem, abyste viděli vzdálenost mezi nimi.
Rozšíření Figma pro VSCode (doporučeno)
Figma pro VS Code
vám umožňuje procházet a zkoumat návrhové soubory, spolupracovat s návrháři, sledovat změny a zrychlit implementaci – vše bez opuštění vašeho textového editoru.
Je součástí našich doporučených rozšíření.
Spolupráce
- Použití komentářů: Jste vítáni použít funkci komentářů kliknutím na bublinu vlevo na nástrojové liště.
- Rozhovor prostřednictvím kurzoru: Hezkou funkcí Figma je Rozhovor prostřednictvím kurzoru. Stačí stisknout
; na Macu a / ve Windows a odeslat zprávu, pokud vidíte, že někdo jiný používá Figma současně s vámi.
