Чтобы сделать градиент в фигме, выделите фигуру, кликните по образцу цвета в разделе Fill (заливка) на правой панели и в палитре выберите Gradient (градиент). Затем в выпадающем списке укажите тип градиента: Linear, Radial, Angular или Diamond, и настройте цвета, их положение и прозрачность.
Русского интерфейса у Figma нет. Сочетания клавиш даны для Windows: на Mac вместо Ctrl нажимайте Cmd, вместо Alt Option. Градиент в Figma доступен на любом тарифе, нужно только право редактировать файл.
- Виды градиентов в Figma
- Как сделать градиент: шаги
- Точки градиента: добавить, сдвинуть, удалить
- Направление градиента и размер
- Прозрачный градиент и градиент на фото
- Градиент на тексте и на обводке
- Несколько заливок на одном слое
- Как сохранить градиент в стиль и применить к другим объектам
- Сложные градиенты: шейдеры, плагины и анимация
- Частые ошибки
- Вопросы и ответы
- Как сделать прозрачный градиент в фигме?
- Как сделать градиент на фото в фигме?
- Как сделать градиент текста в фигме?
- Как применить один градиент к нескольким объектам?
Виды градиентов в Figma
В Figma четыре вида градиента.
| Тип | Как идёт переход цвета | Где пригодится |
|---|---|---|
| Linear (линейный) | по прямой линии от одного цвета к другому | фон баннера, кнопка, затемнение фото |
| Radial (радиальный) | от центра к краю: один цвет в середине, другой по краю | свечение, пятно света, объём круга |
| Angular (угловой) | по часовой стрелке от начальной точки | кольцо, индикатор, цветовой круг |
| Diamond (ромбовидный) | от центра в четыре стороны, ширина и высота меняются отдельно | блик, акцент в центре фигуры |
Для фона, кнопки или затемнения в макете сайта и приложения используйте линейный градиент, для свечения радиальный градиент. У углового градиента положение цветов определяет, насколько мягким или резким выйдет переход. Ромбовидный удобно растягивать в длинный блик: высоту и ширину ему задают по отдельности.
Как сделать градиент: шаги
Для первого градиента подойдёт любой слой: фигура, фрейм или текст. Если на холсте пусто, нарисуйте прямоугольник (R) или эллипс (O).
- Выделите объект на холсте.
- В разделе Fill на правой панели кликните по квадратику с цветом. Если заливки нет, сначала нажмите плюс: Figma добавит сплошной цвет.
- В открывшейся палитре (color picker) выберите Gradient.
- В выпадающем списке выберите тип: Linear, Radial, Angular или Diamond.
- Настройте цвета градиента и направление.
По умолчанию у градиента две точки цвета (color stops), то есть простой переход из двух цветов. Щёлкните по точке на полосе градиента и задайте ей оттенок: в палитре, кодом HEX, RGB или HSL либо пипеткой (I, на Mac Control+C или I), которая берёт цвет с любого слоя или фона текущей страницы. Прозрачность каждой точки меняет ползунок непрозрачности в той же палитре.
Точки градиента: добавить, сдвинуть, удалить
Новая точка появляется после щелчка в любом месте полосы градиента или по плюсу рядом с Stops (точки) в настройках. Перетаскивайте её вдоль полосы, а точное положение задавайте в процентах, например 0 % и 100 % у двух крайних точек. Лишнюю точку удаляет Delete или минус рядом с ней. Три-четыре цвета дают более сложный переход.
Направление градиента и размер
Flip gradient (отразить) меняет цвета местами, Rotate gradient (повернуть) меняет направление. Угол можно задать и на самом холсте: щёлкните по строке градиента на правой панели и перетащите точки прямо по фигуре, например тёмную в левый нижний угол, светлую в правый верхний. Размер градиента меняют ручками на холсте, например верхней белой ручкой с зажатым Shift.
Прозрачный градиент и градиент на фото
Для плавного перехода в прозрачность дайте обеим точкам один цвет и разную непрозрачность. Например, для мягкой тени под предметом подойдёт эллипс 210 × 19 px с линейным градиентом из чёрного #000000: 0 % непрозрачности у одной точки и 100 % у другой, а сверху размытие Layer blur 4.
Затемнение части фото, чтобы на нём читался текст или кнопка, делается второй заливкой того же фрейма:
- Выделите фрейм или фигуру с фото.
- Нажмите плюс в заливках: новый цвет ляжет поверх изображения.
- Если в поле рядом с образцом меньше 100 %, поставьте 100 %.
- Кликните по новому образцу и выберите Gradient.
- На полосе градиента в палитре левой точке задайте непрозрачность 0 %, правой 60 %.
- Зажмите Shift и потяните верхнюю белую ручку, чтобы затемнение заняло нужную часть кадра.
Отдельный прямоугольник поверх фото тоже даст такой эффект, но это лишний слой в панели Layers (слои).
Градиент на тексте и на обводке
Текст в Figma заливается так же, как фигура: создайте надпись инструментом Text (T) и в её заливке выберите Gradient. Цвет меняется у самих букв. Фон за надписью эта настройка не трогает: если хотите подложку, положите текст во фрейм и залейте фрейм.
С обводкой (stroke) порядок тот же. Нажмите Add stroke в разделе Stroke, кликните по её образцу и выберите Gradient. Толщину задаёт поле Weight в пикселях, положение меню Position: Inside, Center или Outside. У большинства фигур по умолчанию стоит Inside, у линий Center. Add stroke fill добавляет обводке второй цвет, но толщина и положение у них общие. Как собрать саму кнопку с обводкой и тенью, разобрано в статье как сделать кнопку в Фигме.
Несколько заливок на одном слое
У слоя может быть несколько заливок, и у каждой свои настройки: тип, цвет, непрозрачность, видимость. Сложные градиенты собирают стопкой: снизу сплошной цвет, над ним линейный, сверху полупрозрачный радиальный.
- Порядок меняют перетаскиванием: наведите курсор на левый край строки, появится ручка.
- Глаз рядом со строкой временно её скрывает, минус удаляет.
- Режим наложения (Blend mode) задаётся отдельно каждой строке в палитре цвета.
Верхний цвет закрывает нижние, пока сам не станет достаточно прозрачным. Чтобы нижние были видны, снизьте ему непрозрачность или сделайте часть его точек прозрачными.
Как сохранить градиент в стиль и применить к другим объектам
Если один градиент повторяется на кнопках и фонах, сохраните его в стиль сразу. Правку стиля Figma переносит на все объекты с этим стилем. Чтобы стиль был доступен команде в других файлах, его публикуют в библиотеку.
- Выделите фигуру с градиентом.
- Рядом с заголовком Fill нажмите Apply styles or variables (применить стили или переменные).
- Выберите New style or variable (новый стиль или переменная).
- Дайте стилю имя и при желании описание, нажмите Create style (создать стиль).
Чтобы применить его к другим объектам, отметьте их, щёлкните по той же иконке и найдите нужное имя во вкладке Libraries (библиотеки). Сохраняется вся стопка заливок, а не один цвет. Отвязать элемент можно иконкой detach style при наведении: градиент останется, но перестанет обновляться.
В переменную (variable) градиент целиком не сохранить: цветовая переменная хранит один сплошной цвет с непрозрачностью. Зато переменную можно поставить на отдельную точку. Откройте палитру, выберите значок Gradient, щёлкните по цвету точки в списке, перейдите во вкладку Libraries и укажите нужную. Так цвета градиента берутся из одного места: когда оттенок поменяют, точка обновится. Отвязать её можно через Detach variable при наведении на точку.
Для разового переноса быстро сработают клавиши. Щёлкните по строке градиента на правой панели, чтобы выделить свойство, нажмите Ctrl+C, отметьте другой слой и нажмите Ctrl+V.
Когда в выделении слои с разными цветами, на панели появляется блок Selection colors (цвета выделения). Там видны и сплошные цвета, и градиенты; значок прицела выделяет все слои с этим цветом, и их можно перекрасить разом.
Сложные градиенты: шейдеры, плагины и анимация
Для градиентной сетки (mesh), где цвета перетекают в нескольких направлениях, в Figma Design есть шейдерные заливки (Shader fill), пока в открытой бете. Готовые ищут во вкладке Tools на левой панели с фильтром Shader fill, применяют значком Shader fill после щелчка по образцу заливки, а новые создаёт агент Figma. Шейдер можно положить в стопку вместе с обычным градиентом и сохранить в стиль. Рисует их Figma через WebGPU, и система с браузером должны отвечать минимальным требованиям.
Плагины для градиентов ищут в той же вкладке Tools с фильтром Plugin и запускают кнопкой Run, одновременно работает один.
Анимированный градиент в прототипе получается с помощью Smart animate: Figma анимирует любую смену заливки, в том числе одного градиента на другой. Создайте два фрейма с одинаковым слоем, у которого разные градиенты, и свяжите их переходом Smart animate. Слой должен называться одинаково и лежать на том же месте в иерархии.
Частые ошибки
- Выбрали стиль прямо в палитре цвета и ждёте, что объект обновится вместе со стилем. Так копируется только цвет, а привязку даёт иконка Apply styles or variables.
- Не находите режим наложения у заливки со стилем. Такой заливке его не задать: поставьте режим всему слою или самому стилю.
- Ищете градиент среди переменных. Его место в стилях, переменная держит только цвет точки.
Как сохранить готовый макет, разобрано в статье как сохранить в Фигме. Если градиент нужно положить под вырезанный предмет, сначала уберите фон в фигме. А дизайнеру, который работает и в Adobe, пригодится градиент в Иллюстраторе.
Вопросы и ответы
Как сделать прозрачный градиент в фигме?
Чтобы получился плавный переход в прозрачность, поставьте обеим точкам один цвет, а непрозрачность разную: у одной 0 %, у другой 100 % или меньше. Ползунок непрозрачности есть в палитре у каждой точки.
Как сделать градиент на фото в фигме?
Добавьте фрейму с фото вторую заливку плюсом, переключите её на градиент и сделайте одну точку прозрачной. Градиент ляжет поверх изображения.
Как сделать градиент текста в фигме?
Выделите текстовый слой и залейте его градиентом, как фигуру. Цвет получат буквы.
Как применить один градиент к нескольким объектам?
Сохраните градиент в стиль и примените его через Apply styles or variables. Для одного слоя хватит копирования выделенной строки заливки.
