Tento výukový program je určen pro ty, kteří jsou ve Figmě noví.
Zdroj
Christine Vallaure
Sketch jsme v posledních letech hodně používali a stále jsme jeho velkým fanouškem. Když však došlo na spolupráci, nastaly nesnesitelné potíže a musely se hledat alternativy. Ať jsme použili cokoli, vypadali mnohem méně pohodlně a způsobovali další potíže, situace byla obdobná s prototypováním. Figma slíbila, že nám usnadní život, a svůj slib splnila.
Výhody:
- Je to zdarma (až dva uživatelé a tři projekty na účet)
- Funguje jako na Macu a na PC (Sketch pouze pro Mac)
- Týmová práce v reálném čase
- Můžete importovat soubory Sketch (ale pozor, nemůžete export do aplikace Sketch!)
- Integrované doručování projektů vývojářům🥳
- Fantastická týmová knihovna/designové systémy
- Komplexní vysoce kvalitní prototypování
Nevýhody:
- K práci potřebujete připojení k internetu, ale můžete soubor uložit lokálně, pracovat s ním a přidat jej později.
1. Začínáme
1.1 Get Figma
Přejděte na stránku figma.com, zaregistrujte se a postupujte podle pokynů. Vše bude hotové za pár minut!
Možná jste si všimli, že vám Figma umožňuje vytvářet týmy a projekty, o kterých budu hovořit později, zatím jen vytvořte nový soubor (z nabídky nebo pomocí cmd + N ).
Na rozdíl od Sketch se soubory Figma neukládají na vašem počítači, ale v cloudu. Ke všem projektům máte přístup prostřednictvím svého prohlížeče kdykoli a kdekoli. K dispozici je také samostatná aplikace pro Mac a PC. Doporučuji je použít, ale to není vůbec nutné.
Nevýhody: Stále potřebujete internet. Soubor však můžete předem načíst do aplikace a pracovat offline.
1.2 Import starých souborů ze Sketch
Figma vám umožňuje rychle a přesně importovat soubory Sketch. Stačí přetáhnout soubor náčrtu na plátno Figma!
Jednotlivé prvky můžete také zkopírovat z náčrtu tak, že na ně kliknete pravým tlačítkem a zkopírujete je jako SVG!
☝Tip: Při importu z aplikace Sketch doporučuji použít aplikaci figma, protože prohlížeč nebude zobrazovat místní písma, což zničí váš soubor.
2. Vývoj v aplikaci Figma
2.1 Nastavení nových rámců (kreslicích pláten)
Pokud jste dříve používali Sketch, bude pro vás mnohem snazší začít. Stisknutím kláves A nebo F, zobrazíte všechny možnosti rámečku na panelu vlastností vpravo a vyberete velikost nebo jen nakreslíte vlastní rámeček. Stejně jako Sketch můžete pracovat s 1x (což znamená skutečnou velikost pixelu, protože při změně velikosti nedojde ke ztrátě kvality). Stále můžete exportovat podklady libovolné velikosti, kterou potřebujete.
Na rozdíl od tradičních kreslicích pláten můžete rámy vnořit samostatně do každého další. To vám umožní vytvářet složitější vzory.
2.2 Mřížky a rozvržení
U mobilních zařízení můžete použít standardní 8bodovou mřížku. Pro web to není tolik roztečí jako rozložení mřížek. Můžete začít s populární 12sloupcovou mřížkou, což bude jednodušší. K dispozici je také složitější a modernější možnost – vlastní mřížka CSS. Nejlepší je předem si promluvit se svým vývojářem a dohodnout se, kterou mřížku použijete.
Upravte mřížku v nabídce vlastností vpravo. Můžete přejít z mřížky na sloupce nebo řádky a také to udělat pevným nebo plynulým.
Skvělá věc na mřížkách a sloupcích je, že můžete nastavit více mřížek najednou a uložit je. Jedná se o užitečnou funkci, která vám pomůže přizpůsobit rozvržení pro různá zařízení, sdílet je se členy týmu nebo je znovu použít v jiných projektech.
☝Tip: viditelnost můžete přepínat pomocí ctrl + G.
2.3 Vrstvy a skupiny
Stejně jako v aplikaci Sketch najdete na levé straně obrazovky panel Vrstvy.
- Vrstvy → každý nový prvek, který přidáte, automaticky vytvoří vrstvu. Vrstvy můžete přesouvat jednoduchým přetažením.
- Seskupit vrstvy → Nezapomeňte seskupit vrstvy (vyberte vrstvy a stiskněte cmd + G), aby byl váš soubor uspořádaný a čistý. Pomůže vám také rychle přesouvat a kopírovat skupiny mezi snímky. Chcete-li vybrat položku, stiskněte cmd a klikněte na ni. Nikdy nezapomeňte seskupit vrstvy!
- Stránky → Můžete přizpůsobit různé sekce nebo oblasti vašeho designu. Neexistují žádná pravidla týkající se jejich použití. Můžete vytvořit samostatné stránky pro neuspořádaný brainstorming (nějaký druh konceptu), rozvržení a finální verzi.
- Aktiva → Na tomto místě jsou uloženy vaše komponenty, také v této části budete najděte knihovnu.
- Vnořené rámce → To je užitečné pro strukturování a vytváření prototypů. 2.4 Vektorové tvary Figma používá k vytváření složitých tvarů takzvané vektorové sítě!
2.4 Vektorové tvary
Figma používá k vytváření složitých tvarů takzvané vektorové sítě!
Tvary můžete vytvářet pomocí klávesových zkratek R (obdélník), L (čára) nebo O (elipsa). Podržením posunu zachováte poměr stran . Každý takový tvar automaticky vytváří svou vlastní vrstvu.
Chcete-li vytvořit složitější tvar, stiskněte P nebo vyberte pero z nabídky v horní části. Po dokončení stačí stisknout klávesu Enter. Vlastnosti můžete měnit a s vektorovými tvary manipulovat kdykoli během procesu návrhu pomocí nabídky vlastností na pravé straně.
☝Poznámka: vektory lze škálovat a exportovat v jakékoli velikosti. Jsou ideální pro vytváření jednoduchých tvarů, tlačítek, ikon, log a všech druhů jednoduchých ilustrací.
2.5 Obrázky
Přetáhněte obrázek na scénu. Na Figmě jsou obrázky vždy umístěny uvnitř tvaru (podobně jako maska). Chcete-li změnit vlastnosti obrázku, klikněte na „Vyplnit“ v okně vlastností vpravo a změňte je podle svých představ.
Z rozevíracího seznamu můžete vybrat:
- Vyplnit → Obrázek vyplní kontejner.
- Přizpůsobit → Při změně velikosti nebude obrázek nikdy oříznut ani skryt.
- Oříznout → Umožňuje oříznout obrázek na požadovanou velikost a výběr. Vezměte prosím na vědomí, že neztratíte zbytek obrázku.
- Dlaždice → V případě potřeby opakuje původní obrázky.
Kromě toho vám Figma umožňuje přizpůsobit vlastnosti, jako je barva a sytost. Pamatujte, že nikdy neztratíte původní vlastnosti obrázku, takže při práci s barvami si nedělejte starosti.
☝Poznámka: Existující tvar můžete také vyplnit obrázkem. Klikněte na tvar a přejděte na „Vyplnit“ a v rozevíracím seznamu vyberte „obrázek“.
☝Poznámka: pokud jste začátečník, mějte na paměti, že musíte vlastnit nebo kupovat práva na obrázky, které používáte. Také nikdo neodsuzuje použití obrázků bez licence, najdete je v Unsplash.
2.6 Typografie
Figma již má předinstalovaná písma od Google! Pokud ale dáváte přednost místním písmům, musíte si nainstalovat Pomocníka pro písma nebo aplikaci Figma. Také se ujistěte, že každý, kdo pracuje se souborem, má požadovaná písma.
Stiskněte T vytvořit textové pole. Jako obvykle můžete nastavit všechny vlastnosti textu v nabídce vlastností vpravo.
☝Tip: Pokud jste v designu webů a aplikací nováčkem, ujistěte se, že váš text má minimálně 16px, zaměřte se na 18px. V závislosti na vašem písmu také doporučuji mírně zvýšit výšku řádku pro lepší čitelnost.
3. Styly
Styly vám umožňují uložit a znovu použít vlastnosti. Tímto způsobem lze okamžitě aktualizovat velké soubory. Můžete vytvářet styly pro barvu, text, mřížky a efekty, například stíny.
Chcete-li zobrazit všechny používané styly, klikněte na šedé pozadí vedle ohraničení a zobrazí se v nabídce vlastností vpravo.
3.1 Vytváření barevných stylů
Styly barev a přechodů ve Figmě jsou úžasné. Jeden styl můžete upravit a znovu použít pro text, výplně a cesty! Pravým kliknutím na styl je můžete kdykoli změnit a odstranit.
Vytvořte a použijte svůj vlastní barevný styl:
1. Vytvořit objekt
2. Změňte výplň na požadovanou hodnotu barvy
3. Klikněte na symbol čtverce obsahující barevné styly.
4. Kliknutím na „+“ přidáte třídu. Hotovo!
☝Tip: když pojmenujete styl, pojmenujte jeho rozsah, a ne jen napište název samotné barvy („barva zvýraznění“, nikoli „oranžová“) ).
3.2 Styling textu
Na rozdíl od Sketch obsahují vlastnosti, které jsou uloženy v textových stylech v aplikaci Figma, pouze informace o rodině písem, velikosti, výšce řádků a mezerách. Díky tomuto přístupu je vaše knihovna stylů hezká a výstižná, protože není nutné duplikovat styl pro jinou verzi barvy nebo zarovnání.
Nastavení stylu textu je podobné nastavení stylu barev:
< span class = "ui_preloader__dot">
1. Vyberte text
2. V nabídce vlastností vpravo klikněte na ikonu čtvercového stylu.
3. Klikněte na znaménko „+“ a pojmenujte ho.
4. Chcete-li přidat styl k existujícímu textu – klikněte na text a potom vyberte požadovaný styl z nabídky vpravo.
Po přidání stylu můžete také změnit jeho vlastnosti nebo jej úplně odebrat pomocí nabídky.
☝Tip: Stejně jako u barev je nejlepší pojmenovat styly podle oblasti jejich použití. Tímto způsobem můžete písma kdykoli upravit bez přejmenování.
3.3. Více stylů
Mřížky lze také uložit a znovu použít jako styly.
Další efekty jako stín, vnitřní stín, rozostření vrstev a rozostření pozadí:
4. Komponenty
Komponenty jsou prvky uživatelského rozhraní, které lze znovu použít ve vašich projektech. Díky součástem je váš návrh (a následné programování) konzistentní, usnadňují se aktualizace a škálování návrhových prvků, což vám ušetří spoustu času!
4.1 Vytváření opakovaně použitelných komponent
1. Vyberte objekt a klikněte na tlačítko vytvořit komponentu v horní části obrazovky nebo cmd + alt + K.
2. Na panelu vrstev uvidíte ikonu fialové komponenty. To znamená, že jste vytvořili hlavní komponentu.
Pokud nyní vytvoříme kopii hlavní komponenty, automaticky se vytvoří identická kopie, která se nazývá instance. Jakékoli změny hlavní komponenty budou mít za následek stejné změny ve všech případech. Jednoduše řečeno, všechny změny nadřazené komponenty zdědí všechny děti.
Všechny vaše komponenty najdete na kartě Aktiva vedle vrstev nalevo je můžete také přetáhnout do pracovního prostoru.
☝Tip: z dlouhodobého hlediska byste se měli snažit sladit své komponenty Figma s front-end komponentami (jako komponenty v ReactJS). Nejlepší je projednat to se svým programovacím týmem a dohodnout se na společné akci.
4.2 Nahrazení a vnoření
Instance komponent lze vnořit do hlavních komponent. To znamená, že můžete mít komponenty uvnitř komponent, uvnitř komponent (pokud jste sledovali Inception, víte, co tím myslím).
Vnořené instance můžete zaměnit pomocí nabídky nahradit instance vpravo, nebo stačí podržet cmd + alt + možnost a přetáhnout je z knihovny.
4.3 Přepsat
Instance bude vždy odpovídat hlavní komponentě ve velikosti a celkovém rozložení, ale můžete změnit vlastnosti instance, jako je barva, text a obrysy.
Chcete-li vše vrátit do původního stavu, všimněte si tlačítka Zpět v nabídce vlastností. Instanci můžete také odpojit kliknutím pravým tlačítkem na ni.
4.5 Názvy komponent
Pomocí „/“ přejmenujte komponentu, například můžete přejmenovat „share-icon“ na ikonu/share. Figma poté automaticky vytvoří nadřazenou kategorii nazvanou ikona, která splní všechny vaše sny o sdílení a exportu instancí!
Autor způsobem, pokud máte hlavní komponenty na více stránkách, budou uspořádány podle stránek.
☝Tip: Aby byly komponenty dobře organizované, vytvořte pro každou skupinu nový rámeček, například tlačítka nebo tvary. Nyní tam přetáhněte hlavní součásti. Všechny prvky budou uvedeny v abecedním pořadí.
5. Automatické rozložení
Automatické rozvržení umožňuje vytvářet dynamické rámečky, které se zvětšují nebo zmenšují při změně obsahu v nich. Jedná se o neuvěřitelnou funkci, protože vám ušetří spoustu času a také vám umožní jediným kliknutím zkontrolovat, zda váš návrh dobře funguje se skutečným obsahem.
5.1 Změna vrstev v automatickém rozložení
- Přidejte svůj obsah
- Shift + A automaticky vytvoří novou součást kolem textové vrstvy se svislou a vodorovnou výplní.
- Nyní změňte obsah a uvidíte, že velikost tlačítka se automaticky změní
5.2 Vnořené automatické rozvržení
Komponenty automatického rozvržení lze vnořit a kombinovat vodorovné a svislé proporce a vytvořit tak atraktivní rozhraní.
Vyberte objekty a stiskněte Shift + A , rámeček automatického rozvržení je nyní podřízeným rámcem v rámci nadřazeného objektu. Chcete-li zabránit roztažení textových rámečků pouze jedním směrem, vyberte pevnou výšku.
☝Tip: můžete vyměnit podřízené snímky v rámci nadřazených snímků přesunutím vrstev. Docela pěkná funkce.
☝Poznámka: libovolné rámečky s automatickým rozvržením lze uložit jako komponenty. Na automatickém rozvržení však nebude rolování přetékání fungovat. To se stává relevantní pro prototypování. Jedním trikem, který můžete použít, je vložit rámec automatického rozvržení do běžného rámce.
6. Prototypování ve Figmě
Figma má fantastické prototypy pro váš webový design a návrh aplikace. Nepotřebujete žádný další nástroj.
6.1 Prototypování
Vyberte rámeček a na pravé straně nabídky vlastností klikněte na „Prototyp“, poté na „Nastavení prototypu“ a vyberte zařízení, pro které budete vyvíjet. Poté stiskněte tlačítko přehrávání v pravém horním rohu a podívejte se na svůj design v akci. Můžete si také stáhnout aplikaci Figma Mirror do svého telefonu a prohlédnout si náhled designu ve svém zařízení.
6.2 Připojení obrazovek
Ujistěte se, že jste v nabídce prototypů vpravo. Všimněte si, že vybraná položka má modré ohraničení s malým modrým kruhem. Klikněte a podržte jej. Při přetahování se zobrazí šipka, kterou lze připojit k jinému rámečku.
Na panelu vlastností na pravé straně můžete vybrat akci (přejetí prstem, kliknutí, najetí myší atd.) A animace (snímek, klikněte, přejeďte atd.)
6.3. Chování při přetečení
Kromě vertikálního posouvání nabízí Figma další velmi realistické chování při přetečení.
- Horizontální posouvání → Vyberte všechny prvky a seskupte je. Nyní nakreslete rámeček požadované velikosti, přesuňte nebo zkopírujte skupinu dovnitř a přetečení skryjte. V rozevíracím seznamu vyberte vodorovné posouvání.
- Panoramatické (jako v Mapách Google) → Nakreslete rámeček a přidejte obrázek. V rozbalovací nabídce vyberte současně vodorovné i svislé posouvání.
- Opravit prvky → Chcete-li, aby byl nadpis nebo tlačítka lepivé, zkontrolujte, zda je vybrána možnost „opravit polohu“ („ Návrh „& gt;„ Omezení “V nabídce vlastností vlastností)
6.4 Smart Animate
Smart Animate vyhledá odpovídající vrstvy, rozpozná rozdíly mezi nimi a animuje je mezi snímky. To umožňuje výkonné prototypy. Jakmile zvládnete Smart Animate, pravděpodobně nebudete potřebovat další prototypové nástroje.
7. Sdílení a práce s ostatními
7.1 Režim prezentace
Kliknutím na ikonu přehrávání v pravém horním rohu otevřete prezentační obrazovku na nové kartě. Tímto způsobem budete moci zobrazit všechny snímky. Najdete zde pole pro komentář, režim celé obrazovky a jednoduchý odkaz na projekt.
7.2 Vytvoření týmu a projektu
Týmy ve Figmě vám umožňují spolupracovat s ostatními nebo jednoduše strukturovat vaši práci. Můžete pozvat členy, přidávat projekty a ukládat konkrétní knihovny.
Chcete-li vytvořit tým, jednoduše klikněte na tlačítko „Vytvořit nový tým“ a postupujte podle pokynů.
- Tým → tým lidí, jako je designér, vývojář, copywriter atd.
- Projekty → Uchovávejte související soubory na jednom místě.
- < b> Soubory → samostatné soubory návrhů, zde se vytváří skutečný návrh
☝Poznámka: můžete přesouvat soubory mezi projekty a týmy kdykoli.
7.3 Knihovna
Při práci v týmu potřebujeme jedno konkrétní místo, kde jsou uloženy nejnovější aktualizace všech komponent a stylů a ke kterému mají všichni členové týmu přístup k takzvanému jedinému zdroji pravdy. Týmová knihovna Figma to odvede skvěle a bude páteří vašeho návrhového systému.
☝Poznámka: návrhové systémy jsou dnes důležitou součástí UX/UI a stojí za to věnovat jim nějaký čas, abyste se seznámili s konceptem a různými přístupy.
Špatné zprávy: v bezplatné verzi můžete do týmové knihovny publikovat pouze styly barev. Pro uložení komponent budete potřebovat status Pro.
Vytvoření knihovny příkazů:
1. V nabídce vlevo přejděte na Aktiva a klikněte na ikonu knihy.
2. Klikněte na publikovat
3. Pojmenujte svůj příspěvek
4. Otevřete nový čistý soubor v příkazu
5. Přejděte na kartu Aktiva, klikněte na ikonu knihovny a aktivujte knihovnu, kterou jste právě vytvořili.
Aktualizace knihovny příkazů:
Kdykoli změníte hlavní komponentu nebo styl, Figma vás vyzve k aktualizaci knihovny příkazů. Po aktualizaci obdrží všichni ostatní členové týmu oznámení, že pro knihovnu jsou k dispozici aktualizace, mohou si prohlížet a aktualizovat jednotlivé komponenty nebo aktualizovat všechny najednou.
☝Poznámka: Sdílené knihovny jsou velmi výkonné a mohou tvořit páteř vašeho procesu návrhu.
7.4 Spolupracujte s dalšími designéry a vývojáři
Pozvěte lidi kliknutím na tlačítko Sdílet v horní nabídce a zadejte e-mailovou adresu nebo zkopírujte odkaz a odešlete jej svým kolegům.
< b> Návrháři a copywritery → Instalovat REŽIM ÚPRAV. Poskytne uživatelům přístup ke všem funkcím. Uvidíte avatary a kurzory ostatních uživatelů a můžete pracovat společně v reálném čase v jednom souboru!
Vývojáři → nainstalujte REŽIM ZOBRAZENÍ . Uživatel bude moci zobrazit všechny specifikace (přepínání kódu CSS, iOS a Android). Mohou také přistupovat k vašemu prototypu v akci a stahovat libovolná díla, která chtějí.
☝ Poznámka: pokud sdílíte práci s vývojáři, zatímco ještě dokončujete projekt, je nejlepší vytvořit samostatnou stránku s nejnovější verzí projektu, abyste předešli nejasnostem.
7.5 Export aktiv
Ve službě Figma lze všechna aktiva exportovat v jakékoli velikosti přímo ze sdílených souborů, i když k prohlížení souboru máte pouze oprávnění. Jako designér tedy nemusíte nic exportovat sami. Pokud si však přejete, funguje to takto:
1. Vyberte objekt.
2. Klikněte na export v nabídce vlastností vpravo.
3. Určete, jak exportovat, a jste hotovi!
☝Poznámka: Nezapomeňte uvést název znakem „/“, například image/home/imagename, icon/iconname, který automaticky seřadí export do souborů.
Cheat sheet kdy exportovat co:
- SVG → použít pro vektorové soubory, jako jsou loga a ikony . SVG lze škálovat na libovolnou velikost bez ztráty kvality. Nezapomeňte exportovat zálohu png.
- Jpg → použít pro všechny druhy obdélníkových obrázků a fotografií. Nezapomeňte uvést skutečnou velikost (1x) i (2x).
- Png → Použijte, pokud váš obrázek nebo fotografie vyžaduje průhledné pozadí. Budete také potřebovat (1x) a alespoň (2x) exporty.
- 1x, 2x → 1x je skutečná velikost. 2x – dvojnásobná velikost. K získání jasného obrazu je vyžadováno 2x. Všimněte si, že 2x, 3x atd. Přicházejí s příponou @ 2x, @ 3x, což bude mít význam pro identifikaci a volání správného obrázku při kódování.
- w & amp; h → Můžete také nastavit šířku, například 300w = obrázek o šířce 300px. Ditto pro height = h.
- pdf → se používá, pokud chcete exportovat celou stránku, například pro zaslání e-mailem nebo přidání do prezentace, a potřebujete vysoká kvalita.
Vyhledejte další zajímavé a relevantní články v našem blogu a telegramovém kanálu.
