Базовых эффектов в Figma всего два — тени и размытие. Но с помощью них дизайнеры создают элементы интерфейса, которые очень похожи на реальные аналоги и помогают людям понять, как пользоваться приложением. О том, где найти все эти эффекты и как их настроить, — читайте в нашей инструкции.
Тени
Drop Shadow — внешняя тень, подходит для отделения объекта от фона. Inner Shadow — внутренняя, подходит для создания объёмных объектов:
Чтобы добавить тень, в разделе Effects нажмите на плюсик. По умолчанию Figma добавит обычную тень, но если нажать на надпись Drop Shadow, в выпадающем меню его можно изменить на Inner Shadow.
Базовые настройки у теней одинаковые но они работают по разному:
- Blur — размытие краёв тени.
- Spread — размер тени.
- X и Y — смещение относительно центра объекта. X — влево и вправо, а Y — вверх и вниз.
- Также у тени можно настроить её цвет и непрозрачность.
Смещение и размер у внешней тени могут быть какими угодно, так как явных границ у неё нет. У внутренней тени те же параметры ограничены самим объектом.
Также у тени можно изменить цвет и режим наложения. Работает это как в Photoshop — в зависимости от режима и цвета тень будет подстраиваться под фон:
Обычно тени используют в интерфейсах, чтобы показать уровни взаимодействия кнопок или сделать их похожими на реальные аналоги.
