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


В Фигме предусмотрено несколько вариантов заливки фона объекта:

  • Сплошной цвет (Solid)
  • Линейный градиент (Linear)
  • Радиальный градиент (или круговой) (Radial)
  • Угловой градиент (Angular)
  • Алмазный градиент (Diamond)
  • Изображение (Image)

Чтобы добавить заливку к объекту, выделите его и добавьте значение во вкладке Fill в правом окне с параметрами. 



Варианты заливки фона
Варианты заливки фона

Для каждого вида градиента предусмотрены следующие настройки:

  1. Набор цветов. Вы можете добавить сколько угодно цветов в градиент, кликая на шкалу над палитрой
  2. Прозрачность для каждого цвета
  3. Расположение крайних точек градиента. Двигая ползунки вы можете настроить угол поворота градиента и скорость перехода от одного цвета к другому
Добавление цветов в градиент
Добавление цветов в градиент

 

Настройка прозрачности точки
Настройка прозрачности точки

 

Настройка расположения градиента
Настройка расположения градиента

Вы можете добавить к объекту  несколько градиентов или сочетать заливку градиентом и другими вариантами, например, изображением. 

Градиент с изображением в Figma
Градиент с изображением в Figma

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

Градиент в Фирме для группы

Комментариев: 6
  1. Дарья

    Очень классная и полезная статья! Я по ней записала видео с красивыми градиентами в фигме: https://www.youtube.com/watch?v=7_rbJ7j9-8k

    1. SVGPNG.RU (автор)

      Всегда рады :idea:

  2. Даниил

    А как добавить градиент к группе эментнов?

    1. SVGPNG.RU (автор)

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

      Как использовать стили: https://svgpng.ru/stili-figma/stili-v-figma/
      Как копировать и применять свойства: https://svgpng.ru/figma/kak-v-figme-kopirovat-rasshirennye-vozmozhnosti/

  3. Natalia

    Добрый вечер , а возможно ли сделать градиент для текста в фигме ?

    1. SVGPNG.RU (автор)

      Добрый вечер!
      Конечно.
      Вы можете
      1) Выделить текстовый слой, выбрать свойство Fill и точно так же переключить на Linear, Radial, Angular или Diamond. А на самом тексте подвигать ползунки. Это самый простой и правильный способ
      2) (Для более сложных заливок) использовать маски: https://svgpng.ru/figma/kak-v-figma-zalit-tekst-izobrazheniem-maski/

Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:


По теме:


Бесплатные иконки

Векторные и растровые иконки, бесплатные для коммерческого использования

Анимированные SVG иконки Изометрические иконки