Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-21

1 <a>#Руководства</a>

2 <ul><li>15 ноя 2024</li>

3 <li>0</li>

4 </ul>Рассказываем о базовых настройках эффектов и показываем, как за две минуты сделать "матовое стекло".

5 Иллюстрация: Полина Честнова для Skillbox Media

6 Редактор. Пишет про дизайн, редактирует книги, шутит шутки, смотрит аниме.

7 Базовых эффектов в Figma всего два - тени и размытие. Но с помощью них дизайнеры интерфейсов создают стёкла и кнопки, которые очень похожи на реальные и помогают пользователям понять, как пользоваться приложением. О том, где найти все эти эффекты и как их настроить, - читайте в нашей инструкции.

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

9 Изображение: Skillbox MediaЧтобы добавить тень, в разделе Effects нажмите на +. По умолчанию Figma добавит обычную тень, но если нажать на надпись Drop Shadow, в выпадающем меню настройки можно изменить на Inner Shadow.

10 Базовые настройки у теней одинаковые, но работают они немного по-разному:

11 <ul><li>Blur - размытие краёв тени.</li>

12 <li>Spread - размер тени.</li>

13 <li>X и Y - смещение относительно центра объекта. X - влево и вправо, а Y - вверх и вниз.</li>

14 <li>Также у тени можно настроить её цвет и непрозрачность.</li>

15 </ul>Смещение и размер у внешней тени могут быть какими угодно, так как явных границ у неё нет. У внутренней тени те же параметры ограничены самим объектом.

16 Также у тени можно изменить цвет и режим наложения. Работает это так же, как и в Photoshop - в зависимости от режима и цвета тень будет подстраиваться под фон:

17 Обычно тени используют в интерфейсах, чтобы показать уровни взаимодействия кнопок или сделать их похожими на реальные аналоги. О том, как правильно сделать тени для вашего приложения, читайте в инструкции дизайнера Марии Булиной:

18 В Figma есть два вида размытия: Layer blur и Background blur. Настроить у них можно только уровень размытия, но работает он в этих режимах по-разному.

19 Чтобы добавить размытие, в разделе Effects нажмите на +. Затем нажмите на надпись Drop Shadow и в выпадающем меню выберите Layer blur или Background blur.

20 Layer blur просто размывает слой целиком в зависимости от выбранного значения в настройках .

21 Background blur работает немного хитрее. Если просто указать у него уровень размытия, то ничего не произойдёт. Но если в пункте Fill снизить непрозрачность заливки, то фон под слоем с Background blur будет размыт:

22 Не путайте непрозрачность слоя (Layer) и заливки (Fill). Если вы снизите непрозрачность слоя, то эффект Background blur работать не будет.

23 Изображение: Joel & Jasmin Førestbird / Unsplash / Skillbox MediaВ разделе Effects можно добавить сколько угодно разных эффектов: например, несколько теней и несколько размытий. Благодаря этому можно добиться интересных результатов. Для примера рассмотрим, как сделать эффект матового стекла.

24 Если делать тень чёрной, а цвет фигуры белым, то эффект получится недостаточно реалистичным. Лучше использовать основной цвет фона, чтобы сымитировать падающий на ваше стекло свет.

25 Самые полные и полезные инструкции, которые помогут вам освоить все функции графического редактора.

26 <a>Практический курс: "Figma с нуля до PRO" Узнать о курсе</a>