Как сделать градиент в figma

Если нужно быстро понять, как сделать градиент в figma, начните с самой простой заливки и сразу проверьте, как цвет выглядит на вашем объекте. В Figma градиент задаётся через Fill, а дальше вы вручную управляете точками перехода, направлением и прозрачностью. Это удобно и для фонов, и для кнопок, и для декоративных фигур.

Выберите объект и откройте заливку

Сначала выделите слой, к которому хотите применить переход. Это может быть прямоугольник, текст, эллипс или векторная фигура. Затем в правой панели найдите раздел Fill и добавьте новую заливку, если её ещё нет.

Дальше нажмите на тип заливки и переключите его с Solid на один из вариантов градиента:

• Linear — линейный переход по прямой;
• Radial — переход от центра к краям;
• Angular — переход по кругу, как сектор;
• Diamond — ромбовидное распределение цвета.

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

Настройте цвета и направление перехода

Чтобы как сделать градиент в figma без лишней путаницы, работайте по шагам: сначала задайте крайние цвета, затем подстройте угол и позиции маркеров. В линейном варианте важно направление линии — оно показывает, куда идёт переход. Потяните линию мышью прямо на холсте, чтобы развернуть её горизонтально, вертикально или по диагонали.

Ключевые действия здесь такие:

• Кликните по левому или правому маркеру и выберите цвет;
• Меняйте точку на шкале, чтобы сдвигать зону цвета;
• Настраивайте прозрачность в палитре, если нужен мягкий уход в фон;
• Добавляйте промежуточные точки, когда двух цветов недостаточно.

Если градиент применяется к тексту, убедитесь, что текстовый слой действительно выделен целиком. Иногда новички меняют заливку у контейнера, а не у самого текста. Для сложных макетов полезно дублировать объект и сравнивать варианты рядом, чтобы не потерять читаемость.

Используйте градиент для разных задач

Один и тот же приём можно применять по-разному. Линейный вариант подходит для подложек и карточек, радиальный — для подсветки центра, а угловой — для декоративных акцентов. Если вы оформляете интерфейс, следите, чтобы переход не мешал иконкам и тексту.

Для аккуратного результата полезно помнить несколько ограничений:

• На маленьких объектах слишком сложный переход выглядит грязно;
• Сильный контраст может ухудшить читаемость;
• На прозрачных слоях лучше проверять фон под объектом;
• Если цветы близки по тону, разница может быть почти незаметной.

Когда нужно быстро повторить стиль, копируйте заливку с одного слоя на другой через пипетку или дублирование объекта. Так проще сохранить одинаковое направление и набор оттенков. Если вы делаете несколько экранов, держите одни и те же значения в пределах всей системы, иначе переходы будут выглядеть случайными.

Проверьте результат и исправьте частые ошибки

После настройки уменьшите масштаб и посмотрите на объект в общем макете. Градиент может хорошо выглядеть в крупном размере, но теряться в реальном интерфейсе. Если переход слишком заметный, ослабьте насыщенность или сократите разницу между цветами.

Полезная проверка простая: временно поместите фигуру на светлый и тёмный фон. Так вы увидите, не ломается ли изображение на разных подложках. Если заметны полосы, попробуйте добавить промежуточную точку или изменить прозрачность крайних маркеров.

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