Як створити градієнт у Figma

Якщо ви не можете вибрати один колір, відмінним варіантом стануть градієнти. У Figma ви можете створювати різноманітні градієнтні фони, накладати градієнт на форму та текст, створювати градієнти обведення та багато іншого. Ви навіть можете створювати сітчасті градієнти з ефектом розмиття або за допомогою плагіна сітчастих градієнтів спільноти Figma.

Оскільки Figma має так багато різних способів створення градієнта, новим користувачам може бути важко зрозуміти їх усі з самого початку. Звичайно, експерименти є частиною процесу навчання, але набагато легше мати всі інструкції в одному місці. І ця стаття передбачає саме це.

Як створити різні стилі градієнта в Figma

Figma пропонує різні стилі градієнта, які можна використовувати, щоб заповнити фон або об’єкти на полотні кількома кольорами.

• Лінійний:  лінійні градієнти мають два кольори, які зливаються разом у пряму лінію.
• Радіальний:  з радіальними градієнтами перший колір починається з однієї точки та зливається з іншим у всіх напрямках.
• Кутовий:  у кутових градієнтах ви можете визначити напрямок, у якому рухається градієнт, додаючи кути. Це відмінний варіант для створення 3D зображень.
• Діамант:  як випливає з назви, ромбові градієнти починаються з однієї точки та розповсюджуються у формі ромба.

Кроки для створення будь-якого з цих стилів градієнта однакові. Різниця лише в обраному вами стилі. Ось як створити градієнтний дизайн у Figma:

1. Відкрийте порожній файл Figma.
   
2. Торкніться інструмента «Прямокутник» на лівій панелі інструментів.
   
3. Використовуючи цей інструмент, намалюйте прямокутник на полотні, щоб використовувати його як опорний градієнт.
   
4. Виберіть створений прямокутник.
   
5. Натисніть поточний колір під «Заливкою» на правій панелі, щоб відкрити панель вибору кольорів.
   
6. Натисніть спадне меню та змініть стандартний «Суцільний» на потрібний стиль градієнта. З’являться дві кольорові позначки або рамки.
   
7. Виділіть кожну кольорову зупинку та виберіть колір, який потрібно додати до градієнта.
   
8. Торкніться чотирьох крапок поруч із «Заливка», щоб зберегти градієнт як стиль.
   

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

Примітка.  Щоб видалити додану кольорову позицію, виберіть її та натисніть «Видалити» або «Backspace» на клавіатурі.

Тепер ви можете застосувати стиль градієнта до будь-якого об’єкта.

Як створити сітчастий градієнт у Figma

Сітчасті градієнти популярні серед великих компаній і брендів. Якщо ви часто користуєтеся Instagram, ви щодня бачите логотип програми. Таким чином, знання того, як їх створювати, може бути корисним у ситуаціях, коли вам потрібно додати інтересу до своїх проектів.

Як згадувалося, градієнти сітки можна створити за допомогою плагіна , наданого спільнотою Figma. Але є більш простий спосіб додати кілька кольорів у будь-яке місце на полотні без використання зовнішніх інструментів.

Ось як створити сітчастий градієнт у Figma:

1. Введіть новий файл Figma.
   
2. Створіть рамку.
   
3. Поставте прапорець «Вміст кліпу» на правій панелі, щоб все, що виходить за межі кадру, було обрізано.
   
4. Почніть додавати різні фігури або створіть власний об’єкт за допомогою інструмента «Перо» всередині рамки.
   
5. Змініть «Заповнення» кожної нової форми, щоб вона відрізнялася від решти.
   
6. Виберіть усі фігури.
   
7. У розділі «Ефекти» натисніть спадне меню та виберіть «Розмиття шару».
   
8. Відкрийте налаштування «Розмивання шару» та збільшуйте значення, доки не зникнуть чіткі межі між фігурами.
   
9. Збережіть стиль, як описано вище, і використовуйте його для інших об’єктів.

Ще один спосіб створити сітчастий градієнт — використовувати кутовий стиль. Це дає трохи інший, але такий же цікавий захоплюючий результат, як і перший підручник.

Ось що вам потрібно зробити:

1. Відкрийте порожнє полотно.
   
2. Використовуйте потрібну форму та додайте її на полотно.
3. У розділі «Заливка» змініть «Суцільний» на «Кутовий».
   
4. Виберіть кольори для градієнта.
   
5. Відрегулюйте кут та інші аспекти градієнта.
   
6. Додайте іншу форму, бажано «Затемнення», тобто коло.
   
7. Покладіть його поверх іншої форми на полотні.
   
8. Додайте лінійний градієнт і змініть колір на той, який добре поєднується з іншими.
   
9. У розділі «Ефекти» скористайтеся ефектом «Розмиття шару» та розмийте лінії нової форми, щоб злити її з першою.
   

Як градієнтувати зображення у Figma

Окрім створення градієнта, ви також можете накласти градієнт на існуюче зображення, щоб додати певний розмір. Це надає ефекту «вицвітання» або створює ілюзію невидимого джерела світла, яке світить на зображенні ззовні.

Ось як додати градієнт до зображення у Figma:

1. Відкрийте новий файл у Figma.
   
2. Перетягніть зображення, до якого потрібно додати градієнт, на полотно.
   
3. Додайте форму, яка відповідає розміру зображення зверху.
   
4. Виберіть стиль градієнта в розділі «Заливка».
   
5. Виберіть кольори градієнта в палітрі кольорів.
   
6. Налаштуйте непрозорість, кут тощо.
   

Ви також можете скористатися інструментом «Перо» і намалювати фігуру в області, де ви хочете розмістити градієнт.

Як градієнтувати текст у Figma

Створення градієнта на тексті у Figma дуже схоже на те, як ви створюєте градієнт для будь-якої іншої форми. Ось кроки:

1. Відкрийте нове полотно в Figma.
   
2. Натисніть інструмент «Текст» на панелі інструментів ліворуч.
   
3. Натисніть будь-де на полотні та почніть писати.
4. Виділіть текст і перейдіть до «Заповнити».
   
5. Виберіть стиль градієнта.
   
6. Натисніть кожне кольорове поле та знайдіть колір, який потрібно додати до градієнта.
   

поширені запитання

Скільки кольорів я можу додати до градієнта у Figma?

Ви можете додати скільки завгодно кольорів як у стандартному, так і в сітчастому стилі градієнта Figma. Але постарайтеся не переборщити. Оскільки градієнти мають кілька перехідних кольорів, більше п’яти може бути забагато навіть для сітчастого градієнта.

Чи можу я імпортувати градієнт у Figma?

Ви можете імпортувати будь-який градієнт у Figma. Наприклад, ви можете вставити код із CSS (каскадних таблиць стилів), відкривши панель «Код» і вставивши код. Ви також можете імпортувати градієнти з Adobe Illustrator.

Де я можу знайти безкоштовні градієнти Figma?

Ви можете знайти безкоштовні та платні градієнти Figma в  спільноті Figma . Він містить безліч чудових і унікальних дизайнів, створених користувачами Figma. Ви можете фільтрувати за плагінами, файлами та віджетами. Просто введіть «градієнт» у рядку пошуку вгорі та знайдіть той, який вам подобається.

Будь веселим із барвистими градієнтами

Градієнти — чудовий спосіб зробити дизайн виразним і персоналізованим. А Figma дозволяє вам робити плавний перехід між будь-якими двома або більше кольорами, які ви виберете. Однак не перестарайтеся. Змішуйте кольори, які добре поєднуються, і намагайтеся залишатися в одній колірній палітрі.

Ви вже пробували зробити градієнт у Figma? Розкажіть нам у коментарях нижче, який стиль градієнта ви використовували та для чого ви його використовували.