Hogyan hozzunk létre gradienst a Figmában

Ha nem tud dönteni egy szín mellett, a színátmenetek kiváló választást jelentenek. A Figmában különféle színátmenetes háttereket készíthet, színátmenetet helyezhet el egy alakzatra és szövegre, körvonal-átmeneteket hozhat létre, és még sok más. Akár hálós színátmeneteket is létrehozhat az elmosódás effektussal vagy a Figma közösségi háló gradiens beépülő moduljával.

Mivel a Figma nagyon sokféle módon hozhat létre gradienst, az új felhasználóknak nehézségekbe ütközhet, hogy a kezdetektől fogva megértsék őket. Természetesen a kísérletezés a tanulási folyamat része, de sokkal könnyebb, ha minden utasítást egy helyen tárolunk. És ez a cikk pontosan ezt tartalmazza.

Különböző színátmenetstílusok létrehozása a Figmában

A Figma különféle színátmeneti stílusokat kínál, amelyek segítségével több színnel töltheti ki a háttereket vagy objektumokat a vásznon.

• Lineáris:  A lineáris színátmeneteknek két színe van, amelyek egyenes vonalban keverednek egymással.
• Radiális:  A sugárirányú színátmeneteknél az első szín egyetlen pontból indul ki, és minden irányban beleolvad a másikba.
• Szög:  A szöges gradienseknél szögek hozzáadásával határozhatja meg a gradiens mozgási irányát. Kiváló lehetőség 3D képek készítésére.
• Gyémánt:  Ahogy a neve is sugallja, a gyémánt színátmenetek egy pontból indulnak ki, és gyémánt alakban terjednek.

A színátmeneti stílusok létrehozásának lépései ugyanazok. Az egyetlen különbség a kiválasztott stílusban van. A következőképpen hozhat létre színátmenetet a Figmában:

1. Nyisson meg egy üres Figma-fájlt.
   
2. Érintse meg a „Téglalap eszközt” a bal oldali eszköztáron.
   
3. Az eszköz segítségével rajzoljon egy téglalapot a vászonra, amelyet gradiens referenciaként használ.
   
4. Válassza ki a létrehozott téglalapot.
   
5. Kattintson az aktuális színre a „Kitöltés” ​​alatt a jobb oldali panelen a színválasztó megnyitásához.
   
6. Nyomja meg a legördülő menüt, és módosítsa az alapértelmezett „Szilárd”-t a kívánt színátmenetstílusra. Két színes stop vagy négyzet jelenik meg.
   
7. Válassza ki az egyes színmegállókat, és válassza ki a színátmenethez hozzáadni kívánt színt.
   
8. Érintse meg a „Kitöltés” ​​melletti négy pontot a színátmenet stílusként való mentéséhez.
   

Ezután beállíthatja az átlátszóság értékét, elhelyezheti a színmegállókat oda, ahol az egyik színt szeretné befejezni, és a másodikat kezdeni, hozzáadhat egy másik színütközőt, mozgathatja őket a vásznon, vagy módosíthatja a színátmenet szögét. Ha végzett a beállítással, mentse újra a színátmenetet (8. lépés).

Megjegyzés:  Egy hozzáadott színütköző törléséhez válassza ki a megállót, és nyomja meg a „Delete” vagy a „Backspace” gombot a billentyűzeten.

Mostantól bármilyen objektumra alkalmazhatja a színátmenet stílusát.

Hogyan hozzunk létre háló gradienst a Figmában

A hálós gradiensek népszerűek a nagy cégek és márkák körében. Ha gyakori Instagram-felhasználó, minden nap látja az alkalmazás logóját. Így ezek létrehozásának ismerete hasznos lehet olyan helyzetekben, amikor valamilyen érdeklődést kell hozzáadnia a projektekhez.

Mint említettük, a háló gradiensek létrehozhatók a Figma közösség által biztosított bővítménnyel . De van egy egyszerűbb módja annak, hogy több színt adjon hozzá bárhol, ahol csak akarja, külső eszközök nélkül.

A következőképpen hozhat létre háló gradienst a Figmában:

1. Írjon be egy új Figma-fájlt.
   
2. Hozzon létre egy keretet.
   
3. Jelölje be a „Tartalom kivágása” négyzetet a jobb oldali panelen, hogy a kereten kívülre kerülő elemek levágásra kerüljenek.
   
4. Kezdje el a különböző formák hozzáadását, vagy hozzon létre saját objektumot a kereten belüli „Pen” eszközzel.
   
5. Módosítsa az egyes új űrlapok „Kitöltés” ​​értékét, hogy eltérjen a többitől.
   
6. Válassza ki az összes formát.
   
7. Az „Effektusok” alatt nyomja meg a legördülő menüt, és válassza a „Réteg elmosása” lehetőséget.
   
8. Nyissa meg a „Réteg elmosása” beállításokat, és növelje az értéket, amíg már nem lát egyértelmű határokat az alakzatok között.
   
9. Mentse el a stílust a fentiek szerint, és használja más objektumokon.

A háló gradiens létrehozásának másik módja a szögstílus használata. Kicsit eltérő, de ugyanolyan érdekes, lenyűgöző eredményt ad, mint az első oktatóanyag.

A következőket kell tennie:

1. Nyisson meg egy üres vásznat.
   
2. Használja a kívánt formát, és adja hozzá a vászonhoz.
3. A „Kitöltés” ​​alatt módosítsa a „Szilárd” értéket „Szögletesre”.
   
4. Válassza ki a színátmenet színeit.
   
5. Állítsa be a színátmenet szögét és egyéb szempontjait.
   
6. Adjon hozzá egy másik alakzatot, lehetőleg „Eclipse”, azaz egy kört.
   
7. Rakd rá a másik alakzatra a vászonra.
   
8. Adjon hozzá egy lineáris színátmenetet, és változtassa meg a színt olyanra, amely jól illeszkedik a többihez.
   
9. Az „Effektek” alatt használja a „Réteg elmosódása” effektust, és homályosítsa el az új alakzat vonalait, hogy beleolvadjon az első alakzatba.
   

Kép színátmenete a Figmában

A színátmenet létrehozásán kívül egy meglévő képet is átfedhet színátmenettel, hogy dimenziót adjon hozzá. „Elfakul” hatást ad, vagy egy láthatatlan fényforrás illúzióját, amely kívülről világít a képre.

A következőképpen adhat hozzá színátmenetet egy képhez a Figmában:

1. Nyisson meg egy új fájlt a Figmában.
   
2. Húzza át azt a képet, amelyhez hozzá szeretné adni a színátmenetet a vásznon.
   
3. Adjon hozzá egy alakzatot, amely megfelel a tetején lévő kép méretének.
   
4. Válassza ki a színátmenet stílusát a „Kitöltés” ​​részben.
   
5. Válassza ki a színátmenet színeit a színválasztóból.
   
6. Állítsa be az átlátszóságot, a szöget stb.
   

Használhatja a „Toll” eszközt is, és rajzolhat egy alakzatot arra a területre, ahol a színátmenetet szeretné elérni.

Szöveg színátmenete a Figmában

A Figma programban a szövegen a színátmenet létrehozása nagyon hasonló ahhoz, ahogyan bármilyen más alakzathoz színátmenetet hoz létre. Íme a lépések:

1. Nyisson meg egy új vásznat a Figmában.
   
2. Nyomja meg a „Szöveg” eszközt a bal oldali eszköztáron.
   
3. Kattintson bárhová a vásznon, és kezdjen el írni.
4. Válassza ki a szöveget, és lépjen a „Kitöltés” ​​elemre.
   
5. Válassza ki a színátmenet stílusát.
   
6. Nyomja meg az egyes színmezőket, és keresse meg a színátmenethez hozzáadni kívánt színt.
   

GYIK

Hány színt adhatok hozzá egy színátmenethez a Figmában?

Tetszőleges számú színt adhat hozzá mind a normál, mind a hálós Figma gradiens stílusokhoz. De próbálj meg ne ess túlzásba. Mivel a színátmeneteknek több átmeneti színük van, ötnél több túl sok lehet, még hálós színátmenet esetén is.

Importálhatok gradienst a Figmába?

Bármilyen színátmenetet importálhat a Figmába. Például beilleszthet kódot a CSS-ből (Cascading Style Sheets) a „Kód” panel megnyitásával és a kód beillesztésével. A színátmeneteket az Adobe Illustratorból is importálhatja.

Hol találok ingyenes Figma gradienseket?

Ingyenes és fizetős Figma gradienseket találhat a  Figma közösségben . A Figma felhasználók által készített gyönyörű és egyedi dizájnok tömkelege található benne. Szűrhet bővítmények, fájlok és widgetek szerint. Csak írja be a „gradiens” szót a felső keresősávba, és keresse meg a kívántat.

Legyen funky színes színátmenetekkel

A színátmenetek kiváló módja annak, hogy a tervezést egyedivé és személyre szabottá tegyük. A Figma pedig lehetővé teszi a zökkenőmentes átmenetet bármely két vagy több választott szín között. Azonban ne vigyük túlzásba. Keverje össze a jól egymáshoz illő színeket, és próbáljon meg ugyanazon a színpalettán belül maradni.

Próbáltál már színátmenetet készíteni a Figmában? Mondja el nekünk az alábbi megjegyzésekben, hogy melyik színátmenet stílust és mire használta.