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




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

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

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

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

 

Arc в Figma

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

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

 

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

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

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

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

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

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


Помогла ли вам эта статья?

Вы уже голосовали
Комментариев: 8
  1. Daedalus

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

    1. Daedalus

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

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

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

  2. Индира

    Подскажите пожалуйста почему в место эллипса у меня ставится 8 угольник :sad:

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

      Честно говоря, могу лишь предположить, что вы используете инструмент Polygon)
      Можете подробнее описать порядок действий?

      1. Индира

        Нажимаю Эллипс и вместо круга он выдает 8 угольник. Даже в шрифтах где нет углов он автоматом добавляет углы.

  3. Аноним

    Не появляется точка Arc((

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

      Я попытался воспроизвести эту проблему и пришел к тому, что настройки модификаций эллипса не появляются, если он преобразован в шейп. К этому могло привести любое редактирование в режиме редактирования (добавление новых точек или изменение положения старых, например), или если была выполнена команда Flatten Selection (cmnd + e / cntrl + e).
      Тогда да, надо создавать новый эллипс.

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

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