Як швидко зробити градієнт у Figma - покрокова інструкція.

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

Стандартний варіант - вбудовані інструменти для створення градієнта Figma

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

• Linear - ви отримаєте лінійний градієнт,
• Radial - для створення радіального градієнта,
• Angular - підходить для кутового градієнта,
• Diamand – ви зможете зробити градієнт у вигляді кристала.

Якщо ви бажаєте змінити колір фону, натисніть іконку кольору заздалегідь. Заливку можна зробити плавною або навпаки — з різким переходом. Тут можна додати гарний відтінок до вже існуючого, щоб переглянути поєднання кольорів і визначитися з колірною гамою.Після вибору одного з градієнтів спробуйте пересувати повзунки і стежте, як змінюється картинка. Кожен із видів має свої особливості.

Освоїти навички графічного дизайну та одразу почати працювати у Figma можна на онлайн-курсах від Pentaschool, Нетології та Contented. Ще більше курсів за напрямком дизайну на нашому порталі.

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

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

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

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

Складний градієнт у Figma

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

Для роботи без плагіна знадобиться чисте тло, на якому потрібно в хаотичному порядку розмістити фігури. Наступний крок – розфарбувати їх у різні кольори.Після цього необхідно в бічній панелі праворуч знайти пункт Effects і вибрати Layer blur – ви можете змінювати значення у вигляді цифр. Результат буде м'якшим або стриманіше в залежності від вибраних параметрів. Якщо хочете отримати ефект туману, додайте налаштування Noize.

Плагін Mesh Gradient допоможе зробити барвистий градієнт досить швидко. Для початку потрібно встановити його та запустити. Після запуску ви побачите широке меню налаштувань - точки регулювання у плагіні називаються "Mesh points". За допомогою їх можна додавати кольори, регулювати насиченість і напрям градієнта. На одному фоні можна розмістити до 16 пікселів - це дозволяє зробити градієнт складним і унікальним. Кнопки в пункті Control Visibility полегшує роботу з основними точками, їх додаванням і контролем. Значення «None» призначене для попереднього перегляду — перед збереженням можна оцінити градієнт. Готовий ефект можна використовувати окремо або розмістити на фото. Як це зробити – читайте трохи нижче.

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

Градієнти чудово виглядають не тільки як окремий елемент дизайну - вони цікаво поєднуються із зображеннями та фото. Щоб додати градієнт до фото, потрібно розмістити його на робочій області. Зробити це можна кількома способами:

1. В основному меню у верхньому куті ліворуч вибрати пункт File, потім натиснути на Place Image. Так ви зможете швидко завантажити зображення з комп'ютера.
2. Натиснути Ctrl+Shift+K та вибрати потрібне фото.
3. Перенести фото з потрібної папки до робочої області.

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

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

Вивчайте 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. Для цього:

1. Зробіть перехід на головну сторінку Figma і натисніть на свій нікнейм у лівому верхньому кутку. У вас має відкритися можливість перейти в Community – натисніть на неї.
2. Виберіть у верхній частині вікна таб Plugins і введіть у пошуковий рядок назву нашого плагіна “uiGradient”.
3. Пошук підтягує результати, виберіть потрібний та клацніть на нього.
4. Зверху ми маємо кнопку Installed – натискайте.
5. Щоб плагін запрацював, потрібно перезапустити 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

1. Скопіюйте собі картинку з ілюстрацією, що представлена ​​нижче. Максимально точно відтворіть її, спираючись на вміння роботи з градієнтами, які ви отримали у цьому уроці;
2. Встановіть три плагіни для градієнтів, описаних у цьому уроці;
3. Намалюйте будь-які три фігури і спробуйте самі задати їм різні колірні градієнти. Після цього зробіть дублікати цих фігур і застосуйте до них плагін 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 - повний розбір інструменту та 5 способів

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

Ми розберемо кілька способів створення градієнта для ваших проектів:

• Очевидні (вбудовані у Figma)
• Не найочевидніші, але досить прості у використанні (за допомогою інструментів Figma)
• Плагіни
• Ресурси на просторах інтернету для створення градієнта

Розглянемо кілька інструментів та способів створення градієнта, які пропонує нам Figma і не лише.

1 спосіб - вбудовані інструменти зі створення градієнтів у Figma

Крок 1. Натискаємо на об'єкт і в бічному меню з'явиться рядок Fill для керування кольором та прозорістю:

Крок 2. Клацаємо на квадратик з кольором, і бачимо кілька варіантів заливання, серед яких є градієнти:

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

Крок 3. Вибравши якийсь градієнт, просто рухайте всі можливі повзунки, і ви побачите, як змінюється результат. Приклад у відео нижче:

2 спосіб - створюємо складний градієнт у Фігма

"Складний" не від того, що складно створюється, а від того, що містить більше кольорів і налаштувань.
Поїхали розбиратися! ??

Крок 1
Малюємо еліпси (або інші фігури)

Крок 2
Задаємо кожному еліпсу колір

Крок 3
Застосовуємо ефект Layer blur із числовим значенням 100 (цей показник можна варіювати, залежно від бажаного результату)

Радіємо результату?
Вийшов ось такий багатобарвний градієнт. Можна також застосувати плагін Noize для ефекту серпанку

? Цікаво, що цей градієнт створювався взагалі без застосування інструментів градієнта!

3 спосіб - градієнт на темному тлі з налаштуванням накладання шарів

Крок 1. Задаємо темному градієнту фону.

Крок 3
Задаємо фігурам колір.
Деяким фігурам можна встановити тип заливки “Радіальний градієнт” або зменшити прозорість

Крок 4.
Розмиваємо за допомогою ефекту Blur (розказано у способі 2 цієї статті)

Крок 5 - Пробуємо варіанти накладання для тонування та підсвічування: "Lighten", "Screen", "Color", "Exclusion" та ін.

4 спосіб - з використанням плагіна Mesh Gradient

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

5 спосіб - користуємося ресурсами на просторах інтернету

Градієнт – потужний ресурс, який задає настрій вашому проекту. Він часто буває незамінний при створенні:

• кнопок;
• м'якого накладання кольору на фото;
• ефектний фон банер;
• гарний фон проекту;
• абстрактних фігур

Всім приємного користування та крутих інтерфейсів!?

Хочеш навести лад у проектах? Працюй у O!task