Jak vytvořit tlačítko ve Figmě

Návrhová tlačítka na Figmě lze vytvořit různými způsoby s využitím vlastností komponent a automatického rozvržení na platformě. Tlačítka lze tedy přizpůsobit pomocí štítků, velikostí a ikon. Pokud si nejste jisti, jak vytvořit tlačítka na Figmě, jste na správném místě.

Tento článek vysvětlí, jak vytvořit tlačítka a jak z Figmy vytěžit maximum.

Vytvoření tlačítka

Tlačítka jsou běžné prvky používané při návrhu funkčního uživatelského rozhraní. Můžete vytvořit tlačítko v designu Figma. Pokud jste ve Figmě nováčkem, musíte nejprve pochopit základy.

Zde je podrobný průvodce vytvářením tlačítek:

1. Vytvořte nový design Figma.
   
2. Přidejte rámeček stisknutím klávesy F na klávesnici a poté vyberte „desktop“ nebo „phone“.
   
3. Pomocí klávesy R na klávesnici přidejte obdélník s rozměry 50 pixelů na výšku a 200 pixelů na šířku.
   
4. Přidejte text stisknutím „T“ na klávesnici. Vycentrujte text tak, aby byl uprostřed textového pole vodorovně a svisle.
   
5. Umístěte toto textové pole doprostřed vašeho obdélníku.
   
6. Seskupte komponenty tak, jak je chcete mít.

Barvy můžete přidat vytvořením některých pomocí nástroje pro výběr barev, nebo můžete získat přístup k hexadecimálním barvám z internetu.

Kontrast

Barva textu v tlačítku závisí na tom, zda lépe kontrastuje s černým nebo bílým pozadím. Můžete použít obě možnosti, abyste zjistili, která z nich funguje nejlépe. Pokud se vám některá z možností nelíbí, můžete upravit styl a barvu tlačítka.

Vytváření základních tlačítek

Na Figmě lze vytvořit tři základní tlačítka.

Primární tlačítko

Primární tlačítka jsou plná barev s černým nebo bílým textem. Toto tlačítko přitahuje uživatele při používání aplikace. Takto si ho můžete vytvořit:

1. Vyberte si barvu tlačítka.
2. Vyberte obdélník a poté použijte vybranou barvu.
   
3. Barva textu v bílé nebo černé, v závislosti na lepším kontrastu.
   

Sekundární tlačítko

Obvykle se jedná o bílé tlačítko, ale ohraničené barvou, kterou si vyberete. Text tlačítka může mít stejnou barvu. Toto je druhé nejdůležitější tlačítko, které můžete vytvořit. Mělo by také přitahovat oči uživatele.

1. Změňte barvu obdélníku na bílou (#FFFFFF).
   
2. V obdélníku přidejte tah. Zde si můžete vybrat barvu, kterou preferujete.
   
3. Změňte barvu textu tak, aby měla stejnou barvu jako text.
   

Terciární tlačítko

Terciární tlačítka nejsou tak důležitá jako první dvě. Mohou fungovat jako tlačítka odkazu, odhlášení nebo zpět. Často jsou v prostém textu a v některých případech mohou být podtržené.

1. Udělejte svůj obdélník bílý bez tahu.
   
2. Změňte barvu textu na vaši preferovanou.
   

Můžete vytvořit terciární tlačítko, které se podobá primárnímu nebo sekundárnímu tlačítku. Můžete také změnit šířku tahu, abyste získali lepší viditelnost.

Vytvořte tlačítko pomocí textu, automatického rozvržení a barvy

S nástroji na platformě můžete získat praktické zkušenosti s automatickým rozložením a textovým nástrojem. S naváděním krok za krokem by vytvoření tlačítka mělo být relativně jednoduché. Chcete-li vytvořit tlačítko, musíte vytvořit textovou vrstvu, převést textovou vrstvu na rámeček automatického rozvržení a upravit styl tlačítka.

Vytvoření textové vrstvy

V tomto kroku se používá textový nástroj.

1. Klepnutím na textový nástroj na panelu nástrojů nebo stisknutím písmene „T“.
   
2. Když je aktivní nástroj Text, klepněte na své plátno a zadejte slovo „Button“. Všimněte si, že název textové vrstvy bude odpovídat všemu, co je napsáno na plátně, pokud není ručně změněno v panelu vrstev.
   
3. Pokud je třeba změnit název vrstvy, poklepejte na levý postranní panel a zadejte nový název, který jste si vybrali.
   

Nyní si také můžete pohrát s velikostí písma jeho zvětšením nebo zmenšením.

1. Vyberte svou textovou vrstvu.
   
2. Přejděte na pravý boční panel a změňte velikost písma v části Text. Můžete také změnit písmo nebo se držet výchozí možnosti.
   

Převeďte svou textovou vrstvu na rámečky s automatickým rozvržením

V tuto chvíli je třeba tlačítko dále doladit, aby vypadalo okouzlující. S automatickým rozložením můžete věci ještě trochu okořenit. Automatické rozložení je výkonná funkce na Figmě a lze ji použít pro responzivní návrhy. Tyto návrhy se automaticky přizpůsobují změnám, jako je velikost obsahu, umístění objektu a typ zařízení.

Automatické rozvržení lze použít k přeměně vrstev na snímky nebo na existující snímky. Chcete-li použít rozvržení na existující rámeček, vyberte svou textovou vrstvu a stiskněte zkratku „Shift“ „A“. Po použití rozložení si všimnete některých změn.

• Textová vrstva bude v rámci. Automatické rozvržení se aplikuje pouze na komponenty a rámečky, takže Figma umístí textovou vrstvu do nového rámečku automaticky. Rám nemá barvu výplně. To se aplikuje v kroku stylování tlačítka.
• Při výběru rámečku se na pravém postranním panelu zobrazí nastavení automatického rozvržení. Automatické rozvržení lze dále vylepšit.
• Všimnete si, že se se změnami textu rám zmenšuje a zvětšuje. S takovými dynamickými prvky ušetříte čas potřebný k navrhování obsahu prohlíženého na různých zařízeních nebo přeloženého do jiných jazyků.

Úprava stylu tlačítka

Můžete začít přidáním barvy.

1. Vyberte vrstvu rámečku a poté v pravém postranním panelu zvolte „Nastavení výplně“. Tím se barva
   automaticky vyplní. Výběr barvy změní barvu.
   
2. Vyberte textovou vrstvu a upravte výplň na #FFFFFF.
   
3. Znovu vyberte rámeček a poté pomocí nastavení pravého postranního panelu upravte poloměr rohu.
   

Další věcí je opravit polstrování rámu. Po převedení textu písmen na rozložení automatického rámečku se mezi text a ohraničení rámečku automaticky přidá výplň. Výplň se v tomto bodě jeví na všech stranách stejně. Spodní a horní výplň můžete změnit tak, aby byla menší než pravá a levá výplň.

Výplň můžete aktualizovat, jak chcete. Levé a pravé polstrování nebo horní a spodní polstrování lze změnit současně pomocí níže uvedených zkratek:

• Podržte <⌥ option=""> nebo a poté klikněte na oblast výplně a zadejte hodnotu výplně pro opačné strany
• Chcete-li změnit odsazení pro opačné strany, podržte <⌥ option=""> nebo při přetahování úchytů

V tomto okamžiku tlačítko vypadá dobře, ale stále můžete aktualizovat štítek. Chcete-li umožnit úpravy, musíte na text dvakrát kliknout. Zadejte slova „Zaregistrujte se“. Velikost tlačítka se během psaní mění. Takto navrhnete tlačítko pomocí nástroje pro automatické rozložení a text. Nyní můžete vyzkoušet něco nového, jako je přeměna tlačítka na součást nebo přidání varianty.

Vytvoření klikacího tlačítka

Figma používají společnosti jako Uber, Facebook, Google a Netflix. Funkce klikacího tlačítka usnadňuje návrhářům v takových společnostech vytvářet interaktivní a klikací tlačítka. Tlačítka na takových platformách výrazně usnadňují navigaci.

Zde je návod, jak vyvinout taková tlačítka ve Figmě:

1. V nabídce (vpravo) vyberte možnost „Prototyp“.
   
2. Klikněte na ikonu „Plus“ (+), která se nachází pod záložkou Prototyp. To vám umožní přidat interakci.
   
3. V okně s podrobnostmi o interakci zvolte „Při kliknutí“.
   
4. Vyberte možnost „Otevřít odkaz“.
   
5. Přidejte odkaz na stránku, kam bude tlačítko po kliknutí přesměrovat.
   
6. Klepnutím na ikonu „X“ opustíte okno s podrobnostmi o interakci.
   
7. Přejděte na tlačítko volby „Přehrát“ v pravém horním rohu.
   
8. Klepnutím na tlačítko „Přehrát“ získáte náhled návrhu.
   

Pokud na tlačítko najedete kurzorem, změní se na ikonu připomínající ruku. To znamená, že na tlačítko lze nyní kliknout.

Poznámka: Při vytváření klikacího tlačítka Figma vždy použijte „Při kliknutí“, nikoli „Při přetažení“. „Při kliknutí“ umožňuje přidat k tlačítku odkaz, na který lze kliknout. Tlačítka „Při přetažení“ nelze kliknout.

Design Lepší S Tlačítky Figma

Tlačítka Figma mají proměnné jako téma, stav, vnitřní výplň, délka, šířka a výška tabulky. Naučíte-li se vytvářet tlačítka na platformě, můžete z Figmy vytěžit maximum a přidat komponenty využívající hodnotu v rámci knihovny Figma.

Zkoušeli jste vytvářet tlačítka na Figmě? Pokud ano, jaké byly vaše zkušenosti? Dejte nám vědět v sekci komentářů níže.