Figma

1. O programu

Figma je cloudový nástroj pro realizaci návrhu designu a prototypování (nejen) webových stránek. Uživatel pro práci nepotřebuje znát žádný programovací, skriptovací ani kódovací jazyk, vlastnosti jednotlivých prvků a komponent je možné editovat pomocí grafického rozhraní. 

Vzhledem k umístění aplikace do cloudu umožňuje Figma real-time spolupráci více lidí na jednom projektu. Tím pádem najednou můžete vytvářet základní design, vkládat obsah do jednotlivých snímků, probírat grafické funkce stránek, připravovat rozvržení pro více druhů zařízení aj.

V případě, že by Vám nevyhovovalo, že někdo může doslova pod rukama měnit Vaší práci, je možné si stáhnout desktopové verze aplikace. V následujícím textu je práce představována ve webové aplikaci.

2. Rozhraní

Svým provedením a ovládáním Figma velmi připomíná grafické editory, i když s omezenými možnostmi. Rozvržení aplikace je následující: 

Ovládací menu

Stavebním kamenem aplikace je tzv. Rámec (zvýrazněno), v originále Frame. Jedná se o základní plátno reprezentující budoucí webovou stránku prohlíženou na určitém zařízení. Výchozí velikostní hodnoty má přednastavené, ale je možné je v případě potřeby dále měnit. Možnost výběru mezi různými rámci se Vám zobrazí v pravém panelu, vizte screen níže.

Panel vrstev a doplňků

V levém sloupci můžete nalézt všechny prvky, s kterými v rámci návrhu pracujete a máte je umístěné jak v rámcích, ale  mimo ně. Je vhodné za účelem přehlednosti všechny prvky patřičně pojmenovat a v rozumné míře využívat skupiny prvků a komponenty, viz v další kapitole. 

Vlastnosti prvku

V pravém sloupci se nacházejí vlastnosti právě vybraného prvku, které můžete snadno upravit. Pozor, většina z nich je kvůli množství skrytá. tyto další rozšiřující možnosti je možné zobrazit kliknutím na .

Současně zde (v horní části sloupce) můžete přepínat mezi režimy Design - Prototyp - Zkontrolovat. 

3. Design

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. :)

4. Prototyp

Prototypování souhrnně představuje proces tvorby neúplných webových stránek ve formě základních návrhů, mezi nimiž je možné interaktivně přecházet. Jedná se tedy o návrh struktury webu, jeho designu, vkládání zástupného obsahu a zobrazování základních funkcionalit, které budou k dispozici.

Pod pojmeme prototyp můžeme ale chápat z grafického pohledu hotový prvek, který disponuje určitou funkcí. Přiřazování událostí prvkům je realizováno v záložce Prototyp, která je k dispozici v záhlaví pravého panelu.

Změna režimu je doprovázena drobnými grafickými odlišnostmi oproti režimu Designu. Jedná se o zobrazení akčního bodu, pomocí kterého lze jednodušší formou vytvářet funkce vybraného prvku. Ty je možné spravovat a "naklikávat" v pravém panelu. Jeden prvek může mít více různých událostí.

• On click - při kliku myši,
• On drag - při uchopení a tažení myší,
• On hovering - při přejetí kurzorem myši,
• On pressing - při kliku (on click kontroluje, jestli bylo levé tlačítko myši i uvolněno),
• Key/gamepad - při zmáčknutí určité klávesy.

Ukázky možných událostí 

Odkaz

Jedna základních událostí, které pro v prototypování využívá, protože návrháři chtějí ukazovat webové stránky s různým grafickým rozvržením obsahu. Zjednodušenou cestou ho vytvoříme chycením zvýrazněného bodu na boční straně elementu a objevivší šipku vytáhneme k požadovanému rámci, na který chceme přejít po kliknutí na prvek. Event můžeme případně i naklikat manuálním přidání interakce (ikona +). 

Hover efekt

Efekty zobrazující se při přejetí kurzoru myši jsou o trochu komplikovanější, protože vyžadují vytvoření počátečního a koncového vzhledu daného prvku. Protože rámce vykreslují veškerý obsah, který je na nich umístěn, musíme koncový stav prvku umístit mimo ně. 

Znázornění vytvořené interakce	Znázornění překrytí počátečního stavu stavem koncovým.

Pro jednoduché vytvoření je vhodné si zkontrolovat, aby oba dva stavy měly stejné rozměry. Cílem interakce, resp. eventu, mohou být pouze rámce. Z toho důvodu je potřeba koncový prvek "zabalit" do rámce klávesovou zkratkou CTR + ALT + G, případně volbou Frame selection přes kontextové menu. Níže na výstřižku můžete vidět nastavení hover efektu. 

Open overlay s nastavením překrytí Manual zajistí automatické překrytí zvoleným koncovým prvek. V případě potřeby je možné s ním pohybovat.

5. Doplňky a šablony

Během tvorby lze využít toho, že Figma má velmi rozšířenou uživatelskou komunitu. Jedná se defakto o UI/UX komunitu, ve které si uživatel vytváří své portfolio projektů. Ty mohou posloužit jako základ ostatním uživatelům - to především usnadňuje tvorbu již zažitých komponent a poskytuje také zpětnou vazbu (protože čím více je něco povedené, tím více to bude využívat). 

Jak použít práci někoho jiného?

Otázka, která Vás při čtení těchto řádků zajímá. Jak na to? Vše vždy začíná u hledání a nalezení odpovídající doplňku, který lze využít. Veškerý obsah si lze prohlédnout bez zbytečného otevírání projektu. Pokud po zběžném ohodnocení vypadá projekt slibně, stačí ho duplikovat, čímž vznikne na Vašem účtu nový projekt s kopií doplňku.

Veškeré dostupné komponenty jsou k dispozici v levém panelu (většinou strukturované ve stránkách). Můžete je prohlížet v záložce Assets v tentýž panelu nebo i ve vykresleném pracovním prostoru. 

Pozor, ačkoliv jsou komponenty již hotové, můžete je upravovat a až následně využívat s pozměněnými parametry. 

Seznam některých šablon a doplňků

• Bootstrap 4+ UI Kit (autor: José Alvarez)
• Bootstrap 5 (autor: Oliver Williams)
• Font Awesome Icons (autor: Font Awesome & Jory Raphael)

6. Návod od Figmy

Pokud Vám v této kapitole obsažené informace nestačily, doporučujeme si projít oficiální návody realizované na portále Figma. 

• Základy Figmy
• Tvorba (wire)rámců
• Tvorba prototypů