Найти тему

Неоморфизм в Figma

НеоМорфизм, что это? Нет к фильму Матрица, он не имеет никакого отношения. 🤪😁

Ставя ❤️и подписываюсь, ты делаешь доброе дело и мотивируешь меня снимать чаще #tutorial

Этот эффект появился ещё #tutorial 19, но популярность набирает только сейчас. Помогает повторить объемность интерфейсов. Итак как его сделать, я работаю в #figma.

1. Создаём фрейм, на нем пр#figma. ник. Фон фрейма: 181818, заливка любая, меня 272727, радиус скругления 90°.

2. Создаём 2 внешние тени Drop Shadow.

Первая с параметрами: x -25, y - 25, BLUR 60, цвет 383838, прозрачность 30%. Вторая тень с параметрами: x 25, y -25, BLUR 60, цвет 000000, прозрачность 30%.

3. Меняем заливку фигуры на цвет фона, у меня 181818

4. Чб добавить эффект вогнутости, копируем фигуру и вставляем ровно над первой. Далее меняем у второй фигуры тени с внешних на внутренние (inner shadow). BLUR меняем с 60 на 30.

Светлые кнопки:

1. Создаём фрейм, на нем прямоугольник. Фон фрейма: ECF0F3, заливка любая, меня CDE1EF, радиус скругления 90°.

2. Добавляем 2 внешние тени. Первая с параметрами: x -18, y - 18, BLUR 30, цвет FFFFFF, прозрачность 100%. Вторая тень с параметрами: x 18, y 18, BLUR 30, цвет D1D9E6, прозрачность 100%.

3. Меняем цвет заливки фигуры на ECF0F3.

4. Копируем кнопку, ставим вторую ровно над первой, и меняем у второй внешние тени на внутренние.

Сохраняйте, делитесь результатами, нужны ещё такие tutorial.

Видео инструкцию смотри в моем инстаграм @wow.ksushka