Круговые диаграммы в Figma


Для создания круговых диаграмм в Figma предусмотрен инструмент Arc. Применить его можно только к кругу, который вы можете создать с помощью инструмента Ellipse.

Эта функция доступна «из коробки» на всех тарифных планах и не требует установки плагина.

Чтобы сделать использовать Arc, создайте круг (с соотношение длины и ширины 1:1), и наведите на его курсор.

Arc в Фигме
Arc в Фигме

 

Arc в Figma

Вы увидите точку, расположенную у внешнего контура. Это точка старта (Start) разрыва. От этого места будет считаться угол арки. Его направляющая отмечена дополнительной точкой внутри.

Точка старта разрыва
Точка старта разрыва

 

Потянув за эту точку, вы создадите разрыв, а также увидите вторую точку — финиш разрыва (Sweep). При этом точка старта будет регулировать расположение разрыва, а точка финиша — его угол. Если вы будете изменять положение точки старта, положение точки финиша будет изменяться автоматически.

Чтобы сделать отверстие в центре круга, потяните за точку в центре (Ratio).

Точка изменения радиуаса отверстия
Точка изменения радиуаса отверстия
Готовая круговая диаграмма в Figma
Готовая круговая диаграмма в Figma

Чтобы сделать замкнутое кольцо, соедините точки старта (Start) и финиша разрыва (Sweep).

Для заливки можно использовать либо заливку (Solid), либо градиент Angular. 

Градиент для круговой диаграммы
Градиент для круговой диаграммы
Примеры круговых диаграмм Figma
Примеры круговых диаграмм Figma


Комментариев: 3
  1. Daedalus

    Не работает все что тут написано никакого кружка не появляется ни ARC

    1. Daedalus

      Извиняюсь, все норм :???:

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

        Рады, что ситуация прояснилась) Мы потихоньку дополняем все материалы видео, чтобы было нагляднее. А также добавлен раздел с вопросами и ответами на случай, если информации в руководствах недостаточно: https://svgpng.ru/voprosy-otvety/

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

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


👋 Курс дизайнера за полцены: сформируйте портфолио и найдите высокооплачиваемую работу. Помощь с трудоустройством!

По теме:


<