Jak vytvořit tlačítko ve Figmě

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ě.

Jak vytvořit tlačítko ve Figmě

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.
    Jak vytvořit tlačítko ve Figmě
  2. Přidejte rámeček stisknutím klávesy F na klávesnici a poté vyberte „desktop“ nebo „phone“.
    Jak vytvořit tlačítko ve Figmě
  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.
    Jak vytvořit tlačítko ve Figmě
  4. Přidejte text stisknutím „T“ na klávesnici. Vycentrujte text tak, aby byl uprostřed textového pole vodorovně a svisle.
    Jak vytvořit tlačítko ve Figmě
  5. Umístěte toto textové pole doprostřed vašeho obdélníku.
    Jak vytvořit tlačítko ve Figmě
  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.
    Jak vytvořit tlačítko ve Figmě
  3. Barva textu v bílé nebo černé, v závislosti na lepším kontrastu.
    Jak vytvořit tlačítko ve Figmě

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).
    Jak vytvořit tlačítko ve Figmě
  2. V obdélníku přidejte tah. Zde si můžete vybrat barvu, kterou preferujete.
    Jak vytvořit tlačítko ve Figmě
  3. Změňte barvu textu tak, aby měla stejnou barvu jako text.
    Jak vytvořit tlačítko ve Figmě

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.
    Jak vytvořit tlačítko ve Figmě
  2. Změňte barvu textu na vaši preferovanou.
    Jak vytvořit tlačítko ve Figmě

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“.
    Jak vytvořit tlačítko ve Figmě
  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.
    Jak vytvořit tlačítko ve Figmě
  3. Pokud je třeba změnit název vrstvy, poklepejte na levý postranní panel a zadejte nový název, který jste si vybrali.
    Jak vytvořit tlačítko ve Figmě

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.
    Jak vytvořit tlačítko ve Figmě
  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.
    Jak vytvořit tlačítko ve Figmě

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.
    Jak vytvořit tlačítko ve Figmě
  2. Vyberte textovou vrstvu a upravte výplň na #FFFFFF.
    Jak vytvořit tlačítko ve Figmě
  3. Znovu vyberte rámeček a poté pomocí nastavení pravého postranního panelu upravte poloměr rohu.
    Jak vytvořit tlačítko ve Figmě

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

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.


Jak někoho zablokovat a odblokovat v Microsoft Teams a jaké jsou alternativy

Jak někoho zablokovat a odblokovat v Microsoft Teams a jaké jsou alternativy

Microsoft Teams je klíčovou platformou pro videokonference. Naučte se, jak <strong>zablokovat</strong> a <strong>odblokovat</strong> uživatele, aby byl váš chat čistý.

Jak odinstalovat aplikaci nebo program ve Windows 10

Jak odinstalovat aplikaci nebo program ve Windows 10

Všechny informace o tom, jak snadno a rychle odinstalovat aplikace nebo programy ve Windows 10. Uvolněte místo na vašem PC.

Jak povolit připojení ke vzdálené ploše k počítači se systémem Windows 10

Jak povolit připojení ke vzdálené ploše k počítači se systémem Windows 10

Když pracujete mimo svůj stůl, můžete získat přístup k počítači pomocí Připojení ke vzdálené ploše systému Windows. Naučte se, jak správně povolit připojení ke vzdálené ploše v systému Windows 10.

Profilový obrázek Microsoft Teams: Jak nastavit, změnit nebo smazat fotku

Profilový obrázek Microsoft Teams: Jak nastavit, změnit nebo smazat fotku

Naučte se, jak upravit profilový obrázek v Microsoft Teams a vylepšit svou online prezentaci. Získejte tipy na změnu a řešení problémů.

Jak zobrazit, kolik hodin jste hráli na Fortnite

Jak zobrazit, kolik hodin jste hráli na Fortnite

Zjistěte, jak zjistit, kolik hodin jste strávili hraním Fortnite. Návod krok za krokem a tipy na sledování herních statistik.

Jak opravit, že vaše organizace spravuje aktualizace na tomto počítači

Jak opravit, že vaše organizace spravuje aktualizace na tomto počítači

Objevilo se na obrazovce oznámení „Vaše organizace spravuje aktualizace na tomto počítači“? Zde je návod, jak se této zprávy zbavit se špičkovými řešeními.

Jak získat Crown Emote ve Fortnite

Jak získat Crown Emote ve Fortnite

Zjistěte, jak získat Crown Emote ve Fortnite a posuňte své herní dovednosti na vyšší úroveň. Vytvořte si strategii a získejte respekty ostatních hráčů!

Nezobrazuje se lišta Toolbar v Dokumentech Google? Zde je návod, jak jej získat zpět

Nezobrazuje se lišta Toolbar v Dokumentech Google? Zde je návod, jak jej získat zpět

Pokud se lišta nástrojů nezobrazuje v Dokumentech Google, vraťte ji zpět jejím skrytím nebo získáním oprávnění k úpravám. Pokud selžou, použijte doporučený prohlížeč.

Jak ukončit schůzku ve službě Google Meet: Podrobný průvodce

Jak ukončit schůzku ve službě Google Meet: Podrobný průvodce

Zjistěte, jak efektivně ukončit schůzku Google Meet jako hostitel nebo účastník, a co dělat, když chcete pokračovat ve schůzce bez hostitele.

Jak snadno odstranit zprávy Slack

Jak snadno odstranit zprávy Slack

Nechte výčitky odesílatele pryč a zjistěte, jak odstranit zprávy Slack. Zde také najdete podrobný návod pro hromadné mazání zpráv Slack.