Як зробити заливку градієнтом у Фігмі?

У Figma для створення градієнта потрібно виділити фігуру, потім у властивості Fill вибрати тип градієнта. Для налаштування кольорів виділіть точку градієнта та вкажіть її колір та непрозорість. Щоб задати напрямок градієнта, треба виділити крапку на кінці відрізка градієнта та пересунути її.

Як зробити заливку кольором у Фігмі?

Перейдіть до Fill («Заливка») і натисніть . У меню натисніть на плюсик. Назвіть стиль та збережіть. Щоб використати стиль, натисніть іконку з кружків у пункті Fill і виберіть потрібний шаблон.

Як зробити плавний градієнт Фігма?

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

Уроки та навчання Figma російською
Лінійний градієнт у Фігмі – Уроки та навчання Figma російською

Як зробити градієнт у Фігмі? Інструменти та корисні плагіни

Figma – це безкоштовний графічний онлайн-редактор, популярний серед дизайнерів та творців контенту. У ньому є вбудовані інструменти для створення базових варіантів градієнта, а складніших варіантів оформлення є безкоштовні плагіни.

Каріна Стельмах Редакція «Текстери»

Градієнт – помітний «довгограючий» тренд у веб-дизайні. Його активно використовують «Яндекс» (на скріншотах вище) та інші компанії – Instagram, Wildberries та ін.

Створюємо простий градієнт у «Фігмі»

Логін або створюємо новий обліковий запис у «Фігмі».Потім вибираємо або створюємо об'єкт – кадр, фігуру або текст, до якого ми хочемо додати градієнт.

Для прикладу створимо новий кадр: тиснемо кнопку з ґратами або букву F і розтягуємо кадр до потрібної величини (як Градієнт – помітний «довгограючий» тренд у веб-дизайні. Його активно використовують «Яндекс» (на скріншотах вище) та інші компанії – Instagram, Wildberries та пр.ернатива – вибираємо необхідний розмір кадру в бічному меню).

Для керування колірним тлом будь-якого об'єкта необхідно натиснути на нього, тоді в бічному меню з'явиться рядок Fill. Вона містить інформацію про поточний колір фону та його прозорість. Щоб змінити фон, натисніть на іконку кольору.

Варіанти заливання у «Фігмі»:

• Solid – суцільна заливка;
• Linear – лінійний градієнт;
• Radial – радіальний градієнт;
• Angular – кутовий градієнт;
• Diamond – градієнт як кристала;
• Image – вставка картинки.

За суцільною заливкою та вставкою картинки і так все зрозуміло. Розглянемо кожен варіант створення градієнта.

Лінійний градієнт

Вибираємо у списку Linear – лінійний градієнт. На об'єкті з'являються дві точки, які можна переміщувати для створення плавнішого або різкішого переходу. Можна вибрати будь-яку кількість кольорів для градієнта. Для додавання ще одного кольору просто клацаємо на градієнтній лінії. Чим більше точок, тим плавнішим буде перехід.

Тут же можна керувати прозорістю кольору, рухаючи повзунок у різні боки.

Радіальний (круговий) градієнт

Не змінюючи відтінки, подивимося, як виглядатиме градієнт Radial зі списку.

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

Кутовий градієнт

Градієнт Angular створює гострий кут навколо якого утворюється градієнт.За допомогою кола в центрі можна керувати розташуванням кута та кольорів навколо нього.

Градієнт у вигляді кристала

Diamond створює в центрі розпилення одного з вибраних кольорів у вигляді кристала. За допомогою напрямних усередині нього можна змінювати його розміри.

У Google та «Яндексі», соцмережах, розсилках, на відеоплатформах, у блогерів

Як додати градієнт на фото

Градієнт можна додати на фото, щоб воно виглядало цікавіше. Такий ефект використовують, наприклад, під час створення банерів. Для цього спочатку створюємо кадр, як описано вище, потім додаємо потрібне зображення до робочої області. Це можна зробити принаймні трьома способами:

1. Натисніть кнопку меню зверху зліва, як показано на скріншоті. Вибрати File -> Place Image і в віконці, що з'явилося знайти на вашому комп'ютері потрібну картинку.
2. Скористайтеся поєднанням клавіш Ctrl+Shift+K і так само вибрати в віконці вашу картинку.
3. Перетягнути картинку з папки прямо в робочу область Фігми.

Після того, як картинка з'явилася в робочій області Фігми, ми можемо перетягнути її всередину створеного кадру. Якщо роздільна здатність зображення більша за роздільну здатність кадру, вона виглядатиме обрізаною. Щоб підігнати розміри під кадр, достатньо потягнути за куточки картинки і дотягнути їх до куточків кадру. Для зручності можна тягнути куточки, затиснувши кнопку Shift, тоді збережуться пропорції і не потрібно тягнути кожен куточок окремо.

Щоб переконатися, що зображення помістилося без порожніх місць, збільшуємо робочу область і підганяємо її під необхідні розміри. Коли буде досягнуто кордону кадру, «Фігма» сама підкаже червоними напрямними або автоматичним припасуванням.

Приступаємо до накладення градієнта.Для цього створюємо нову фігуру Rectangle за допомогою гарячої клавіші R або натиснувши на квадрат в меню зверху.

Вибравши Rectangle, ми додаємо його на наш кадр. Можна зробити цю фігуру будь-яких розмірів, розтягнувши його до розмірів кадру.

У створеної фігури змінюємо описаним вже способом заливку з Solid на будь-який градієнт, що сподобався. Стандартне рішення у дизайнерів та творців контенту – варіант Linear. Він підходить практично для будь-яких макетів. Вибираємо у нього кольори, їх прозорість та напрямки градієнта, як нам здасться потрібним.

Складні градієнти у «Фігмі»

Для створення складнішого градієнта можна скористатися безкоштовним плагіном Mesh Gradient для «Фігми». Встановіть його, натиснувши «Install» у верхньому правому кутку, а потім виберіть фігуру і запустіть плагін в меню.

Плагін має різні налаштування для створення градієнтів. При відкритті ви побачите градієнт та чотири точки на ньому, так звані "Mesh points". Ці точки дозволяють вибрати додаткові кольори та напрямки для градієнта. Плагін дозволяє розмістити на полі до 16 пікселів. Щоб додати додатковий колір, потрібно натиснути на крапку та вибрати колір.

Нижче зліва розташовуються основні кольори градієнта – по одному на кожний кут.

При перетягуванні Mesh points створюються складніші напрямки кольорів у градієнті (порівняно з можливостями вбудованих інструментів).

Кнопки в пункті Control Visibility керують появою Mesh points і напрямних ліній. Це зроблено для зручності створення нових напрямків у градієнті. Вибравши параметр "None", можна подивитися на готовий градієнт, перш ніж сформувати його.

Після створення потрібного ефекту натискаємо "Generate".Таким чином ви сформуєте готовий об'єкт у вигляді квадрата із створеним градієнтом. Залишається лише перемістити його на картинку та зменшити прозорість для гарного ефекту або використовувати як самостійний дизайн.

Webgradients для підбору ідеальних поєднань кольорів градієнта

Щоб не ламати голову за відсутності натхнення, скористайтеся сервісами для підбору готових градієнтів. Наприклад, відмінний варіант – Webgradients.com. Він містить безкоштовну колекцію з більш ніж 180 лінійних градієнтів. Використані кольори вказані під кожним кружечком. Натиснувши на будь-який з них, ви побачите градієнт у повному розмірі.

Цей сервіс має також спеціальний плагін для Фігми. Після установки клацніть на градієнт, що вам сподобався в вікні, і він тут же застосовується до активного об'єкта. Підправимо прозорість, і наша картинка має нове колірне рішення.

Вважаю, стаття допомогла вам не тільки відкрити новий інструмент для роботи з креативом, але й додала кілька ідей у ​​скарбничку.