Тінь у Фігмі: як зробити красивий ефект від об'єкта у Figma

У Figma зручно створювати макети, окремі деталі — картки, кнопки та великі проекти. Онлайн-програма користується популярністю серед дизайнерів, розробників, маркетологів та інших спеціалістів. Її функціонал досить широкий. Ми вже писали про те, як малювати лінії, вирізати об'єкти та створювати градієнт. У цій статті розкриємо особливості накладання тіні від об'єкта чи фігури — намалювати гарну тінь не так вже й складно. Головне – вміти користуватися необхідними інструментами.

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

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

На панелі інструментів необхідно вибрати "Effects". Потім натисніть кнопку "+". Ви побачите напис "Drop shadow" - це означає "Зовнішня тінь". Вона встановлена ​​за замовчуванням та підходить не для всіх предметів. Наприклад, якщо фігура велика та має яскравий колір, тінь практично не буде видно. Спробуємо вибрати інший варіант.

Натисніть «Drop shadow», щоб побачити види тіней у Figma. У програмі можна редагувати прозорість, розмиття, положення, колір тіні. Вибір налаштувань не займе багато часу, якщо ви знатимете, чим вони відрізняються один від одного. Крім вже описаної вище зовнішньої тіні є внутрішня тінь або «Inner shadow». Вона падає всередину об'єкта і робить його ніби на рівень нижче, ніж загальне тло.

Навчитися працювати з Figma можна на онлайн-курсах. Перевірені варіанти від tutortop:

• "Основи Figma" від Нетології
• "Курс Figma" від Contented
• «Основи Figma» від Бруноїв
• "Веб-дизайнер" від Eduson Academy

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

• X = 0
• Y = 6
• Blur = 4
• Spread = 0
• Колір = 99CDEA
• Прозорість = 40%

Якщо робите тінь від об'єкта, прозорість має бути меншою, а розмиття — більшою. Спробуйте поекспериментувати і зробити дві однакові фігури, але з різними тінями — внутрішньою та зовнішньою. Ось що вийшло у нас:

Збереження тіні у Figma

У Фігмі є збереження стилю тіні для використання його в подальших проектах. Натисніть на значок із чотирма точками поряд з написом «Effects», потім – на плюс. Після цього ви можете зберегти її - треба ввести назву і вибрати Create style. Тепер створений та збережений стиль тіні з'явиться у правій панелі, натиснувши на чотири точки, внизу списку.

Використовувати тінь просто та в інших проектах. Зліва виберіть вкладку «Assets» і клацніть по значку книги. Подальший шлях - "Publish" - "Publish style only". Під час створення нового проекту та натискання на іконку книги ви зможете активувати зроблені раніше стилі.

Плагіни для накладання тіні у Фігмі

Через плагіни намалювати тінь для предмета ще простіше. Достатньо запустити його, виділити об'єкт та отримати готовий результат. Ці популярні плагіни допоможуть створити красиву та рівну тінь як для великих предметів, так і для невеликих деталей:

• Beautiful Shadows - підійде для плавних і м'яких тіней:
• Shadowkit - інструмент для роботи з складнішими, багатошаровими тінями, зручно використовувати для внутрішніх тіней;
• SmoothShadow - допомагає малювати глибокі тіні, є спеціальні криві лінії для точніших налаштувань розмиття, зміщення, деталізації.

Підсумки

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

Спеціально для вас ми зібрали окрему добірку кращих онлайн-курсів по Figma на ринку та порівняли їх за ціною, тривалістю та відгуками студентів.

Як зробити тінь у Figma

За допомогою інструменту Move Tool (Перемістити) можна вибрати об'єкт, для якого ви бажаєте створити тінь. У нашому прикладі таким об'єктом буде коло.

На панелі інструментів праворуч знайдіть слово Effects і клацніть на значок плюса поруч із ним.

Після цього в блоці з'явиться нове віконце Drop shadow. Це зовнішня (падаюча) тінь від об'єкта, яку програма виставляє за умовчанням. Зазвичай, така шаблонна тінь виглядає не дуже красиво. У нашому прикладі вона надто різка та маленька.

Стати графічним дизайнером, навчаючись на реальних завданнях

Щоб її змінити, потрібно дізнатися, які види тіней є у Figma і від яких параметрів залежить форма, розмиття, положення та колір тіні. Якщо натиснути на параметр Drop shadow, ви побачите список усіх ефектів.

• Drop shadow - Тінь, яка падає від об'єкта на тлі.
• Inner shadow - Тінь, яка падає всередину об'єкта, ніби він знаходиться глибше, ніж фон.
• Layer blur - Розмиття вибраного об'єкта.
• Background blur — розмиття фону за об'єктом.

Нас цікавлять лише перші два ефекти. На прикладі нижче видно, що вони відрізняються друг від друга.

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

професія | 20 місяців

графічний дизайнер з нуля до про

Стати дизайнером, який потрібен у маркетингу, PR, IT. Дамо не лише знання, а й реальний досвід у професії

Параметри тіней у Figma

Зміщення по осі X

Це переміщення об'єкта зліва направо. На прикладі нижче видно, як воно працює: що більше значення, то сильніше зміщується тінь.

Зміщення по осі Y

Працює так само, тільки тінь рухається зверху вниз.

Blur

Це міра розмиття тіні. Чим більше число, тим більше розмиття. У дизайні найчастіше застосовується ступінь розмиття до 60-70 пунктів, оскільки далі тінь стає погано помітною і може зробити візуально брудним фон.

Spread

Цей параметр зменшує або збільшує площу, яку займає тінь. За замовчуванням Spread дорівнює нулю. Якщо він негативний, то тінь буде меншою за об'єкт, а якщо позитивний — більше.

Колір

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

детальніше про те, як влаштовані цифрові коди, ми розповідаємо у цій статті

Прозорість

Тіні рідко бувають яскравими та суцільними. Зазвичай вони легкі та злегка помітні. Для створення такого ефекту потрібний параметр «Прозорість». Це число у відсотках, яке знаходиться поряд із позначенням кольору. Чим ближче параметр до 0%, тим прозоріша тінь, а чим ближче до 100%, тим вона щільніша. Зазвичай для тіней застосовується прозорість від 10 до 40%, але бувають і винятки.

Налаштування та плагіни

Ідеальної комбінації налаштувань, яка підходить абсолютно для всіх проектів, не існує.На темному тлі краще спрацює одна тінь, на світлому – інша. Спробуйте різні варіанти та зупиніться на тому, який вам більше подобається.

Але якщо вам не хочеться витрачати час підбір вручну, то завантажте один із тематичних плагінів для Figma. Їх можна знайти у розділі Resources → Plugins. Введіть у рядок пошуку слово Shadowsі система покаже всі плагіни, які підходять для роботи з тінню. Щоб запустити плагін, натисніть Run.

Плагіни працюють по-різному. Наприклад, Beautiful Shadows дозволяє створювати тінь, просто рухаючи два кружечки навколо об'єкта, а плагін Shadowkit містить готові добірки параметрів.

професія графічний дизайнер з нуля до про

Маркетинг, PR, IT - ми не знаємо, яку сферу ви оберете, коли станете графічним дизайнером. Але знаємо, що ви зможете ним стати, здобувши реальний досвід. Той, що оцінять роботодавці