Как да създадете градиент във Figma

Когато не можете да изберете един цвят, градиентите са отличен вариант. Във Figma можете да правите различни градиентни фонове, да поставяте градиент върху фигура и текст, да създавате градиенти с щрихи и много повече. Можете дори да създавате мрежести градиенти с ефекта на размазване или с приставка за мрежови градиенти на Figma.

Тъй като Figma има толкова много различни начини за създаване на градиент, новите потребители може да се затруднят да ги схванат от самото начало. Разбира се, експериментирането е част от учебния процес, но е много по-лесно да имате всички инструкции на едно място. И тази статия предоставя точно това.

Как да създадете различни градиентни стилове във Figma

Figma предлага различни градиентни стилове, които можете да използвате, за да запълните фонове или обекти върху платното с множество цветове.

• Линеен:  Линейните градиенти имат два цвята, които се смесват в права линия.
• Радиален:  При радиалните градиенти първият цвят започва от една точка и се слива с другия във всички посоки.
• Ъглови:  При ъглови градиенти можете да определите посоката, в която се движи градиентът, като добавите ъгли. Това е отлична възможност за създаване на 3D изображения.
• Диамант:  Както подсказва името, диамантените градиенти започват от една точка и се разпространяват във формата на диамант.

Стъпките за създаване на който и да е от тези градиентни стилове са едни и същи. Единствената разлика е в избрания от вас стил. Ето как да създадете градиентен дизайн във Figma:

1. Отворете празен файл Figma.
   
2. Докоснете „Инструмент за правоъгълник“ от лявата лента с инструменти.
   
3. С помощта на инструмента начертайте правоъгълник върху платното, който да използвате като препратка към градиента.
   
4. Изберете създадения правоъгълник.
   
5. Кликнете върху текущия цвят под „Попълване“ в десния панел, за да отворите инструмента за избор на цвят.
   
6. Натиснете падащото меню и променете „Плътно“ по подразбиране на стила на градиента, който искате. Ще се появят две цветни точки или квадратчета.
   
7. Изберете всеки цвят и изберете цвета, който искате да добавите към градиента.
   
8. Докоснете четирите точки до „Попълване“, за да запазите градиента като стил.
   

След това можете да регулирате стойността на прозрачност, да позиционирате цветовите спирки там, където искате единият цвят да завършва и да започва вторият, да добавяте друга цветна спирка, да ги местите върху платното или да променяте ъгъла на градиента. Когато приключите с коригирането, запазете градиента отново (Стъпка 8).

Забележка:  За да изтриете цветна спирка, която сте добавили, изберете спирката и натиснете „Delete“ или „Backspace“ на клавиатурата.

Сега можете да приложите градиентния стил към всеки обект, който искате.

Как да създадете мрежест градиент във Figma

Мрежестите градиенти са популярни сред големите компании и марки. Ако сте чест потребител на Instagram, виждате го всеки ден логото на приложението. По този начин знанието как да ги създадете може да бъде полезно в ситуации, когато трябва да добавите интерес към вашите проекти.

Както споменахме, мрежестите градиенти могат да бъдат създадени с плъгин , предоставен от общността на Figma. Но има по-прост начин да добавите няколко цвята, където искате върху вашето платно, без да са необходими външни инструменти.

Ето как да създадете мрежест градиент във Figma:

1. Въведете нов Figma файл.
   
2. Създайте рамка.
   
3. Поставете отметка в квадратчето „Съдържание на клипа“ в десния панел, така че всичко, което излиза извън рамката, да бъде изрязано.
   
4. Започнете да добавяте различни форми или създайте свой собствен обект с инструмента "Pen" в рамката.
   
5. Променете „Попълване“ на всеки нов формуляр, така че да се различава от останалите.
   
6. Изберете всички фигури.
   
7. Под „Ефекти“ натиснете падащото меню и изберете „Размазване на слоя“.
   
8. Отворете настройките „Размазване на слоя“ и увеличете стойността, докато вече не виждате ясни граници между формите.
   
9. Запазете стила, както по-горе, и го използвайте върху други обекти.

Друг начин за създаване на мрежест градиент е чрез използване на ъглов стил. Той дава малко по-различен, но също толкова интересен завладяващ резултат като първия урок.

Ето какво трябва да направите:

1. Отворете празно платно.
   
2. Използвайте желаната форма и я добавете към платното.
3. Под „Запълване“ променете „Плътно“ на „Ъглово“.
   
4. Изберете цветовете за градиента.
   
5. Регулирайте ъгъла и други аспекти на градиента.
   
6. Добавете друга форма, за предпочитане „Затъмнение“, т.е. кръг.
   
7. Поставете го върху другата форма върху платното.
   
8. Добавете линеен градиент и променете цвета на този, който пасва добре на останалите.
   
9. Под „Ефекти“ използвайте ефекта „Размазване на слоя“ и размажете линиите на новата форма, за да я смесите с първата.
   

Как да градиентирате изображение във Figma

Освен създаването на градиент, можете също да наслагвате съществуващо изображение с градиент, за да добавите някакво измерение. Придава му ефект на „избледняване“ или илюзията за невидим източник на светлина, който осветява изображението отвън.

Ето как да добавите градиент към изображение във Figma:

1. Отворете нов файл във Figma.
   
2. Плъзнете и пуснете върху платното изображението, към което искате да добавите градиента.
   
3. Добавете форма, която съответства на размера на изображението отгоре.
   
4. Изберете градиентен стил под секцията „Запълване“.
   
5. Изберете цветовете на градиента от инструмента за избор на цвят.
   
6. Регулирайте непрозрачността, ъгъла и т.н.
   

Можете също да използвате инструмента "Pen" и да нарисувате фигура в областта, където искате да бъде градиентът.

Как да градиентирате текст във Figma

Създаването на градиент върху текст във Figma е доста подобно на това как създавате градиент за всяка друга форма. Ето стъпките:

1. Отворете ново платно във Figma.
   
2. Натиснете инструмента „Текст“ от лентата с инструменти вляво.
   
3. Кликнете където и да е върху платното и започнете да пишете.
4. Изберете текста и преминете към „Попълване“.
   
5. Изберете градиентния стил.
   
6. Натиснете всяко цветно поле и намерете цвета, който искате да добавите към градиента.
   

Често задавани въпроси

Колко цвята мога да добавя към градиент във Figma?

Можете да добавите толкова цветове, колкото желаете, както в стандартните, така и в мрежестите градиентни стилове на Figma. Но се опитайте да не прекалявате. Тъй като градиентите имат множество преходни цветове, повече от пет може да са твърде много, дори за мрежест градиент.

Мога ли да импортирам градиент във Figma?

Можете да импортирате произволен градиент във Figma. Например, можете да поставите код от CSS (Cascading Style Sheets), като отворите панела „Код“ и поставите кода. Можете също да импортирате градиенти от Adobe Illustrator.

Къде мога да намеря безплатни градиенти на Figma?

Можете да намерите безплатни и платени градиенти на Figma в  общността на Figma . Той разполага с множество прекрасни и уникални дизайни, създадени от потребители на Figma. Можете да филтрирате по плъгини, файлове и джаджи. Просто напишете „градиент“ в лентата за търсене в горната част и намерете този, който харесвате.

Станете фънки с цветни градиенти

Градиентите са отличен начин да направите дизайна различен и персонализиран. И Figma ви позволява да правите плавен преход между всеки два или повече цвята, които изберете. Не прекалявайте обаче. Смесвайте цветове, които вървят добре заедно и се опитайте да останете в една и съща цветова палитра.

Опитахте ли вече да направите градиент във Figma? Кажете ни в коментарите по-долу кой градиентен стил сте използвали и за какво сте го използвали.