Svět softwaru pro grafický design je obrovský a má velkou konkurenci. Figma je jeden návrhářský nástroj, který se prohání na první místo pro návrháře UX/UI po celém světě. Co ale o tomto intuitivním nástroji víte?
I když je to jednoduché, existuje také křivka učení, pokud jste zvyklí na jiné návrhářské nástroje. Podívejme se na Figma a jak ji používat. Vítejte na Figma 101.
Co je Figma?
Pokud jste v posledních několika letech pracovali jako grafik nebo webdesignér, pravděpodobně jste o Figmě slyšeli. Možná jste to i použili.
Figma je návrhářský nástroj a neustále se stává oblíbeným pro digitální designéry, protože převyšuje možnosti jako Adobe XD, Adobe Photoshop a Sketch pro webový design a další. Nicméně, protože Adobe koupila Figmu v roce 2022, může dojít ke změnám, které změní pořadí tabulky.
Existují mnoho použití pro Figma. Primárně se používá pro digitální design a pro tisk nemůžete navrhovat ve CMYK. Některé z hlavních použití Figma zahrnují:
- Prototypování
- UX/UI design
- Design aplikace
- webový design
- Návrh prezentace
Můžeš použijte pluginy Figma pomoci předvést své návrhy, převést skutečné webové stránky na návrhy Figma pomocí pluginů a dokonce vytvářet hlavní šablony pro návrhy Figma ušetří vám čas při opakujících se typech návrhů.
Kolik stojí Figma?
Účet Figma si můžete vytvořit zdarma na Stránka Figma nebo stažením Aplikace Figma. Bezplatný účet poskytuje funkce pro všechny aspekty designu aplikace. Můžete navrhovat pomocí Figma a FigJam – nástroj pro spolupráci Figmy.
Pokud Figmu používáte jako fanoušek nebo jako jediný nezávislý uživatel, verze Free Forever je téměř dokonalá. Stále máte přístup ke všem pluginům, můžete zvát neomezený počet spolupracovníků, používat neomezený počet osobních souborů a používat Figmu ze všech platforem.
Zatímco bezplatná verze Figma nabízí více než dost pro každého standardního návrháře, předplatné Figma Professional vám to umožňuje pozvat spoluhráče, pracovat z týmových knihoven, mít přístup k neomezenému počtu souborů Figma a historii verzí a další, za 12 $ měsíčně za editor. Pokud jste student nebo pedagog, můžete získat Figma Professional zdarma.
Jak používat Figma: Základy
Ať už používáte aplikaci Figma nebo verzi prohlížeče, můžete to snadno sledovat.
Když otevřete Figmu, zobrazí se vám možnosti spuštění nového souboru Figma, nového souboru FigJam nebo importu souboru vytvořeného v jiném programu, jako je Sketch nebo Adobe XD. Pokud jste Figmu dříve používali, uvidíte také své předchozí projekty Figma, které můžete otevřít a pracovat na nich.
Navigace v pracovním prostoru Figma
Otevření nového souboru zpočátku nevypadá inspirativně. Na rozdíl od mnoha jiných návrhářských programů nezačínáte kreslicím plátnem nebo plátnem, ale zcela prázdnou stránkou návrhu. Ale s myslí plnou inspirace nezůstane dlouho prázdné místo.
Horizontální nabídka vlevo nahoře začíná znakem Hlavní menu ikona – logo Figma. Výběrem Hlavní menu, můžete přejít na své další soubory, rychlé akce Figma, typické možnosti souborů a přístup k pluginům, widgetům a knihovnám.
Dále najdete Hýbat se nástroj (PROTI), s Měřítko nástroj (K) uhnízděný pod ním. Tyto nástroje slouží k přesouvání prvků nebo ke změně měřítka částí vašeho návrhu nahoru nebo dolů. A napravo od těchto nástrojů uvidíte nástroje Region, Rám (F), Sekce, a Plátek, zasazené do sebe.
Ve Figmě je rám to, co jiné programy mohou nazývat kreslicí plátno nebo plátno. Vybrat Rám nakreslit plátno vlastní velikosti. Po výběru se v pravé nabídce zobrazí předpřipravené možnosti rámečku pro běžné velikosti zařízení: chytré telefony, tablety, stolní počítače, chytré hodinky, prezentace a možnosti sociálních médií. Můžete také kliknout a přetáhnout rám přímo, aby měl jakoukoli vlastní velikost.
Zpět do levého horního menu, napravo od nástrojů Region jsou nástroje Tvar nástroje, Pero nástroje a Text nástroj. Poté následují zdroje –Komponenty, Pluginy, a Widgety— a Ruka nástroj pro pohyb v souboru. A konečně, Komentáře nástroj, který je skvělý pro vytváření poznámek a spolupráci se spoluhráči.
Nabídka Figma Design
Když je rámeček nakreslený, výběr jeho názvu aktivuje rámeček připravený k návrhu. Nabídka vpravo zobrazuje názvy pro Design, Prototyp, a Kontrolovat. Jak název napovídá, možnost Design je nabídka, kterou použijete k návrhu prvků na rámu.
I když je úvodní nabídka Návrh poněkud zjednodušená, jak do návrhu přidáváte další prvky, možnosti nabídky se vyvíjejí. Nejprve se nabídka spustí shora dolů s nástroji pro zarovnání, nástroje pro změnu velikosti, Automatické rozložení, Mřížka rozložení, Vrstva, Vyplnit, Mrtvice, Efekty, a Vývozní. Některé z nich jsou ve výchozím nastavení minimalizovány, ale kliknutím na + podepsat, můžete otevřít libovolné menu nebo kliknout – aby se to minimalizovalo.
Jakmile nakreslíte svůj hlavní rám pro projekt, můžete pomocí nástrojů Tvar nebo Pero kreslit tvary nebo přidat zástupné symboly obrázků a text můžete přidat pomocí nástroje Text způsobem, který jste pravděpodobně udělali v jiných software.
Jakmile budete mít tvary nebo text na rámu, použijte různé možnosti nabídky vpravo k úpravě a návrhu těchto prvků. The Vrstva nabídka nabízí režimy krytí a prolnutí; s Vyplnit můžete přidat barvu nebo vložit obrázky pomocí některých funkcí úprav, jako je Vystavení, Kontrast, Teplota, a více.
Jak ve svém projektu vytváříte více prvků, vrstvy se budou tvořit na levé straně Vrstvy menu vedle Aktiva tab. Poklepáním na název vrstvy můžete najít prvek a naopak; můžete poklepáním na prvek návrhu najít zvýrazněnou vrstvu. Dvojité kliknutí na názvy vám umožní přejmenovat je pro optimální organizaci.
Nabídka Figma Prototype
Napravo od Design možnost nabídky je Prototyp Jídelní lístek. Jakmile dokončíte vizuální aspekty svého návrhu a nastavíte rámečky obrázků a text, kam by měly být, můžete pomocí prototypových nástrojů přidat do svých návrhů animace a přechody.
The Prototyp umožňuje spojovat rámečky nebo komponenty dohromady jako přechody. Můžete si vybrat, jaké pořadí a jak se každý snímek přechází do jiného.
Funguje to skvěle, pokud ano vytvoření prezentace Figma který animuje z jednoho snímku na druhý, ale tento nástroj vám také odborně umožňuje vizualizovat animace pro tlačítka nebo nabídky pro návrh aplikací a webu. Můžete přidat více přechodů na stránku pro všechny různé věci, takže uvidíte, jak by uživatelé s vaším webem interagovali, když je aktivní.
I když použití Figmy k návrhu webu není totéž jako vytvoření živého webu, můžete svou Figmu předat navrhněte svému vývojářskému týmu, který může vaše interakce s prototypem znovu vytvořit jako návrhy animací v reálném životě webová stránka. To znamená, že můžete přecházet ze stránky na stránku z kliknutí, času nebo jiných interakcí.
Začít s Figma je snadné
Nyní víte, jak se pohybovat v rozložení Figma a jak fungují základní nástroje pro návrh a prototyp. Vzhledem k tomu, že Figma je tak snadno dostupná, je čas jít a pohrát si s tímto návrhářským nástrojem a podívat se, co můžete vytvořit.