Как в Figma сделать пластиковую иконку
2026-02-21 05:46 Diff

#Руководства

  • 22 фев 2023
  • 0

Коротко и ясно рассказываем, как быстро добиться интересного эффекта для вашего проекта.

Иллюстрация: Оля Ежак для Skillbox Media

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

В Figma есть много всяких эффектов, которые помогают дизайнерам сделать по‑быстрому что-то интересное и достаточно качественное для коммерческого проекта. В этой инструкции рассказываем, как сделать пластиковую иконку.

  • Сделайте квадрат с размерами 480×480 пикселей и скруглите ему углы на 60 градусов. На правой панели настроек в блоке Fill поменяйте заливку квадрата на тёмный цвет, например на #00202E с оттенком зелёного.
  • Сделайте копию квадрата так, чтобы она стояла на месте оригинала. На панели слоёв выделите квадрат, который находится ниже, и нажмите , чтобы сделать слой-маску. Переместите другой квадрат в появившуюся группу.
  • Выделите квадрат, затем на правой панели настроек в блоке Fill нажмите плюсик — появится ещё одна заливка. Нажмите на неё и в появившемся окне вместо Solid выберите Linear.
  • У появившегося градиента первым цветом сделайте белый. Линию градиента поставьте на квадрате так, чтобы она была направлена из левого верхнего угла в правый нижний.
  • У градиента в блоке Fill укажите непрозрачность 15%.
  • Drop shadow. X — 10, Y — 12, Blur — 28, чёрный цвет с непрозрачностью 31%.
  • Inner shadow. X — 18, Y — −9, Blur — 26, чёрный цвет с непрозрачностью 50%.
  • Inner shadow. X — −14, Y — 18, Blur — 45, чёрный #002C32 с непрозрачностью 90%.
  • Добавьте внутрь группы какую-нибудь иконку или текст.

Результат:

Скриншот: Skillbox Media

Самоучитель по Figma

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

Другие короткие инструкции по Figma


Научитесь: Figma с нуля до PRO Узнать больше