Figma

Navrhování grafické podoby stránky/aplikace je primárním účelem této aplikace. Obdobně jako HTML k tomu využívá základní geometrické tvary, kterým lze nastavit různé vlastnosti pomocí grafického rozhraní. CSS pravidla prvků je možno také z návrhu exportovat, i když lze polemizovat o jejich správném užití v rámci celého návrhu (jak už to u WYSIWYG editorů bývá).

Vytváření skupin

Skupiny Vám pomáhají udržovat přehlednost v projektu o větším množství rámců. Skupinu si můžete představit jako podmnožinu skupiny, která logicky utváří určitý celek návrhu. Skupinu vytvoříte v levém postranním panelu výběrem požadovaných prvků a zkratkou CTRL + G (popřípadě možnost vytvoření skupiny naleznete v kontextovém menu pravého tlačítka myši). Se skupinou lze následně pracovat jako se samostatným prvkem (výhodné při přesouvání).

	⇉
Znázornění vytvoření skupiny s prvky textu.

Jedná se o pomyslnou skupina prvků, která se využívá pro přítomnost ve více rámců a v případě úpravy původní komponenty (ne kopie komponenty) dochází k automatické úpravě všech jejích kopií. Toho lze využít pro vytváření např. menu, headerů, footerů apod. Tvorba komponenty se realizuje také pomocí kontextové nabídky pravého menu, případně zkratkou CTR + ALT + K. 

Export CSS pravidel

Z návrhu používaná pravidla CSS je možné prohlížet a využívat v záložce Inspect (Zkontrolovat) v záhlaví pravého panelu. Jejich optimálnost zápisu ovšem hodné záleží na správnosti struktury návrhu a jeho vytvoření. Kodéřinu podle toho moc dělat nejde. :)