ЯК ЗРОБИТИ ГРАДІЄНТ ТЕКСТА У ФІГМІ
Щоб зробити градієнтний текст Figma, виберіть текст, який хочете оформити.
У панелі властивостей праворуч на екрані виберіть символіконка "Fills" (заливки), і клацніть на "Linear Gradient".
З'явиться вікно з градієнтом на тексті. Виберіть два кольори з панелі ліворуч, щоб створити градієнтний текст.
Ви можете рухати лінії, що вказують напрямок вашого градієнта, та налаштувати його так, як вам подобається. Можна змінювати позицію, кут та орієнтацію градієнта.
Після налаштування градієнта натисніть кнопку «Close» у верхньому правому куті вікна градієнта. Готово! Ваш градієнт текст готовий до роботи.
Як зробити градієнтний текст на банері без фотошопу, онлайн, у Figma за 3 хвилини.
Градієнт фігури в Figma. Freeform Gradient
Космічний градієнт у Figma за кілька кліків
Розмиття градієнтом у Figma
ЯК ЗРОБИТИ АНІМАЦІЮ У ФІГМІ ЗА 10 ХВИЛИН - АНІМАЦІЯ У ФІГМІ - #ПІЖАМАTV
ТЕКСТ ПО КОЛУ #FIGMA - ЯК ЗРОБИТИ ТЕКСТ ПО КОЛУ - АНІМАЦІЯ У ФІГМІ -
Неоновий ефект у програмі Figma
Плагіна Figma для створення складних градієнтів
Як працювати у FIGMA: редагування зображень та створення макетів
UX/UI курс із нуля. Урок 9. Основи Figma VI. Градієнти. Плагіни
У шостій частині за основами Figma ми дізнаємося, як працювати з градієнтами. А саме: які бувають види градієнтів, які налаштування їм можна застосувати і як працювати з градієнтами на практиці. Також дізнаємося про плагіни для Figma та освоїмо процес їх встановлення на практичному прикладі.
- Градієнти та заливання кольором у Figma
- Лінійний градієнт (Linear)
- Радіальний градієнт (Radial)
- Кутовий градієнт (Angular)
- Градієнт у вигляді алмазу (Diamond)
- Налаштування градієнтів
- Непрозорість
- Піпетка
- Можливість задати код кольору
- Додавання додаткових точок градієнта
- Кут та напрямок градієнта
- Практичні приклади
- Плагіни для градієнтів у Figma
- Як працювати з плагінами?
- Плагін uiGradient: приклад установки
- Робота з плагіном uiGradient
- Плагін Easing Gradients
- Плагін Chromatic Figma
- Домашнє завдання
- Висновки
Градієнти та заливання кольором у Figma
Напевно, більшість з читачів цього уроку вже знають, що градієнт – це плавний перехід з одного кольору в інший. Для утворення градієнта потрібні мінімум два кольори, тобто дві ключові точки, між якими буде утворений перехід кольорів, що складається з безлічі інших (проміжних) точок.
За допомогою ключових точок ми можемо керувати градієнтом, чим більше їх буде, тим більш передбачувані переходи кольорів ми отримаємо.
Ми з вами вже навчилися надавати об'єкту колір за допомогою піпетки у п'ятому уроці. Так само ми можемо присвоїти колір об'єкту без використання піпетки, вибравши його самостійно. Для цього ми використовуємо праву бокову панель. Виділіть об'єкт і натисніть на панелі налаштування Fill. За замовчуванням об'єкт буде залитий одним кольором (Solid). Ми можемо міняти його, рухаючи повзунок мишкою на панелі кольорів.
На цій же панелі Fill замість заливання кольором ви зможете вибрати заливку градієнтом. У графічних редакторах є чотири види градієнтів: лінійний, радіальний, кутовий та градієнт-алмаз (ромбоподібний).
Лінійний градієнт (Linear)
Перехід кольорів у цьому градієнті здійснюється по прямій лінії. Відразу варто відзначити, що практично у всіх випадках ви використовуватимете саме цей градієнт.Він найбільш природно та привабливо передає колірні переходи. Щоб встановити об'єкт заливки лінійним градієнтом, виберіть його на панелі Fill і встановіть кольори для точок, як показано на відео нижче.
Радіальний градієнт (Radial)
На відміну від лінійного, у радіальному градієнті колір розходитися по колу, починаючи з його центру. Щоб скористатися радіальним градієнтом, виберіть його на панелі Fill.
Кутовий градієнт (Angular)
Перехід кольорів у цьому градієнті повторює форму спіралі і на з'єднаннях кольору імітує «кут». Давайте подивимося, як це працює на панелі Fill.
Градієнт у вигляді алмазу (Diamond)
Створює переходи кольору, затіняючись від середини ромба (алмазу) до його граней. Застосувати такий градієнт можна в такий спосіб.
Налаштування градієнтів
Недостатньо просто застосувати градієнт, щоб отримати бажаний для дизайну результат. Тому у Figma є додаткові налаштування для градієнтів, а саме:
- непрозорість;
- піпетка;
- можливість встановити конкретний код кольору;
- додавання додаткових точок градієнта;
- кут та напрямок градієнта.
Непрозорість
Дозволяє змінювати насиченість колірного переходу шляхом зміни непрозорості ключової точки. Наприклад: якщо у нас лінійний градієнт, який складається з двох точок, перша з непрозорістю в 100%, остання 0%, то посередині градієнтного переходу непрозорість буде 50%, оскільки редактор автоматично обчислить відсоток непрозорості.
Піпетка
Дозволяє скопіювати кольори для ключових точок градієнта. На практиці дуже корисна функція, яка дозволяє, наприклад, продовжити фон об'єкта, затемняючи/освітлюючи його з іншого краю.
Можливість задати код кольору
Дозволяє дизайнеру задавати точні комбінації кольорів. При цьому панель Fill Figma дозволяє працювати в різних колірних схемах. Найпопулярніші HEX та RGB активно використовують при створенні брендбуків. Наприклад, замовник у ТЗ часто може прописати потрібні кольори конкретними комбінаціями.
Три попередні функції абсолютно також працюють і із заливкою об'єкта одним кольором (Solid).
Додавання додаткових точок градієнта
Дозволяє краще контролювати колірні переходи: уникати переходів із брудними кольорами, а також створювати багато колірних градієнтів.
Популярний вдалий приклад багатоколірного градієнта – логотип соціальної мережі Instagram, який уже не один рік поспіль популяризує тренди на градієнти у діджитал сфері.
Кут та напрямок градієнта
Думаю, з попередніх відео ви вже візуально зрозуміли, що ми можемо задавати градієнту будь-який кут. Для цього нам потрібно відкрити наш градієнт таким чином, щоб крапки були видні поверх фігури і вручну за допомогою затиснутої ЛКМ обертати його.
Практичні приклади
У градієнтів є безліч застосувань як у графічному, так і в UI дизайні. Давайте разом розглянемо кілька добрих варіантів, які ви зможете використовувати самостійно на практиці.
Додавання обсягу фігури. Ми не використовуємо тут 3D, але при цьому кулька здається досить об'ємною. Колірні переходи імітують гру світла та тіні.
Імітація руху фігури. Знову ж таки, лише за допомогою колірного переходу та гри з непрозорістю, людське око сприймає об'єкт як фігуру, яка переміщається. Такі ілюстрації навіть у статичному вигляді можуть стати чудовим візуальним доповненням для сайту.
Підтримати тему об'ємності можна за допомогою градієнтних кнопок.
Градієнт на фоні. Порівняйте два приклади фонової заливки нижче. Обидві звичайно мають право на життя, але погодьтеся, що у другої більше переваг. Оку людини є за що зачепитися, світла ділянка акцентує увагу на тексті, а колірне рішення виглядає цікавіше.
Ще один приклад-порівняння фонової заливки градієнтом та одним кольором. Градієнт додає зовсім небагато акцентів.
Плагіни для градієнтів у Figma
Якщо ви проходили попередні уроки, думаю вже звернули увагу на те, що ми поки що вивчаємо базовий функціонал графічного редактора Figma. Але, крім нього, існують спеціальні плагіни – це додаткові модулі, які зроблені, щоб полегшити, прискорити роботу або додати новий функціонал.
Як працювати з плагінами?
У верхній панелі Figma у вас є таб Plugins, який дозволяє запускати вже встановлені плагіни, а також знайти і додати нові (за це відповідає пункт меню Browse Plugins in Community).
Community в Figma – це простір, де користувачі діляться корисностями друг з одним. Наприклад, крім плагінів, ви зможете там знайти іконки, макети сайтів, мокапи, ілюстрації та багато іншого.
Плагін uiGradient: приклад установки
Цей інструмент пропонує вам вибір з десятків вдалих поєднань кольорів. Якщо складно підібрати добрий градієнт, uiGradient допоможе в цьому.
Давайте на його прикладі, спробуємо встановити ваш перший плагін для Figma. Для цього:
- Зробіть перехід на головну сторінку Figma і натисніть на свій нікнейм у лівому верхньому кутку. Ви маєте відкрити можливість перейти в Community – натисніть на неї.
- Виберіть у верхній частині вікна таб Plugins і введіть у пошуковий рядок назву нашого плагіна “uiGradient”.
- Пошук підтягує результати, виберіть потрібний та клацніть на нього.
- Зверху ми маємо кнопку Installed – натискайте.
- Щоб плагін запрацював, потрібно перезапустити Figma.
Це ж дію можна було зробити через вкладку Plugins та функцію Browse Plugins in Community. Але мені важливо було показати вам, як саме ми можемо зайти до Figma Community, щоб ви могли дослідити його самостійно.
Робота з плагіном uiGradient
- через вкладку Plugins, Вибравши потрібний нам плагін зі списку;
- через пошук натиснувши Ctrl (Cmd) + / і написавши в пошуковому рядку назву + Enter.
Другий спосіб може бути зручнішим у тому випадку, якщо ви захочете поставити багато плагінів у майбутньому та їх складніше буде швидко знаходити у списку.
Плагін Easing Gradients
Це хороший інструмент, що дозволяє робити м'якіші переходи у середині самого градієнта. По суті, плагін призначений для градієнтів, які йдуть у прозорість. Особливо класно він працює із чорно-білою гамою.
Приклад: дуже часто, для поліпшення читабельності тексту на фото, з одного боку роблять градієнтну заливку, яка повинна плавно розчинятися у фотографії. Але зображення невеликого розміру перехід може бути досить помітним. Саме тут і знадобиться плагін Easing Gradients, що дозволяє підкоригувати градієнт за допомогою кривих.
Для того щоб плагін спрацював, потрібно спочатку виділити фігуру з нанесеним градієнтом, а після цього запустити плагін через панель або пошук.
Плагін Chromatic Figma
Другою проблемою після жорстких переходів є так звана “брудність кольору”. Між двома ключовими точками градієнта машина іноді вибирає досить брудний перехід.Виправити цю проблему можна вручну, додаючи нові ключові точки з більш чистими відтінками кольору.
Але якщо ви ще недостатньо добре бачите кольори, а це властиво всім новачкам, можна скористатися плагіном Chromatic Figma, який візуально покращить градієнт за вас.
Виберіть ваш градієнт, після чого запустіть плагін, виберіть Fix Gradient та натисніть на кнопку Apply.
Домашнє завдання
Домашні завдання більше не перевіряються для громадян Росії. Щоб переконатися, що ви не з Росії після того, як залишите коментар з домашнім завданням наприкінці уроку на сайті, напишіть мені в директ Інстаграм @frusia.pro
- Скопіюйте собі картинку з ілюстрацією, що представлена нижче. Максимально точно відтворіть її, спираючись на вміння роботи з градієнтами, які ви отримали у цьому уроці;
- Встановіть три плагіни для градієнтів, описаних у цьому уроці;
- Намалюйте будь-які три фігури і спробуйте самі задати їм різні колірні градієнти. Після цього зробіть дублікати цих фігур і застосуйте до них плагін Chromatic Figma. Результат скиньте посиланням на файл Figma.
Висновки
Вміння працювати з градієнтом у графічному редакторі Figma дасть вам багато можливостей робити UI дизайн цікавим та різноманітним. А інформація про існування та використання плагінів полегшить вашу роботу в майбутньому. Сподіваюся ви добре засвоїли матеріал цього уроку і виконайте домашні завдання, які я для вас підготувала, адже попереду на вас чекає ще більш захоплюючий світ дизайну.
Підписуйтесь на мене в Instagram @frusia.pro, будьте в курсі анонсів нових уроків, дивіться перевірки домівок у сторіс, ставте питання, а також на вас чекає безліч корисних постів про дизайн.
Stay tuned!
Що ще почитати
Залишіть коментар
Коментарі
привіт! Буду вдячна за відгуки)
https://www.figma.com/file/nvSYfkq63m2kn0QDaZHriK/%D0%9D%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D 0%BD%D1%8F-%D1%83-Frusia.Pro?type=design&node-id=314%3A9&mode=design&t=WPmRc6m50leplemk-1
Коментар frusia.pro:
Помилок не знайшла, все чудово!
Доброго дня
https://www.figma.com/file/kSCP9cjGRVcpT0jsiKlPsO/6-8-lesson?node-id=71%3A93&t=OHbXSLgYAhh4ZcCn-1
Коментар frusia.pro:
Завдання 1. Перемалювати ілюстрацію з градієнтом. Гарно відтворили, молодець.
Завдання 3. Застосувати плагін до градієнтів. На деяких фігурах добре видно результат до і після використання плагіну.
Коментар frusia.pro:
Завдання 1. Перемалювати ілюстрацію з градієнтами. Все супер!
Завдання 3. Застосувати плагін до градієнтів. Бачу зміни у фігурах, сподіваюся із плагінами не виникло проблем та ви розібралися.
Чекатиму додому до останнього уроку
Коментар frusia.pro:
Завдання 1. Перемалювати ілюстрацію з градієнтами. Чудово попрацювали, ідеально перемальовані.
Завдання 3. Застосувати плагін до градієнтів. Бачу, що у точок у градієнтів стало значно більше, а отже ви розібралися, як встановлювати та використовувати плагіні, все правильно.
У вас все добре виходити, продовжуйте та переходьте до останнього уроку
Добрий день! Дуже цікавий урок і завдання, надсилаю
https://www.figma.com/file/VLBmrdtp4jYbdm0ZFCMdHS/%D0%A3%D1%80%D0%BE%D0%BA-9?node-id=0%3A1
Коментар frusia.pro:
Завдання 1. Перемалювати ілюстрацію з градієнтами. Все зроблено дуже добре, помилок не найшла.
Завдання 3. Застосувати плагін до градієнтів. Бачу що у фігурах є зміни, значить ви розібралися як працювати із плагінами.
Добре попрацювали, переходьте до 10-го уроку
Люба, добрий вечір!
Дуже вдячна за правки та відеопояснення до дз)
Все виправила і була справді вражена від ефекту плавного градієнту від плагіна у 3 завданні :)
Буду вдячна за перевірку)
https://www.figma.com/file/R2GcgT9WcgRm1jolF5lBA9/%D0%B4%D0%B7?node-id=271%3A24
Коментар frusia.pro:
Добрий вечір, будь ласка! Так, тепер все супер, за останнім завданням також бачу нові точки у градієнтах, ви розібралися, молодець!
Переходьте до останнього уроку
Люба, вітаю!
У минулому завданні виправила заливку на прозору і виконала дз до цього мегацікавого уроку із градієнтами ;))
Коли перечитала матеріал, то автоматично у стрічці Інсти та Пінтересту почала помічати особливо цікаві дизи із градієнтами і представляти в голові, як вони правильно виконуються))
Прикріплю готове дз і буду вдячна за перевірку!
Мирного дня та чудового настрою)
https://www.figma.com/file/R2GcgT9WcgRm1jolF5lBA9/%D0%B4%D0%B7?node-id=271%3A24
Коментар frusia.pro:
Доброго дня! По минулій домі все супер!
Завдання 1. Перемалювати ілюстрацію з градієнтом. Дуже добре, всі кольори точно підібрані, за формою також все гарно. У деяких градієнтів трохи неправильно виставлені куті, під якими формуються градієнти. Записала відео, щоб вам було зрозуміліше:
Завдання 3. Застосувати плагін до градієнтів. Бачу фігури з градієнтом, але не бачу нових точок, схоже, що плагін не був застосований. У відео за посиланням вище показала, як встановити плагін і застосувати його у вашому випадку.
Чекаю на виправлення Якщо щось незрозуміло, то ставте питання, будемо розбиратися.
Доброго дня, дякую за зауваження, виправила
https://www.figma.com/file/MXbElNPI2qPu6ebirFQLuM/Untitled?node-id=15%3A3
Коментар frusia.pro:
Добрий вечір, будь ласка Бачу виконане третє завдання, молодець, ви розібралися, як застосовувати плагіні, бо в градієнтах з'явилася купа нових точок.
Сміливо переходьте до останнього уроку
Доброго вечора, в іншому завданні застосувала плагін хроматік фігма, там де "фікс градієнт", не впевнена, чи це ті, про що йшлося у завданні))
https://www.figma.com/file/b9x48nptCrdpmKNtgdzxY5/9-%D1%83%D1%80%D0%BE%D0%BA?node-id=5%3A17
Коментар frusia.pro:
Завдання 1. Перемалювати ілюстрацію з градієнтами. Все зроблено ідеально, молодець!
Завдання 3. Застосувати плагін до градієнтів. Бачу нові точки у фігурах, отже, плагін застосовано правильно.
Вийшло дуже добре, переходьте до 10-го заключного уроку
доброго дня, https://www.figma.com/file/MXbElNPI2qPu6ebirFQLuM/Untitled?node-id=5%3A36
дуже цікавий та складний тк варіантив безліч та який найгарніший
Коментар frusia.pro:
Завдання 1. Перемалювати ілюстрацію з градієнтами. Дуже добре попрацювали. Лише в основі обеліска чомусь у вас виліз прямокутник, але це не має значення. Головне, що ви розібралися у роботі з градієнтами.
Завдання 3. Застосувати плагін до градієнтів. Не бачу іншого завдання. Можливо він в іншому файлі?
Жду третє завдання
https://www.figma.com/file/uiyn1dUjEaQVz5dVos2cfP/9-%D1%83%D1%80%D0%BE%D0%BA?node-id=0%3A1
Виправила:
Завдання 1. Перемалювати ілюстрацію з градієнтами. Все чудово відмальоване, єдине маленьке зауваження: відвір у обеліску чомусь сірого кольору.
Коментар frusia.pro:
Привіт! Тепер все добре, переходьте до заключного уроку
Коментар frusia.pro:
Завдання 1. Перемалювати ілюстрацію з градієнтами. Все чудово відмальоване, єдине маленьке зауваження: відвір у обеліску чомусь сірого кольору.
Завдання 3. Застосувати плагін до градієнтів. Бачу нові точки у градієнтах, плагіні застосовані правильно.
Все супер, переходьте до завершального уроку
Добрий вечір! Надсилаю дз до 9 уроку.
https://www.figma.com/file/kTIuOK9OuEpqJTYLXrXyT3/Homework-9?node-id=0%3A1
Коментар frusia.pro:
Завдання 1. Перемалювати ілюстрацію з градієнтами. Молодець, все добре. Основа обеліску трохи відділилася від підлоги, але це дрібничка.
Завдання 3. Застосувати плагін до градієнтів. Ви навчилися застосовувати плагін, бачу нові точки у градієнтах.
Перейдіть до наступного уроку
Доброго дня! Ось посилання на виконане домашнє завдання - https://www.figma.com/file/71PUJb4Y9wz1l4pgpe3qFS/Lesson-9?node-id=20%3A10
Дякую за класний урок!
Коментар frusia.pro:
Доброго дня! Будь ласка
Завдання 1. Перемалювати ілюстрацію з градієнтами. Все правильно, добре повторили форми і самі градієнти, молодці! У правому верхньому кутку є невеликі відмінності, але схоже, що там просто йде два градієнти, які накладаються один на один. Потрібно вже вгадувати.
Завдання 3. Застосувати плагін до градієнтів. Бачу нові крапки у градієнтах, все правильно.
Гарно попрацювали, переходьте до останнього уроку
Доброго дня!)
ДЗ до 9 уроку
Коментар frusia.pro:
Завдання 1. Дуже добре! У більшості учнів є проблеми з градієнтом у верхньому правому куті, у вас все добре.
Завдання 3. Все правильно, бачу що застосували плагін, бо з'явилися нові точки.
Рухайтесь до десятого уроку
Доброго вечора!
Дякую за неймовірно цікаве домашнє завдання!
Надсилаю посилання:
https://www.figma.com/file/aoeG9bjIed8vDYp1taE0Ba/UI%2FUX-home-work-lesson-9?node-id=4%3A172
Коментар frusia.pro:
Добрий вечір! Будь ласка, рада, що вам понравилось
Завдання 1. Все максимально точно перемальовано та підібрано. Навіть знайшли оригінальний шрифт для напису, молодець!
Завдання 3. Ви вибрали досить складні фігури, особливо іконку браузеру Firefox. Бачу, що ви застосували плагіні, тому що з'явилося багато нових точок у градієнтах. Все вірно.
Переходьте до останнього уроку
Привіт, результат по дому тут https://www.figma.com/file/oBRO7AcMCIq4r8PaA3N9C7/%D0%94%D0%B7-7?node-id=307%3A258
Коментар frusia.pro:
Завдання 1. Є невелика розбіжність за кольорами градієнта у верхньому правому кутку.
Завдання 2. Це якщо вже чіплятися, то у іконки програми Daum має бути обведення сірого кольору.
Доброго вечора!
Дякую за ще один цікавий урок, чекала, коли ви розкриєте тему плагінів :) Перевірте будь ласка мою хатку
https://www.figma.com/file/cWzLEXXn8GtxvGBIfpwIbG/%D0%9F%D0%BB%D0%B0%D0%B3%D0%B8%D0%BD%D1%8B?node-id=10%3A91
Коментар frusia.pro:
Завдання 1. Ілюстрація зроблена чудово, молодець!
Завдання 3. Добре, що ви взяли не прості геометричні фігури, а саме логотипи, заодно потренували інші інструменти Figma і вкотре помітили для себе, як можна використовувати грандінети, щоб показати обсяг.
Привіт) Перевірте будь ласка завдання:
1. https://www.figma.com/file/WELDofOaSfWpdMP2rjvZQN/%D0%93%D1%80%D0%B0%D0%B4%D0%B8%D0%B5%D0%BD%D1%82%D1 %8B?node-id=0%3A1
Коментар frusia.pro:
Завдання 1. Відобразили градієнти ідеально, розумничка!
Як у Figma зробити градієнт
У Фігмі передбачено кілька варіантів заливання фону об'єкта:
- Суцільний колір (Solid)
- Лінійний градієнт (Linear)
- Радіальний градієнт (або круговий) (Radial)
- Кутовий градієнт (Angular)
- Алмазний градієнт (Diamond)
- Зображення (Image)
Щоб додати заливку до об'єкта, виділіть його та додайте значення у вкладці Fill у правому вікні з параметрами.
Для кожного виду градієнта передбачено такі налаштування:
- Набір квітів. Ви можете додати скільки завгодно квітів у градієнт, натискаючи на шкалу над палітрою
- Прозорість для кожного кольору
- Розташування крайніх точок градієнта. Рухаючи повзунки ви можете налаштувати кут повороту градієнта та швидкість переходу від одного кольору до іншого
Налаштування прозорості точки
Налаштування розташування градієнта
Ви можете додати до об'єкта кілька градієнтів або поєднувати заливку градієнтом та іншими варіантами, наприклад зображенням.
Градієнт із зображенням у Figma
Ви також можете застосувати градієнт або будь-який інший вид заливки до групи об'єктів, але в такому випадку вам будуть недоступні параметри повороту градієнта, і нахил буде суворо за замовчуванням. Тому для поширення градієнта на групу елементів є сенс настроїти градієнт на одному і скопіювати його параметри на інші об'єкти.
