Тіні та розмиття у Figma: як налаштувати

Розповідаємо про базові ефекти та показуємо, як за дві хвилини зробити «матове скло».

Базових ефектів у Figma всього два – тіні та розмиття. Але за допомогою них дизайнери створюють елементи інтерфейсу, які дуже схожі на реальні аналоги та допомагають людям зрозуміти, як користуватись додатком. Про те, де знайти всі ці ефекти і як їх налаштувати читайте в нашій інструкції.

Тіні

Drop Shadow - зовнішня тінь, підходить для відокремлення об'єкта від фону. Inner Shadow - внутрішня, підходить для створення об'ємних об'єктів:

Щоб додати тінь, у розділі Effects натисніть плюсик. За замовчуванням Figma додасть звичайну тінь, але якщо натиснути на напис Drop Shadow, його меню можна змінити на Inner Shadow.

Базові налаштування у тіней однакові, але вони працюють трохи по-різному:

Blur – розмиття країв тіні.
Spread – розмір тіні.
X та Y — усунення щодо центру об'єкта. X - ліворуч і праворуч, а Y - вгору і вниз.
Також у тіні можна налаштувати її колір та непрозорість.
Усунення і розмір зовнішньої тіні може бути будь-якими, оскільки явних кордонів вона немає. У внутрішній тіні самі параметри обмежені самим об'єктом.

Також у тіні можна змінити колір та режим накладання. Працює це як у Photoshop — залежно від режиму та кольору тінь підлаштовуватиметься під фон:

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

Розмиття

У Figma є два види розмиття: Layer blur та Background blur. Налаштувати в них можна лише рівень розмиття, але він працює в цих режимах по-різному.

Щоб додати розмиття, у розділі Effects натисніть плюсик. Потім натисніть на напис Drop Shadow і у випадаючому меню виберіть Layer blur або Background blur.

Layer blur просто розмиває шар повністю залежно від вибраного значення в налаштуваннях.

Background blur працює трохи хитріше. Якщо просто вказати у нього рівень розмиття, то нічого не станеться. Але якщо в пункті Fill знизити непрозорість заливки, то фон під шаром із Background blur буде розмитий:

Не плутайте непрозорість шару (Layer) та заливки (Fill). Якщо ви зменшите непрозорість шару, то ефект Background blur працювати не буде.

Поєднання ефектів

У розділі Effects можна додати скільки завгодно різних ефектів: наприклад, кілька тіней та кілька розмиття. Завдяки цьому можна досягти цікавих результатів. Наприклад розглянемо, як зробити ефект матового скла.

1. Додайте на макет фотографію і поверх неї накладіть будь-яку фігуру: коло, квадрат, трикутник.
2. У налаштуваннях ефектів фігури додайте тінь з наступними налаштуваннями: X і Y - 12, Blur - 25, Spread - 2, непрозорість тіні - 25%.

3. У налаштуваннях ефектів фігури додайте Background blur із розмиттям 25.
4. Зменште непрозорість заливки фігури до 10%.
5. За бажанням можна додати обведення з непрозорістю 50%.

Якщо робити тінь чорною, а колір фігури білим, то ефект вийде недостатньо реалістичним. Краще використовувати основний колір фону, щоб зімітувати падаюче на ваше скло світло.