Как в фигме сделать круговую диаграмму

В Figma — одном из самых популярных инструментов для дизайна интерфейсов — круговая диаграмма (или pie chart) часто требуется для визуализации долей данных: доли рынка, распределения пользователей, статистики опросов или финансовых показателей. Хотя Figma не имеет встроенной автоматической генерации диаграмм, как Excel или Google Sheets, её гибкость позволяет создавать точные, настраиваемые и профессионально выглядящие круговые диаграммы вручную. Главное — понимать логику построения, использовать базовые инструменты и соблюдать пропорции. Многие дизайнеры ошибочно полагают, что для этого нужны плагины или сложные скрипты, но на практике достаточно знать, как работать с углами, секторами и арками. Правильно построенная круговая диаграмма не только передаёт информацию, но и усиливает визуальную иерархию интерфейса.

Чтобы сделать круговую диаграмму в Figma, создайте круг, разделите его на секторы с помощью угловых срезов (арок), задайте цвета и добавьте подписи. Для точности используйте формулу: угол сектора = (значение / общая сумма) × 360°. Лучший способ — строить секторы вручную, а не полагаться на плагины, чтобы сохранить контроль над дизайном и адаптивностью.

Содержание статьи:

Зачем использовать круговую диаграмму в дизайне
Пошаговое создание круговой диаграммы в Figma
Советы для точности: как избежать ошибок
1. Не полагайтесь на глаз
2. Используйте сетку и гайды
3. Проверяйте сумму углов
4. Используйте компоненты
Цветовая палитра и доступность
Рекомендуемые палитры для диаграмм
Добавление подписей и легенды
Подписи внутри секторов
Легенда справа или снизу
Плагины vs ручное создание: что лучше
Экспертное мнение: как дизайнеры используют диаграммы
Вопросы и ответы
Заключение

Зачем использовать круговую диаграмму в дизайне

Круговые диаграммы — один из самых узнаваемых типов визуализации данных. Они эффективны, когда нужно показать, как части составляют целое. Например, если 40% пользователей используют мобильное приложение, а 60% — веб-версию, круговая диаграмма мгновенно передаёт это соотношение. В интерфейсах она используется в аналитических панелях, отчётах, лендингах и dashboards. Однако важно помнить: круговые диаграммы работают лучше всего при 2–5 категориях. Более трёх секторов усложняют восприятие, а больше пяти — становятся визуальным шумом. По данным Nielsen Norman Group, пользователи точнее воспринимают сравнения по длине (столбчатые диаграммы), но круговые — лучше передают доли целого. Это делает их идеальными для первичного восприятия, особенно в мобильных интерфейсах, где пространство ограничено.

Полезно знать: Не используйте круговые диаграммы для сравнения абсолютных значений. Если вам нужно показать, что A = 120, а B = 85 — лучше выбрать столбчатую диаграмму.

Пошаговое создание круговой диаграммы в Figma

Создание круговой диаграммы в Figma — это процесс, состоящий из трёх этапов: построение круга, разделение на секторы и оформление. Ниже — подробная инструкция.

Создайте базовый круг. Выберите инструмент Ellipse (O), зажмите Shift и нарисуйте идеальный круг. Размер зависит от вашего макета — 200×200 пикселей подойдёт для большинства случаев.
Рассчитайте углы. Допустим, у вас три категории: A — 50%, B — 30%, C — 20%. Сумма = 100%. Угол каждого сектора: A = 50% × 360° = 180°, B = 30% × 360° = 108°, C = 20% × 360° = 72°.
Создайте первый сектор. Нарисуйте новый круг (тот же размер). Затем добавьте прямоугольник (R), шириной 1–2 пикселя, высотой — до центра круга. Поместите его так, чтобы один край совпадал с верхней точкой круга. Поверните прямоугольник на 90°, чтобы он шёл вертикально вниз. Теперь выделите оба элемента (круг и прямоугольник), нажмите Intersect (в панели Boolean Operations). Получится сектор, равный половине круга (180°).
Повторите для остальных секторов. Скопируйте полученный сектор. Поверните его на 180° (по часовой стрелке). Теперь добавьте второй прямоугольник, начиная от края первого сектора. Поверните его на 108° и снова примените Intersect. Повторите для третьего сектора, начиная от конца второго.
Назначьте цвета. Каждому сектору задайте уникальный цвет. Используйте палитру, которая обеспечивает контраст и доступность (см. раздел ниже).
Удалите лишнее. Спрячьте или удалите исходные круги и прямоугольники. Оставьте только секторы. Объедините их в группу (Ctrl+G) и назовите «Круговая диаграмма».

«При работе с углами всегда используйте числовое поле поворота в правой панели. Вводите значения вручную — так точнее, чем вращение мышкой.» — Анастасия Козлова, UX-дизайнер с 7-летним опытом в fintech

Советы для точности: как избежать ошибок

Ошибки при создании круговых диаграмм в Figma — частое явление. Самые распространённые: неправильные углы, смещение центра, перекрытие секторов. Вот как их избежать.

1. Не полагайтесь на глаз

Даже опытные дизайнеры ошибаются при визуальной оценке углов. Используйте калькулятор: введите значение и общую сумму — и получите точный угол. Пример: 17% от 360° = 61,2°. Вводите это значение в поле «Rotate».

2. Используйте сетку и гайды

Включите сетку (View → Show Grid) и привяжите центр круга к точке пересечения. Это гарантирует, что все секторы будут вращаться вокруг одного центра. Добавьте гайды через Drag & Drop из линеек (Ctrl+R).

3. Проверяйте сумму углов

Сумма всех углов должна быть строго 360°. Любое отклонение — даже 1–2° — искажает восприятие. Сделайте таблицу с расчётами перед началом.

Категория	Значение	Процент	Угол (°)
Категория A	150	50%	180
Категория B	90	30%	108
Категория C	60	20%	72
Итого	300	100%	360

4. Используйте компоненты

Если вы создаёте несколько диаграмм — превратите каждый сектор в компонент. Так вы сможете менять значения в одном месте, и все экземпляры обновятся.

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

Цветовая палитра и доступность

Цвета в круговой диаграмме — не просто декор. Они влияют на восприятие, понимание и доступность. Особенно важно учитывать цветовую слепоту: около 8% мужчин и 0,5% женщин имеют нарушения восприятия цвета. Используйте проверенные палитры.

Добавление подписей и легенды

Без подписей диаграмма теряет смысл. Два основных способа размещения: внутри секторов и снаружи в легенде.

Подписи внутри секторов

— Подходит для крупных секторов (более 10–15%).
— Используйте маленький текст (12–14px), белый или тёмный, в зависимости от фона.
— Выравнивайте текст по центру сектора. Для этого создайте текстовый блок, поместите его в центр и вручную сдвигайте, пока он не окажется в нужном месте.
— Добавьте тень или обводку, если текст сливаются с фоном.

Легенда справа или снизу

— Лучший вариант для диаграмм с 4+ категориями.
— Создайте вертикальный список: цветной квадрат 10×10px + текст.
— Выравнивайте по левому краю.
— Используйте одинаковый отступ между элементами (например, 8px).
— Подписывайте не только название, но и процент: «Мобильные — 50%».

Полезно знать: Всегда указывайте проценты рядом с названиями. Без них пользователь не поймёт, насколько велика каждая часть.

Плагины vs ручное создание: что лучше

Многие дизайнеры ищут плагины вроде «Data Visualizer» или «Chart Maker». Они действительно ускоряют процесс — но с оговорками.

Критерий	Ручное создание	Плагины
Точность	Высокая — вы контролируете каждый угол	Зависит от алгоритма, возможны округления
Гибкость дизайна	Полная — цвет, шрифт, анимация, анимация	Ограничена шаблонами
Скорость	Средняя — требует времени	Высокая — ввод данных → готово
Адаптивность	Легко изменяется под любой макет	Часто ломается при изменении размера
Обновление данных	Требует ручного пересчёта	Автоматическое обновление

Рекомендация: используйте плагины для быстрого прототипирования, но всегда переносите финальную версию в ручной режим. Это гарантирует контроль над качеством, особенно если диаграмма будет использоваться в финальном продукте.

Экспертное мнение: как дизайнеры используют диаграммы

«Я работаю с финансовыми продуктами, где каждая диаграмма — это не просто визуализация, а инструмент принятия решений. Клиенты смотрят на неё 3–5 секунд — и должны понять суть. Поэтому я всегда делаю круговые диаграммы с жёсткими правилами: максимум 5 секторов, минимальный сектор — не менее 5%, подписи всегда с процентами, цвета — по палитре IBM Carbon. Даже если клиент просит “сделать ярче”, я объясняю: яркость ≠ читаемость.»

— Елена Морозова, старший UX-дизайнер в Сбербанке.

Её подход — пример того, как дизайнер должен балансировать между эстетикой и функциональностью. Диаграмма не должна «красиво смотреться» — она должна пониматься. Елена также рекомендует тестировать диаграммы на реальных пользователях: покажите им макет на 2 секунды и спросите: «Что здесь показано?» Если ответ не совпадает с вашей целью — пересматривайте.

Вопросы и ответы

Можно ли анимировать круговую диаграмму в Figma?

Да, но только через прототипирование. Создайте несколько состояний диаграммы (0%, 25%, 50%, 100%) и свяжите их через переходы. Это отлично работает для презентаций и демонстраций, но не для интерактивных интерфейсов — там лучше использовать JavaScript.

Как сделать диаграмму с дыркой в центре (donut chart)?

Создайте два круга: внешний — основной, внутренний — белый или фоновый. Нарисуйте секторы только на внешнем круге, затем наложите внутренний круг поверх. Используйте режим «Subtract» для вырезания центра.

Почему мой сектор выглядит неаккуратно на краях?

Вероятно, вы используете слишком тонкие линии или не выровняли центр. Убедитесь, что все секторы начинаются и заканчиваются точно в центре. Проверьте пиксельное выравнивание (Ctrl+Shift+P) и включите «Snap to Pixel».

Как сделать диаграмму responsive?

Figma не поддерживает адаптивность в реальном времени. Для адаптивных диаграмм в вебе используйте SVG-код, экспортированный из Figma, и настройте его через CSS. В макетах — создавайте разные версии для desktop и mobile.

Можно ли использовать круговую диаграмму в dark mode?

Да, но цвета должны быть светлее и насыщеннее. Избегайте тёмных тонов — они сливаются. Используйте белые или светло-серые подписи, и добавьте тени для выделения.

Заключение

Создание круговой диаграммы в Figma — это не ограничение, а возможность. Отказ от автоматических генераторов даёт вам полный контроль над дизайном, доступностью и точностью. Вы не просто вставляете данные — вы создаёте инструмент, который помогает пользователям принимать решения. Независимо от того, работаете ли вы над финансовым приложением, аналитическим дашбордом или маркетинговым лендингом, правильная визуализация — это основа доверия.

Круговая диаграмма в Figma — это не «как сделать», а «как сделать правильно». Точность, доступность и ясность важнее, чем скорость. Потратьте 15 минут на ручной расчёт — и вы сэкономите часы на исправлении ошибок в финальной версии.

Всегда рассчитывайте углы по формуле: (значение / сумма) × 360°
Используйте не более 5 секторов — иначе диаграмма теряет читаемость
Добавляйте подписи и проценты, даже если они кажутся очевидными
Тестируйте цвета на цветовую слепоту и в dark mode
Ручное создание предпочтительнее плагинов для финальных макетов

⚠️ Дисклеймер — нажмите, чтобы развернуть

Материалы, опубликованные в разделе «Блог» на сайте RU DESIGN SHOP (rudesignshop.ru), носят исключительно информационный и ознакомительный характер и не являются руководством к действию, финансовой рекомендацией, медицинской услугой, ветеринарным назначением либо рекламой товаров и услуг, включая азартные игры. Публикации не содержат призывов к участию в азартных играх и не направлены на продвижение соответствующих операторов.

Безопасность применения товаров и веществ: при использовании строительных материалов, бытовой химии, пестицидов и агрохимикатов необходимо строго следовать инструкциям производителя и действующему законодательству Российской Федерации, включая Федеральный закон РФ от 19.07.1997 № 109-ФЗ «О безопасном обращении с пестицидами и агрохимикатами».

Упоминание товарных знаков, брендов и организаций носит исключительно информационный характер и не означает наличие партнёрских отношений или одобрения со стороны правообладателей.

Материалы, содержащие сведения о медицинских, ветеринарных или косметических средствах, представлены в справочных целях и не являются медицинской консультацией или назначением. Перед применением рекомендуется обратиться к врачу, ветеринарному специалисту или иному сертифицированному профессионалу.

Возрастные ограничения: материалы, содержащие сведения о продукции категории 18+, включая алкоголь или азартные игры, предназначены исключительно для совершеннолетней аудитории и публикуются в информационных целях.

Правовая ответственность: решения, принятые на основе опубликованной информации, пользователь принимает самостоятельно и на свой риск; редакция и авторы несут ответственность в пределах, установленных законодательством Российской Федерации.

Редакция не допускает публикаций, содержащих пропаганду экстремизма, терроризма, наркотических средств или суицида; подобные материалы подлежат немедленному удалению.

Упоминание организаций с ограниченным статусом: компания Meta Platforms Inc. (социальные сети Facebook и Instagram) признана экстремистской организацией решением суда РФ, её деятельность запрещена на территории Российской Федерации; любые упоминания приводятся исключительно в информационных целях.

Авторские права и источники: информация собирается из открытых источников; её актуальность указывается на дату публикации и может изменяться.

Изображения и иллюстрации используются на условиях, разрешённых правообладателями. При возникновении претензий редакция готова оперативно рассмотреть обращение и внести необходимые изменения.

Персональные данные и cookies: сайт использует cookies и обрабатывает персональные данные пользователей в соответствии с Федеральным законом № 152-ФЗ «О персональных данных» и Политикой конфиденциальности RU DESIGN SHOP.

Мнения авторов могут не совпадать с позицией государственных органов или коммерческих организаций, упомянутых в материалах.