Technológia 360
  • Információs Technológia
    • Információtechnológiai Hírek
    • Utasítás
No Result
View All Result
  • Információs Technológia
    • Információtechnológiai Hírek
    • Utasítás
No Result
View All Result
Technológia 360
No Result
View All Result
Home Információs Technológia Utasítás

Hogyan készítsünk gombot a Figmában

by Farkas Domonkos
2023.08.18
Share on FacebookShare on Twitter

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 készítsünk 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.
  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 kitölti a színt
    automatikusan. 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 az <⌥ Option> vagy az gombot, majd kattintson a kitöltési területre az ellentétes oldalak kitöltési értékének megadásához
  • Tartsa lenyomva az <⌥ Option> vagy az gombot, miközben húzza a fogantyúkat az ellentétes oldalak kitöltésének módosításához

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.

Farkas Domonkos

Farkas Domonkos

Recommended.

ÓVAKODIK!  Ezeket az Android-alkalmazásokat SharkBot rosszindulatú program fertőzte meg

ÓVAKODIK! Ezeket az Android-alkalmazásokat SharkBot rosszindulatú program fertőzte meg

2022.09.05
Hogyan kell készpénzzel fizetni a Grubhubon

Hogyan kell készpénzzel fizetni a Grubhubon

2022.08.09

Trending.

No Content Available

Technológia 360

Naprakész, pontos hírek és oktatás a technológiáról és a tudományról.

Categories

  • Információtechnológiai Hírek
  • Utasítás

Tags

AirPods Pro Android Apple azonosító Apple Intelligence Apple Maps Apple Music Apple Pay Facebook FaceTime Fotók alkalmazás Google térkép iCloud iMessage Instagram iOS 16 iOS 17 iOS 18 iOS 26 iPadOS 16 iPadOS 17 iPadOS 18 iPhone iPhone 14 Pro Max iPhone 16 iPhone 16 Pro iPhone alkalmazások iPhone háttérkép Közösségi média macOS Sequoia macOS Sonoma macOS Ventura Megjegyzések Siri Snapchat Szafari Sápadt Twitter Vision Pro Vélemények watchOS 9 watchOS 10 watchOS 11 WhatsApp Youtube üzenetek

Recent News

Ideje fizetni: A Samsung az életmentő funkciók zárására egy fizetőfal mögött

Ideje fizetni: A Samsung az életmentő funkciók zárására egy fizetőfal mögött

2025.06.20
A Nintendo egy potenciális tűzveszélyt vizsgál, amely befolyásolja a 2 kapcsolót

A Nintendo egy potenciális tűzveszélyt vizsgál, amely befolyásolja a 2 kapcsolót

2025.06.20
No Result
View All Result
  • Információs Technológia
    • Információtechnológiai Hírek
    • Utasítás