Дизайн
#Руководства

Как в Figma сделать объёмную фигуру из градиентов

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

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

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

Подготовка градиента

  1. Сделайте три квадрата с тремя цветами, которые образуют ваш градиент. В нашем примере это #5C2774, #335CC5 и #637FFD.
  2. Создайте прямоугольник, в боковой панели настроек зайдите в свойства его цвета и вместо Solid выберите Linear.
  3. Выделите образец цвета на градиенте и с помощью пипетки скопируйте цвет из квадрата. Повторите это три раза, чтобы у вас получился градиент.
  4. На прямоугольнике настройте градиент так, чтобы на нём не было резких переходов из одного цвета в другой.

Подготовка базовой фигуры

  1. Сделайте высокий прямоугольник и дважды кликните по нему, чтобы перейти в режим векторного редактирования.
  2. Наведите курсор на верхнюю грань прямоугольника, зажмите появившуюся точку посередине, вытяните её, чтобы получился угол, и нажмите Done.
  3. Выделите прямоугольник с градиентом, а затем — кликните на его заливку в свойствах цвета. Нажмите Ctrl (⌘) + C, чтобы скопировать градиент.
  4. Выделите вытянутый прямоугольник и нажмите Ctrl (⌘) + V. Затем — растяните свой градиент по высоте так, чтобы он занял всю фигуру.

Создание трёхмерного эффекта

  1. Скопируйте фигуру и поставьте её так, чтобы вершина острого угла совпала с вершиной тупого слева. То же самое сделайте и справа.
  2. Скопируйте основную фигуру через Ctrl (⌘) + C и вставьте на то же место через Ctrl (⌘) + Shift + V.
  3. Зажмите Ctrl (⌘) и выделите любую смещённую фигуру и основную. Затем на верхней панели нажмите правой кнопкой мыши на иконку  и переключите на . Повторите это с обеими смещёнными фигурами.
  4. В получившейся фигуре измените параметры градиента. У правой градиент должен быть темнее, а у левой — светлее.
  5. При необходимости можно изменить параметры градиента у верхушки фигуры — она должна оставаться заметной.
  6. По желанию добавьте фон с самым тёмным цветом градиента.

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

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

Курс

Figma с нуля до PRO

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

Узнать про курс

Учись бесплатно:
вебинары по программированию, маркетингу и дизайну.

Участвовать
Обучение: Figma с нуля до PRO Узнать больше
Понравилась статья?
Да

Пользуясь нашим сайтом, вы соглашаетесь с тем, что мы используем cookies 🍪

Ссылка скопирована