Hogyan hozzunk létre egy gombot a Figmában

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.

Hogyan hozzunk létre egy gombot a Figmában

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.
    Hogyan hozzunk létre egy gombot a Figmában
  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.
    Hogyan hozzunk létre egy gombot a Figmában
  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.
    Hogyan hozzunk létre egy gombot a Figmában
  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.
    Hogyan hozzunk létre egy gombot a Figmában
  5. Helyezze ezt a szövegdobozt a téglalap közepére.
    Hogyan hozzunk létre egy gombot a Figmában
  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.
    Hogyan hozzunk létre egy gombot a Figmában
  3. Színezze a szöveget fehérre vagy feketére, a jobb kontraszttól függően.
    Hogyan hozzunk létre egy gombot a Figmában

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).
    Hogyan hozzunk létre egy gombot a Figmában
  2. A téglalaphoz adjunk hozzá egy körvonalat. Itt választhatja ki a kívánt színt.
    Hogyan hozzunk létre egy gombot a Figmában
  3. Módosítsa a szöveg színét, hogy a szöveg színével megegyezzen.
    Hogyan hozzunk létre egy gombot a Figmában

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.
    Hogyan hozzunk létre egy gombot a Figmában
  2. Módosítsa a szöveg színét a kívántra.
    Hogyan hozzunk létre egy gombot a Figmában

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.
    Hogyan hozzunk létre egy gombot a Figmában
  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.
    Hogyan hozzunk létre egy gombot a Figmában
  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.
    Hogyan hozzunk létre egy gombot a Figmában

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.
    Hogyan hozzunk létre egy gombot a Figmában
  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.
    Hogyan hozzunk létre egy gombot a Figmában

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.
    Hogyan hozzunk létre egy gombot a Figmában
  2. Jelölje ki a szövegréteget, és állítsa a kitöltést #FFFFFF értékre.
    Hogyan hozzunk létre egy gombot a Figmában
  3. Válassza ki újra a keretet, majd a jobb oldalsáv beállításával állítsa be a sarok sugarát.
    Hogyan hozzunk létre egy gombot a Figmában

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

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.


A Steam Disk írási hiba egyszerű javítása Windows 10 rendszeren

A Steam Disk írási hiba egyszerű javítása Windows 10 rendszeren

Steam Disk Write Disk Error hibát észlel Windows 10 rendszeren a játék frissítése vagy letöltése közben? Íme néhány gyorsjavítás, amellyel megszabadulhat a hibaüzenettől.

Alkalmazások vagy programok eltávolítása Windows 10 rendszerben

Alkalmazások vagy programok eltávolítása Windows 10 rendszerben

Fedezze fel, hogyan távolíthat el alkalmazásokat a Windows 10 rendszerből a Windows Store segítségével. Gyors és egyszerű módszerek a nem kívánt programok eltávolítására.

A Microsoft Edge böngészési előzményeinek megtekintése vagy törlése

A Microsoft Edge böngészési előzményeinek megtekintése vagy törlése

Fedezze fel, hogyan tekintheti meg vagy törölheti a Microsoft Edge böngészési előzményeit Windows 10 alatt. Hasznos tippek és lépésről-lépésre útmutató!

Google Meet korlát: A résztvevők maximális száma, a hívások időtartama és egyebek

Google Meet korlát: A résztvevők maximális száma, a hívások időtartama és egyebek

A Google zökkenőmentessé tette a csoportos megbeszélések lebonyolítását. Tudd meg a Google Meet korlátait és lehetőségeit!

Hogyan állítsuk vissza a Gmail jelszavát

Hogyan állítsuk vissza a Gmail jelszavát

Soha nincs rossz idő a Gmail jelszavának megváltoztatására. Biztonsági okokból mindig jó rutinszerűen megváltoztatni jelszavát. Ráadásul soha

Hogyan lehet törölni a böngésző előzményeit

Hogyan lehet törölni a böngésző előzményeit

Az online adatvédelem és biztonság megőrzésének egyik alapvető része a böngészési előzmények törlése. Fedezze fel a módszereket böngészőnként.

A zoom némítása: Minden, amit tudnod kell

A zoom némítása: Minden, amit tudnod kell

Ismerje meg, hogyan lehet némítani a Zoom-on, mikor és miért érdemes ezt megtenni, hogy elkerülje a zavaró háttérzajokat.

A parancssori parancsok teljes listája

A parancssori parancsok teljes listája

Használja ki a Command Prompt teljes potenciálját ezzel a több mint 280 (CMD) Windows-parancsot tartalmazó átfogó listával.

Feltételes formázás egy másik cella alapján [Google Táblázatok]

Feltételes formázás egy másik cella alapján [Google Táblázatok]

Alkalmazhatja a Google Táblázatok feltételes formázását egy másik cella alapján, a Feltételes formázási segédprogrammal, a jelen cikkben ismertetettek szerint.

A Rendszer-visszaállítás használata Windows 11 rendszeren

A Rendszer-visszaállítás használata Windows 11 rendszeren

Kíváncsi vagy, hogyan használhatod a Rendszer-visszaállítás funkciót a Windows 11 rendszeren? Tudd meg, hogyan segíthet ez a hasznos eszköz a problémák megoldásában és a számítógép teljesítményének helyreállításában.