Як створити скляну іконку в Figma

Сьогодні у нашому новому уроці Фігма ми розкажемо як створити трендові у цьому та наступному році скляні елементи. Дві прості та швидкі інструкції вже у цій статті. Поїхали!

Створюємо додаткову фігуру

1. Створюємо додаткову фігуру і розміщуємо її за іконкою
2. Колір фігури бажано обрати яскравий, щоб був хороший контраст (на зображення колір - FE6E56 та лінійний FF25011

Змінюємо налаштування кольору

1. Колір іконки ставимо на 5%, додаємо обведення 1 px (у колір фігури та з насиченням 80%)
2. Фігуру (у нашому випадку еліпс) робимо на 80%

Додаємо ефекти

1. Тиснемо на нашу іконку і переходимо до Effects, обираємо Background Blur
2. В налаштуваннях Background Blur обираємо силу розмиття (на зображенні 30 рх)

Налаштовуємо тіні.

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

Експериментуємо з форматами іконок

Тестуємо різні варіанти ефекту та обираємо найбільш відповідний до загальної стилістики дизайну

Як зробити скляну іконку з плагіном

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

1. Знаходимо плагін Morph, в ньому переходимо на Glassy
2. Тиснемо на фігуру (іконку), яка приречена бути склом
3. Змінюємо налаштування плагіну й отримуємо круту плашку зі скляним ефектом.

⚡ Якщо тобі сподобався цей матеріал, підпишись на наші соціальні мережі Instagram / Facebook / Linkedin / Telegram. Там ти знайдеш більше цікавих матеріалів про дизайн.

🖤  Підтримати проект ←Банка Mono