Hogyan hozzunk létre egy gombot a Figmában

A Figma tervezőgombjai különböző módon hozhatók létre a platformon lévő komponensek és automatikus elrendezés tulajdonságainak felhasználásával. Ennek megfelelően a gombok testreszabhatók címkék, méretek és ikonok segítségével. Ha nem tudja, hogyan hozhat létre gombokat a Figmán, akkor jó helyen jár.

Ez a cikk elmagyarázza, hogyan hozhat létre gombokat, és hogyan hozhatja ki a legtöbbet a Figmából.

Gomb létrehozása

A gombok gyakori elemek, amelyeket funkcionális felhasználói felület tervezésekor használnak. Létrehozhat egy gombot Figma-tervben. Ha még nem ismeri a Figmát, először meg kell értenie az alapokat.

Íme egy lépésenkénti útmutató a gombok létrehozásához:

1. Hozzon létre egy új Figma-tervet.
   
2. Adjon hozzá egy keretet a billentyűzet F billentyűjének megnyomásával, majd válassza az „asztali” vagy a „telefon” lehetőséget.
   
3. Adjon hozzá egy 50 képpont magasságú és 200 képpont szélességű téglalapot a billentyűzet R billentyűjével.
   
4. Szöveg hozzáadásához nyomja meg a „T” gombot a billentyűzeten. Középre állítsa a szöveget úgy, hogy vízszintesen és függőlegesen a szövegdoboz közepén legyen.
   
5. Helyezze ezt a szövegdobozt a téglalap közepére.
   
6. Csoportosítsa az összetevőket úgy, ahogyan szeretné.

Hozzáadhat színeket a színválasztó segítségével, vagy elérheti a hexadecimális színeket az internetről.

Kontraszt

A gombon belüli szöveg színe attól függ, hogy jobban kontrasztot mutat-e a fekete vagy a fehér háttérrel. Mindkét lehetőséget használhatja, hogy megtudja, melyik működik a legjobban. Ha valamelyik opció nem tetszik, módosíthatja a gomb stílusát és színét.

Alap gombok létrehozása

A Figmán három alapvető gomb hozható létre.

Elsődleges gomb

Az elsődleges gombok egyszínűek, fekete vagy fehér szöveggel. Ez a gomb megrajzolja a felhasználókat, amikor egy alkalmazást használnak. Így hozhat létre egyet:

1. Válassza ki a gomb színét.
2. Válassza ki a téglalapot, majd alkalmazza a kiválasztott színt.
   
3. Színezze a szöveget fehérre vagy feketére, a jobb kontraszttól függően.
   

Másodlagos gomb

Ez általában egy fehér gomb, de körvonalazódik a választott színnel. A gomb szövege is lehet azonos színű. Ez a második legfontosabb gomb, amelyet létrehozhat. Vonnia kell a felhasználó szemét is.

1. Módosítsa a téglalap színét fehérre (#FFFFFF).
   
2. A téglalaphoz adjunk hozzá egy körvonalat. Itt választhatja ki a kívánt színt.
   
3. Módosítsa a szöveg színét, hogy a szöveg színével megegyezzen.
   

Harmadlagos gomb

A harmadlagos gombok nem olyan fontosak, mint az első kettő. Működhetnek link, leiratkozás vagy vissza gombként. Gyakran egyszerű szövegben vannak, és bizonyos esetekben aláhúzhatók.

1. Tedd fehérre a téglalapot vonás nélkül.
   
2. Módosítsa a szöveg színét a kívántra.
   

Létrehozhat egy harmadlagos gombot, amely hasonlít egy elsődleges vagy másodlagos gombra. A jobb láthatóság érdekében a löketszélességet is módosíthatja.

Hozzon létre egy gombot szöveg, automatikus elrendezés és szín használatával

A platformon található eszközökkel gyakorlati tapasztalatokat szerezhet az Automatikus elrendezés és a Szöveg eszköz használatával. A lépésről lépésre történő útmutatás segítségével a gomb létrehozásának viszonylag egyszerűnek kell lennie. Gomb létrehozásához létre kell hoznia a szövegréteget, át kell alakítania a szövegréteget automatikus elrendezési keretté, és stílust kell készítenie a gombhoz.

Szövegréteg létrehozása

Ebben a lépésben a szöveges eszközt használjuk.

1. Koppintson a szöveg eszközre az eszköztáron, vagy nyomja meg a „T” betűt.
   
2. Amikor a Szöveg eszköz aktív, koppintson a vászonra, és írja be a „Button” szót. Vegye figyelembe, hogy a szövegréteg neve megegyezik a vásznon beírt szöveggel, kivéve, ha manuálisan módosítja a rétegek panelen.
   
3. Ha a réteg nevét módosítani kell, kattintson duplán a bal oldalsávra, majd írja be a kiválasztott új nevet.
   

Mostantól a betűmérettel is játszhat a méret növelésével vagy csökkentésével.

1. Válassza ki a szövegréteget.
   
2. Navigáljon a jobb oldalsávra, és módosítsa a betűméretet a „Szöveg” részben. Megváltoztathatja a betűtípust is, vagy ragaszkodhat az alapértelmezett beállításhoz.
   

Alakítsa át szövegrétegét automatikus elrendezésű keretekké

Ezen a ponton a gombot tovább kell finomítani, hogy elbűvölő legyen. Az automatikus elrendezéssel még egy kicsit megfűszerezheti a dolgokat. Az automatikus elrendezés a Figma egyik hatékony funkciója, amely alkalmazkodik a reszponzív tervekhez. Ezek a tervek automatikusan alkalmazkodnak az olyan változásokhoz, mint a tartalom mérete, az objektumok elhelyezése és az eszköztípus.

Az automatikus elrendezés alkalmazható a rétegek keretekké alakítására vagy meglévő keretekre. Az elrendezés meglévő keretre való alkalmazásához válassza ki a szövegréteget, majd nyomja meg a „Shift” „A” billentyűparancsot. Az elrendezés alkalmazása után néhány változást észlel.

• A szövegréteg egy kereten belül lesz. Az automatikus elrendezés csak az összetevőkre és a keretekre vonatkozik, így a Figma automatikusan az új keretbe helyezi a szövegréteget. A keretnek nincs kitöltési színe. Ezt alkalmazza a gombstílus lépésben.
• A keret kiválasztásakor az automatikus elrendezés beállításai a jobb oldalsávon jelennek meg. Az automatikus elrendezések tovább módosíthatók.
• Észreveszi, hogy a keret zsugorodik és növekszik a szöveg változásával. Az ilyen dinamikus elemekkel időt takarít meg a különféle eszközökön megtekintett vagy más nyelvekre lefordított tartalom megtervezéséhez.

A gomb stílusának kialakítása

Kezdheti szín hozzáadásával.

1. Válasszon egy keretréteget, majd válassza a „Kitöltés beállításai” lehetőséget a jobb oldalsávon. Ez automatikusan kitölti a színt
   . A színválasztó megváltoztatja a színt.
   
2. Jelölje ki a szövegréteget, és állítsa a kitöltést #FFFFFF értékre.
   
3. Válassza ki újra a keretet, majd a jobb oldalsáv beállításával állítsa be a sarok sugarát.
   

A következő dolog a keret párnázatának rögzítése. A betűszöveg automatikus keretelrendezéssé konvertálása után a szöveg és a kerethatár közé automatikusan kitöltés kerül hozzáadásra. A párnázás ezen a ponton minden oldalon egyenlőnek tűnik. Módosíthatja az alsó és felső párnázást kisebbre, mint a jobb és bal oldali kitöltés.

A kitöltés tetszés szerint frissíthető. A bal és jobb oldali, illetve a felső és alsó párnázás egyszerre módosítható az alábbi billentyűparancsokkal:

• Tartsa lenyomva a <⌥ option=""> vagy gombot, majd kattintson a kitöltési területre az ellentétes oldalak kitöltési értékének megadásához
• Tartsa lenyomva a <⌥ option=""> gombot, vagy miközben húzza a fogantyúkat, hogy módosítsa az ellentétes oldalak kitöltését

Ezen a ponton a gomb jól néz ki, de még mindig frissítheti a címkét. A szerkesztés engedélyezéséhez kattintson duplán a szövegre. Írja be a „Regisztráció” szavakat. A gomb mérete gépelés közben változik. Így tervezhet meg egy gombot az automatikus elrendezés és szöveg eszközzel. Most kipróbálhat valami újat, például a gombot alkatrészré alakíthatja vagy hozzáadhat egy változatot.

Kattintható gomb készítése

A Figmát olyan cégek használják, mint az Uber, a Facebook, a Google és a Netflix. A kattintható gomb funkció megkönnyíti az ilyen cégek tervezői számára az interaktív és kattintható gombok létrehozását. A gombok jelentősen megkönnyítik a navigációt az ilyen platformokon.

A következőképpen fejleszthet ilyen gombokat a Figmában:

1. Válassza a „Prototípus” opciót a menüben (jobbra).
   
2. Kattintson a Prototype fül alatt található „Plus” (+) ikonra. Ez lehetővé teszi interakció hozzáadását.
   
3. Válassza a „Kattintásra” lehetőséget az interakció részleteit tartalmazó ablakban.
   
4. Válassza a „Link megnyitása” opciót.
   
5. Adja hozzá az oldal hivatkozását, ahová a gomb kattintás után irányít.
   
6. Érintse meg az „X” ikont az Interakció részletei ablakból való kilépéshez.
   
7. Keresse meg a „Play” opció gombot a jobb felső sarokban.
   
8. Érintse meg a „Lejátszás” gombot a terv előnézetének megtekintéséhez.
   

Ha a kurzort a gomb fölé viszi, az egy kézszerű ikonra változik. Ez azt jelzi, hogy a gomb már kattintható.

Megjegyzés: A kattintható Figma gomb létrehozásakor mindig a „Kattintáskor”, ne az „On drag”-t használja. A „kattintáskor” lehetővé teszi egy kattintható hivatkozás hozzáadását a gombhoz. Az „On drag” gombokra nem lehet kattintani.

Tervezz jobban Figma Gombokkal

A Figma gombok olyan változókkal rendelkeznek, mint a téma, állapot, belső kitöltés, táblázat hossza, szélessége és magassága. Ha megtanulja, hogyan hozhat létre gombokat a platformon, akkor a legtöbbet hozhatja ki a Figmából, és hozzáadhat értéket használó összetevőket a Figma könyvtárban.

Próbáltál már gombokat létrehozni a Figmán? Ha igen, milyenek voltak a tapasztalataid? Tudassa velünk az alábbi megjegyzések részben.