Градиент фигма: Как в Figma сделать градиент |

Содержание

Как в Figma сделать анимированный градиент / Skillbox Media

Дизайн

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

14 окт 2022
0

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

Vkontakte

Twitter

Скопировать ссылку

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

Вячеслав Лазарев

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

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

В этой инструкции мы будем использовать вариативные компоненты. Даже если вы ими раньше не пользовались, вам это не помешает сделать анимированный градиент. Но лучше, если вы заранее разберётесь, как работает прототипирование в Figma:

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

Выделите первый вариант компонента и на правой панели настроек откройте Prototype. Затем наведите курсор на компонент, зажмите появившийся кружок и перетащите его на следующий слой, чтобы появилась стрелка.
В появившемся окне в блоке Interaction details вместо On click укажите After delay и поменяйте задержку на 1 ms. В блоке Animation вместо Instant укажите Smart animation и поменяйте продолжительность на 800 ms.
Сделайте то же самое с остальными вариантами текста. Последний вариант должен быть связан с самым первым.
Добавьте на макет фрейм, залейте его чёрным и добавьте в него копию любого варианта текста.
Нажмите кнопку Play в верхнем левом углу и проверьте результат.

Результат:

Больше о Figma

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

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

Vkontakte

Twitter

Скопировать ссылку

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

Креативное агентство JKR и Кейт Опперманн создали брендинг для Stella Artois
03 апр 2023

Илон Маск представил пиво, вдохновлённое дизайном электромобиля Tesla Cybertruck
03 апр 2023

МТС меняет позиционирование — обновили логотип
31 мар 2023

Понравилась статья?

Да

Как сделать градиент в Figma – Медиа Contented

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

Для начала создадим новую рабочую область. Для этого нажимаем Drafts → + → New design file:.

В открывшемся файле для тренировки создадим простую геометрическую фигуру. Например, прямоугольник: Shape tools → Rectangle.

У любой фигуры в Figma есть цвет обводки и цвет заливки. Каждый из них может быть градиентным. Для удобства разберем нашу тему на примере цвета заливки. Так мы лучше поймем различия между разными видами градиента.

Для начала создадим простой градиент, состоящий из двух цветов. Выберем наш прямоугольник и на панели справа кликнем на маленький квадратик в блоке Fill (Заливка). Нажимайте именно на квадратик, а не на код цвета, который написан рядом с ним. Рядом откроется палитра цветов.

В левом верхнем углу палитры кликаем на слово Solid (Заливка). Появляется небольшой выпадающий список, в котором и собраны градиенты.

Вот какие виды градиентов из списка нас интересуют.

Linear (линейный). В нем цвета сменяют друг друга последовательно, как бы по прямой линии, без закруглений и искажений. После нажатия на слово Linear на нашем прямоугольнике появятся две точки, которые будут отвечать за два цвета будущего градиента. Поменять оттенки можно на палитре, кликая на каждый из цветов и выбирая для него нужные значения.

Radial (радиальный). В этом случае цвета градиента сменяют друг друга в форме круга: один цвет в центре, а другой на периферии.

Angular (угловой). В этом случае внутри фигуры создается угол, с одной стороны от которого находится первый цвет, с другой – второй, а в пространстве вокруг цвета плавно переходят друг в друга.

Diamond (кристалл). Первый цвет здесь формирует четырехгранный кристалл, а второй растягивается вокруг него.

Логика настройки всех видов простых градиентов в Figma одинаковая:

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

В Figma можно создавать и сложные градиенты, состоящие из трех и более цветов. Для их получения выбираем нужный вид градиента из перечисленных выше и кликаем на полоску между двумя цветами на палитре. Сколько кликов — столько промежуточных окошек цвета появится. Каждое из них можно настроить на свое усмотрение.

Если стандартных возможностей программы для вас уже мало и хочется попробовать что-то необычное, вы можете установить плагин для создания градиента. Плагин — это сторонняя программа-расширение, которая дает Figma больше возможностей.

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

Существуют десятки плагинов для создания градиентов. Узнать о них больше можно на официальной платформе FigmaCommunity. Здесь собраны дополнения для решения самых разных задач от UI-дизайна до иллюстрации и анимации.

Плагины в Figma запускаются так:

В верхнем меню программы нажимаем на иконку Resources (Ресурсы), он находится справа от иконки Text.
В открывшемся окне переходим на вкладку Plugins (Плагины).
Набираем название нужного плагина в строке поиска. Если плагин существует, он появится ниже в результатах поиска.
Нажимаем Run (Запустить), чтобы использовать плагин.

Градиенты — Руководство Figma — Дизайн+Код

Добавить в избранное

Мы рассмотрим все различные способы использования градиентов в вашей работе, а также методы их создания

Руководство Figma

The Figma Инструмент проектирования