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:
- Hozzon létre egy új Figma-tervet.
- 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.
- Adjon hozzá egy 50 képpont magasságú és 200 képpont szélességű téglalapot a billentyűzet R billentyűjével.
- 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.
- Helyezze ezt a szövegdobozt a téglalap közepére.
- 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:
- Válassza ki a gomb színét.
- Válassza ki a téglalapot, majd alkalmazza a kiválasztott színt.
- 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.
- Módosítsa a téglalap színét fehérre (#FFFFFF).
- A téglalaphoz adjunk hozzá egy körvonalat. Itt választhatja ki a kívánt színt.
- 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.
- Tedd fehérre a téglalapot vonás nélkül.
- 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.
- Koppintson a szöveg eszközre az eszköztáron, vagy nyomja meg a „T” betűt.
- 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.
- 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.
- Válassza ki a szövegréteget.
- 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.
- 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.
- Jelölje ki a szövegréteget, és állítsa a kitöltést #FFFFFF értékre.
- 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:
- Válassza a „Prototípus” opciót a menüben (jobbra).
- Kattintson a Prototype fül alatt található „Plus” (+) ikonra. Ez lehetővé teszi interakció hozzáadását.
- Válassza a „Kattintásra” lehetőséget az interakció részleteit tartalmazó ablakban.
- Válassza a „Link megnyitása” opciót.
- Adja hozzá az oldal hivatkozását, ahová a gomb kattintás után irányít.
- Érintse meg az „X” ikont az Interakció részletei ablakból való kilépéshez.
- Keresse meg a „Play” opció gombot a jobb felső sarokban.
- É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.
