Линейный градиент в Фигме

Градиент — это плавный переход между несколькими цветами.

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

Ты можешь создать новый слой заливки на шейп и она по умолчанию создастся линейной

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

Линейный градиент в Фигма

Линейный градиент в фигме создается на вертикальной оси. Ты можешь менять его местоположение на шейпе, соответственно, меняя внешний вид заливки просто потянув за края этой самой линии. Если в этот момент ты зажмешь пробел, то сможешь перемещать всю линию заливки не меняя ее углов.

Градиент создается из двух контрольных точек одного цвета. С одной стороны 100% прозрачность, с ругой 0%. Ты всегда можешь изменить эти параметры на линии прозначности. Конечно же, ты можешь и менять цвет контрольных точек, а значит и своего градиента. Тут все интуитивно понятно.

Можно добавлять новые точки на ось просто кликнув на нее, тем самым делая свою градиентную заливку боле разнообразной.  Чтобы удалить ненужные точки нажимай delete. Каждая точка в отдельности то же удобно настраивается, как по цвету, так и по прозрачности.

Кастомные точки на линии градиента


Перпендикулярный угол градиента к оси

Цвета в градиенте Figma пересекают его ось под прямым углом. Чтобы изменить это достаточно потянуть за неприметную точку , как показано на картинке и зажать alt. Так ты сможешь менять этот угол на нужный.

Дополнительные возможности работы с градиентом в Фигма

  • После того, как ты создал свой градиент — кликай enter или esc.
  • Выделенную контрольную точку можно смещать по оси при помощи стрелочек на клавиатуре
  • Когда меняешь угол градиента, при зажатом Shift  он будет меняться на 45 градусов. Точно так же, как при работе с пером.

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

Будет интересно знать как создавать размытый градиент в Figma

Оставьте комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *