Как в Figma сделать объёмный леденец
Коротко и ясно рассказываем, как быстро добиться интересного эффекта для вашего проекта.
![](https://248006.selcdn.ru/main/iblock/767/767f35fed385a658a45ee2f9bc3dad14/25c7488ccd01ef0d5fdf28b9731a68c7.png)
![](https://248006.selcdn.ru/main/iblock/767/767f35fed385a658a45ee2f9bc3dad14/25c7488ccd01ef0d5fdf28b9731a68c7.png)
Иллюстрация: Оля Ежак для Skillbox Media
В Figma есть много всяких эффектов, которые помогают дизайнерам сделать по‑быстрому что-то интересное и достаточно качественное для коммерческого проекта. В этой инструкции рассказываем, как сделать объёмный леденец.
Основной контур
- Сделайте фрейм любого цвета. Мы рекомендуем чёрный, чтобы яркие цвета с ним не смешивались.
- Перейдите в режим векторного редактора
, нарисуйте плавный крючок и нажмите кнопку Done. В боковой панели настроек в блоке Stroke укажите толщину обводки 50 и её цвет — белый #FFFFFF.
- Добавьте поверх крючка квадрат — он должен полностью перекрыть вашу фигуру. Затем сгруппируйте их так, чтобы на панели слоёв квадрат был выше крючка. На панели слоёв выделите крючок и нажмите
, чтобы сделать слой-маску. Должно получиться так, чтобы ваш квадрат стал заливкой крючка.
- Выделите квадрат, затем на боковой панели настроек в блоке Fill нажмите на образец цвета. В появившемся окне вместо Solid выберите Radial и добавьте на градиент четыре цвета — розовый #FF00B8, жёлтый #FEE300, оранжевый #FE5653, синий #0189BF. На холсте настройте градиент так, чтобы в верхней точке крючка был только розовый цвет, а в нижней — синий.
- На боковой панели настроек в блоке Effects нажмите плюсик, затем вместо Drop Shadow выберите Blur и нажмите
. В появившемся окне укажите значение 30.
Заливку контура можно было сделать и через обычный Stroke. Но в нашем случае получается резкий переход на жёлтом цвете, который сильно выделяется. С помощью слой-маски и размытия от этого можно быстро избавиться.
- Выделите группу со слой-маской на панели слоёв. На боковой панели настроек в блоке Effects нажмите плюсик, затем вместо Drop Shadow выберите Inner Shadow и нажмите
. В появившемся окне укажите X — 0, Y — 6, Blur — 25, цвет — #FFFFFF с непрозрачностью 50%.
Объём
- Добавьте в верхний конец крючка круг так, чтобы он продолжил форму контура.
- Выделите этот круг, затем на боковой панели настроек в блоке Fill нажмите на образец цвета. В появившемся окне вместо Solid выберите Radial и добавьте на градиент цвета, которые пересекаются с вашим кругом, — в нашем случае это оранжевый и жёлтый. На холсте настройте градиент так, чтобы он был как можно сильнее похож на конец вашего крючка.
- На боковой панели настроек в блоке Effects нажмите плюсик, затем вместо Drop Shadow выберите Inner Shadow и нажмите
. В появившемся окне укажите X — 7, Y — 4, Blur — 10, цвет — #FFFFFF с непрозрачностью 25%.
- Аналогичным образом сделайте круг для второго конца контура — изменится только цвет и форма круга.
Результат:
![](/upload/setka_images/06414609022023_accf102caaa970ce65d217b9ae9a8e9a57caa67c.jpg)
![](/upload/setka_images/14193802062022_93332d2c63ae51fe843eb0192ae360f05bf930b6.png)
Самые полные и полезные инструкции, которые помогут вам освоить все функции графического редактора.
![](/upload/setka_images/09295709082023_f820df9623f7d262298e5b6ae1c7aeda6fd0ee7b.png)
Как в Figma сделать что угодно
Каталог эффектов в Figma, которые помогут сделать ваш проект интереснее.
Больше интересного про дизайн — в нашем телеграм-канале. Подписывайтесь!