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.

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.
   
2. Pridajte rámček stlačením klávesu F na klávesnici a potom vyberte „desktop“ alebo „telefón“.
   
3. Pomocou klávesu R na klávesnici pridajte obdĺžnik s rozmermi 50 pixelov na výšku a 200 pixelov na šírku.
   
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.
   
5. Umiestnite toto textové pole do stredu svojho obdĺžnika.
   
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.
   
3. Farebný text v bielej alebo čiernej, v závislosti od lepšieho kontrastu.
   

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).
   
2. V obdĺžniku pridajte ťah. Tu si môžete vybrať farbu, ktorú preferujete.
   
3. Zmeňte farbu textu tak, aby mala rovnakú farbu ako text.
   

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.
   
2. Zmeňte farbu textu na požadovanú.
   

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

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

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.
   
2. Vyberte textovú vrstvu a upravte výplň na #FFFFFF.
   
3. Znova vyberte rám a potom pomocou nastavenia pravého bočného panela upravte polomer rohu.
   

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

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.