Ako vytvoriť tlačidlo vo Figme

Ako vytvoriť tlačidlo vo Figme

Dizajnové tlačidlá na Figme môžu byť vytvorené rôznymi spôsobmi s využitím vlastností komponentov a automatického rozloženia na platforme. Tlačidlá ako také je možné prispôsobiť pomocou štítkov, veľkostí a ikon. Ak si nie ste istí, ako vytvoriť tlačidlá na Figme, ste na správnom mieste.

Ako vytvoriť tlačidlo vo Figme

Tento článok vysvetlí, ako vytvoriť tlačidlá a ako z Figmy vyťažiť maximum.

Vytvorenie tlačidla

Tlačidlá sú bežné prvky používané pri navrhovaní funkčného používateľského rozhrania. Môžete vytvoriť tlačidlo v dizajne Figma. Ak ste vo Figme noví, musíte najprv pochopiť základy.

Tu je podrobný návod na vytváranie tlačidiel:

  1. Vytvorte nový dizajn Figma.
    Ako vytvoriť tlačidlo vo Figme
  2. Pridajte rámček stlačením klávesu F na klávesnici a potom vyberte „desktop“ alebo „telefón“.
    Ako vytvoriť tlačidlo vo Figme
  3. Pomocou klávesu R na klávesnici pridajte obdĺžnik s rozmermi 50 pixelov na výšku a 200 pixelov na šírku.
    Ako vytvoriť tlačidlo vo Figme
  4. Pridajte text stlačením „T“ na klávesnici. Vycentrujte text tak, aby bol v strede textového poľa horizontálne a vertikálne.
    Ako vytvoriť tlačidlo vo Figme
  5. Umiestnite toto textové pole do stredu svojho obdĺžnika.
    Ako vytvoriť tlačidlo vo Figme
  6. Zoskupte komponenty tak, ako ich chcete mať.

Farby môžete pridať vytvorením niektorých pomocou nástroja na výber farieb alebo môžete získať prístup k hexadecimálnym farbám z internetu.

Kontrast

Farba textu v tlačidle závisí od toho, či lepšie kontrastuje s čiernym alebo bielym pozadím. Môžete použiť obe možnosti a zistiť, ktorá z nich funguje najlepšie. Ak sa vám nepáči žiadna z možností, môžete upraviť štýl a farbu tlačidla.

Vytváranie základných tlačidiel

Na Figme sa dajú vytvoriť tri základné tlačidlá.

Primárne tlačidlo

Primárne tlačidlá sú plné farby s čiernym alebo bielym textom. Toto tlačidlo pritiahne používateľov pri používaní aplikácie. Takto si ho môžete vytvoriť:

  1. Vyberte si farbu tlačidla.
  2. Vyberte obdĺžnik a potom použite vybratú farbu.
    Ako vytvoriť tlačidlo vo Figme
  3. Farebný text v bielej alebo čiernej, v závislosti od lepšieho kontrastu.
    Ako vytvoriť tlačidlo vo Figme

Sekundárne tlačidlo

Zvyčajne ide o biele tlačidlo, ktoré je však ohraničené farbou, ktorú si vyberiete. Text tlačidla môže mať rovnakú farbu. Toto je druhé najdôležitejšie tlačidlo, ktoré môžete vytvoriť. Mal by tiež pritiahnuť oči používateľa.

  1. Zmeňte farbu svojho obdĺžnika na bielu (#FFFFFF).
    Ako vytvoriť tlačidlo vo Figme
  2. V obdĺžniku pridajte ťah. Tu si môžete vybrať farbu, ktorú preferujete.
    Ako vytvoriť tlačidlo vo Figme
  3. Zmeňte farbu textu tak, aby mala rovnakú farbu ako text.
    Ako vytvoriť tlačidlo vo Figme

Terciárne tlačidlo

Terciárne tlačidlá nie sú také dôležité ako prvé dve. Môžu fungovať ako tlačidlá na prepojenie, zrušenie odberu alebo späť. Často sú vo forme obyčajného textu av niektorých prípadoch môžu byť podčiarknuté.

  1. Urobte svoj obdĺžnik biely bez ťahu.
    Ako vytvoriť tlačidlo vo Figme
  2. Zmeňte farbu textu na požadovanú.
    Ako vytvoriť tlačidlo vo Figme

Môžete vytvoriť terciárne tlačidlo, ktoré sa podobá primárnemu alebo sekundárnemu tlačidlu. Môžete tiež zmeniť šírku ťahu, aby ste získali lepšiu viditeľnosť.

Vytvorte tlačidlo pomocou textu, automatického rozloženia a farby

S nástrojmi na platforme môžete získať praktické skúsenosti s automatickým rozložením a textovým nástrojom. Vďaka postupnému navádzaniu by malo byť vytvorenie tlačidla relatívne jednoduché. Ak chcete vytvoriť tlačidlo, musíte vytvoriť textovú vrstvu, previesť textovú vrstvu na rám automatického rozloženia a upraviť štýl tlačidla.

Vytvorenie textovej vrstvy

V tomto kroku sa používa textový nástroj.

  1. Klepnutím na textový nástroj na paneli s nástrojmi alebo stlačením písmena „T“.
    Ako vytvoriť tlačidlo vo Figme
  2. Keď je aktívny nástroj Text, klepnite na svoje plátno a zadajte slovo „Button“. Všimnite si, že názov textovej vrstvy sa bude zhodovať s tým, čo je napísané na plátne, pokiaľ nie je manuálne zmenené na paneli vrstiev.
    Ako vytvoriť tlačidlo vo Figme
  3. Ak je potrebné zmeniť názov vrstvy, dvakrát kliknite na ľavý bočný panel a potom zadajte nový názov, ktorý ste si vybrali.
    Ako vytvoriť tlačidlo vo Figme

Teraz si môžete pohrať aj s veľkosťou písma jeho zväčšením alebo zmenšením.

  1. Vyberte svoju textovú vrstvu.
    Ako vytvoriť tlačidlo vo Figme
  2. Prejdite na pravý bočný panel a zmeňte veľkosť písma v časti Text. Môžete tiež zmeniť písmo alebo sa držať predvolenej možnosti.
    Ako vytvoriť tlačidlo vo Figme

Premeňte svoju textovú vrstvu na rámy automatického rozloženia

V tomto momente je potrebné tlačidlo ešte doladiť, aby vyzeralo očarujúco. S automatickým rozložením môžete veci trochu viac okoreniť. Automatické rozloženie je výkonná funkcia na Figme a možno ju použiť pre responzívne návrhy. Tieto návrhy sa automaticky prispôsobujú zmenám, ako je veľkosť obsahu, umiestnenie objektu a typ zariadenia.

Automatické rozloženie možno použiť na premenu vrstiev na snímky alebo na existujúce snímky. Ak chcete použiť rozloženie na existujúci rám, vyberte svoju textovú vrstvu a potom stlačte skratku „Shift“ „A“. Po použití rozloženia si všimnete nejaké zmeny.

  • Textová vrstva bude v rámci. Automatické rozloženie sa aplikuje iba na komponenty a rámy, takže Figma umiestni textovú vrstvu do nového rámca automaticky. Rám nemá farbu výplne. Toto sa aplikuje v kroku úpravy tlačidiel.
  • Pri výbere rámčeka sa na pravom bočnom paneli zobrazia nastavenia automatického rozloženia. Automatické rozloženie je možné ďalej vylepšiť.
  • Všimnete si, že so zmenami textu sa rám zmenšuje a rastie. S takýmito dynamickými prvkami ušetríte čas potrebný na navrhovanie obsahu prezeraného na rôznych zariadeniach alebo prekladaného do iných jazykov.

Úprava štýlu tlačidla

Môžete začať pridaním farby.

  1. Vyberte vrstvu rámu a potom v pravom bočnom paneli vyberte položku „Nastavenia výplne“. Tým sa farba
    automaticky vyplní. Výber farby zmení farbu.
    Ako vytvoriť tlačidlo vo Figme
  2. Vyberte textovú vrstvu a upravte výplň na #FFFFFF.
    Ako vytvoriť tlačidlo vo Figme
  3. Znova vyberte rám a potom pomocou nastavenia pravého bočného panela upravte polomer rohu.
    Ako vytvoriť tlačidlo vo Figme

Ďalšou vecou je opraviť výplň rámu. Po konverzii textu písmen na rozloženie automatického rámčeka sa medzi text a ohraničenie rámčeka automaticky pridá výplň. Výplň sa v tomto bode javí ako rovnaká na všetkých stranách. Spodnú a hornú výplň môžete zmeniť tak, aby bola menšia ako pravá a ľavá výplň.

Výplň môžete aktualizovať, ako chcete. Ľavé a pravé čalúnenie alebo horné a spodné čalúnenie je možné zmeniť súčasne pomocou nižšie uvedených skratiek:

  • Podržte <⌥ option=""> alebo a potom kliknite na oblasť výplne a zadajte hodnotu výplne pre opačné strany
  • Podržte <⌥ option=""> alebo počas ťahania rukovätí, aby ste zmenili výplň pre opačné strany

V tomto bode tlačidlo vyzerá dobre, no štítok môžete stále aktualizovať. Ak chcete povoliť úpravy, musíte na text dvakrát kliknúť. Zadajte slová „Zaregistrovať sa“. Veľkosť tlačidla sa mení počas písania. Takto môžete navrhnúť tlačidlo pomocou nástroja na automatické rozloženie a text. Teraz môžete vyskúšať niečo nové, napríklad zmeniť tlačidlo na komponent alebo pridať variant.

Vytvorenie klikateľného tlačidla

Figmu používajú spoločnosti ako Uber, Facebook, Google a Netflix. Funkcia klikateľného tlačidla uľahčuje dizajnérom v takýchto spoločnostiach vytvárať interaktívne a klikateľné tlačidlá. Tlačidlá značne uľahčujú navigáciu na takýchto platformách.

Tu je postup, ako vytvoriť takéto tlačidlá vo Figme:

  1. V ponuke (vpravo) vyberte možnosť „Prototyp“.
    Ako vytvoriť tlačidlo vo Figme
  2. Kliknite na ikonu „Plus“ (+), ktorá sa nachádza pod kartou Prototyp. To vám umožní pridať interakciu.
    Ako vytvoriť tlačidlo vo Figme
  3. V okne s podrobnosťami o interakcii vyberte možnosť „Po kliknutí“.
    Ako vytvoriť tlačidlo vo Figme
  4. Vyberte možnosť „Otvoriť odkaz“.
    Ako vytvoriť tlačidlo vo Figme
  5. Pridajte odkaz na stránku, kam bude tlačidlo smerovať po kliknutí.
    Ako vytvoriť tlačidlo vo Figme
  6. Klepnutím na ikonu „X“ opustíte okno s podrobnosťami o interakcii.
    Ako vytvoriť tlačidlo vo Figme
  7. Prejdite na tlačidlo možnosti „Prehrať“ v pravom hornom rohu.
    Ako vytvoriť tlačidlo vo Figme
  8. Klepnutím na tlačidlo „Prehrať“ získate ukážku dizajnu.
    Ako vytvoriť tlačidlo vo Figme

Ak umiestnite kurzor na tlačidlo, zmení sa na ikonu podobnú ruke. To znamená, že na tlačidlo sa teraz dá kliknúť.

Poznámka: Pri vytváraní klikateľného tlačidla Figma vždy použite „Pri kliknutí“, nie „Pri ťahaní“. „Po kliknutí“ umožňuje pridať k tlačidlu odkaz, na ktorý možno kliknúť. Na tlačidlá „On drag“ nie je možné kliknúť.

Dizajn lepšie s tlačidlami Figma

Tlačidlá Figma majú premenné ako téma, stav, vnútorné čalúnenie, dĺžka, šírka a výška tabuľky. Naučením sa, ako vytvárať tlačidlá na platforme, môžete z Figmy vyťažiť maximum a pridať komponenty využívajúce hodnotu v rámci knižnice Figma.

Skúšali ste vytvárať tlačidlá na Figme? Ak áno, aká bola vaša skúsenosť? Dajte nám vedieť v sekcii komentárov nižšie.


Ako sa zbaviť choroby v DAYZ

Ako sa zbaviť choroby v DAYZ

DAYZ je hra plná šialených, nakazených ľudí v postsovietskej krajine Černarus. Zistite, ako sa zbaviť choroby v DAYZ a udržte si zdravie.

Návod na Windows 10: Synchronizácia nastavení počítača vo všetkých zariadeniach so systémom Windows 10

Návod na Windows 10: Synchronizácia nastavení počítača vo všetkých zariadeniach so systémom Windows 10

Naučte sa, ako synchronizovať nastavenia v systéme Windows 10. S touto príručkou prenesiete vaše nastavenia na všetkých zariadeniach so systémom Windows.

Ako zakázať funkciu otravných štuchnutí od Googlu

Ako zakázať funkciu otravných štuchnutí od Googlu

Ak vás obťažujú štuchnutia e-mailov, na ktoré nechcete odpovedať alebo ich vidieť, môžete ich nechať zmiznúť. Prečítajte si toto a zistite, ako zakázať funkciu štuchnutia v Gmaile.

Ako opraviť nefunkčnosť diaľkového ovládača Nvidia Shield?

Ako opraviť nefunkčnosť diaľkového ovládača Nvidia Shield?

Nvidia Shield Remote nefunguje správne? Tu máme pre vás tie najlepšie opravy, ktoré môžete vyskúšať; môžete tiež hľadať spôsoby, ako zmeniť svoj smartfón na televízor.

Ako vyriešiť problémy s Bluetooth v systéme Windows 10

Ako vyriešiť problémy s Bluetooth v systéme Windows 10

Bluetooth vám umožňuje pripojiť zariadenia a príslušenstvo so systémom Windows 10 k počítaču bez potreby káblov. Spôsob, ako vyriešiť problémy s Bluetooth.

Ako opraviť Windows 11 pomocou 6 metód

Ako opraviť Windows 11 pomocou 6 metód

Máte po inovácii na Windows 11 nejaké problémy? Hľadáte spôsoby, ako opraviť Windows 11? V tomto príspevku sme uviedli 6 rôznych metód, ktoré môžete použiť na opravu systému Windows 11 na optimalizáciu výkonu vášho zariadenia.

Oprava: Chyba „Táto aplikácia sa nedá spustiť na vašom počítači“.

Oprava: Chyba „Táto aplikácia sa nedá spustiť na vašom počítači“.

Ako opraviť: chybové hlásenie „Táto aplikácia sa nedá spustiť na vašom počítači“ v systéme Windows 10? Tu je 6 jednoduchých riešení.

Ako získať čo najviac bodov z Microsoft Rewards a ľahko zarobiť peniaze

Ako získať čo najviac bodov z Microsoft Rewards a ľahko zarobiť peniaze

Tento článok vám ukáže, ako maximalizovať svoje výhody z Microsoft Rewards na Windows, Xbox, Mobile a iných platforiem.

Ako hromadne zrušiť sledovanie na Instagrame

Ako hromadne zrušiť sledovanie na Instagrame

Zistite, ako môžete jednoducho hromadne prestať sledovať účty na Instagrame pomocou najlepších aplikácií, ako aj tipy na správne používanie.

Ako opraviť Nintendo Switch sa nezapne

Ako opraviť Nintendo Switch sa nezapne

Ako opraviť Nintendo Switch, ktoré sa nezapne? Tu sú 4 jednoduché riešenia, aby ste sa zbavili tohto problému.