Как в Figma сделать градиент
В Фигме предусмотрено несколько вариантов заливки фона объекта:
- Сплошной цвет (Solid)
- Линейный градиент (Linear)
- Радиальный градиент (или круговой) (Radial)
- Угловой градиент (Angular)
- Алмазный градиент (Diamond)
- Изображение (Image)
Чтобы добавить заливку к объекту, выделите его и добавьте значение во вкладке Fill в правом окне с параметрами.
Для каждого вида градиента предусмотрены следующие настройки:
- Набор цветов. Вы можете добавить сколько угодно цветов в градиент, кликая на шкалу над палитрой
- Прозрачность для каждого цвета
- Расположение крайних точек градиента. Двигая ползунки вы можете настроить угол поворота градиента и скорость перехода от одного цвета к другому
Вы можете добавить к объекту несколько градиентов или сочетать заливку градиентом и другими вариантами, например, изображением.
Вы также можете применить градиент или любой другой вид заливке к группе объектов, но в таком случае вам будут недоступны настройки поворота градиента, и наклон будет строго по-умолчанию. Поэтому для распространения градиента на группу элементов есть резон настроить градиент на одном и скопировать его параметры на другие объекты.
Комментариев: 6
Добавить комментарий
Очень классная и полезная статья! Я по ней записала видео с красивыми градиентами в фигме: https://www.youtube.com/watch?v=7_rbJ7j9-8k
Всегда рады
А как добавить градиент к группе эментнов?
Выделить группу и добавить к ней заливку градиент. Однако учтите, что вы не можете настраивать положение градиента для группы, только для вложенных элементов — для каждого отдельно. Поэтому есть смысл создать стиль заливки и применять его, либо копировать свойства.
Как использовать стили: https://svgpng.ru/stili-figma/stili-v-figma/
Как копировать и применять свойства: https://svgpng.ru/figma/kak-v-figme-kopirovat-rasshirennye-vozmozhnosti/
Добрый вечер , а возможно ли сделать градиент для текста в фигме ?
Добрый вечер!
Конечно.
Вы можете
1) Выделить текстовый слой, выбрать свойство Fill и точно так же переключить на Linear, Radial, Angular или Diamond. А на самом тексте подвигать ползунки. Это самый простой и правильный способ
2) (Для более сложных заливок) использовать маски: https://svgpng.ru/figma/kak-v-figma-zalit-tekst-izobrazheniem-maski/