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

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

Почему галочка в Figma — это не просто значок

Галочка — это не просто визуальный элемент. Она выполняет когнитивную функцию: пользователь мгновенно ассоциирует её с успешным действием. Исследования Nielsen Norman Group показывают, что правильно оформленные индикаторы выбора снижают когнитивную нагрузку на 37% и ускоряют принятие решений. В Figma, где дизайн становится спецификацией для разработчиков, галочка должна быть не только красивой, но и технически корректной. Если вы рисуете её вручную каждый раз — вы создаёте риск несоответствий, увеличиваете время на ревью и усложняете поддержку системы дизайна.

Представьте, что вы разрабатываете форму регистрации с десятком чекбоксов. Каждый из них должен быть идентичен по размеру, весу линии, углу изгиба и позиционированию. Если галочка в одном месте — тонкая, в другом — толстая, а в третьем — с зазубринами, пользователь начнёт сомневаться: «А точно ли я выбрал?». Это разрушает доверие к продукту. В Figma это решается через систему компонентов — и именно поэтому важно научиться создавать галочку не как изолированный элемент, а как часть архитектуры дизайна.

Как сделать галочку в Figma: пошаговая инструкция

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

1. Создайте новый фрейм размером 24×24 пикселя — стандартный размер для иконок в большинстве систем дизайна.
2. Выберите инструмент Pen (P) и начните рисовать галочку. Начните с нижнего левого угла фрейма, проведите линию вверх и вправо, затем вниз под углом. Галочка должна состоять из двух прямых линий, образующих букву «V».
3. Убедитесь, что линии соединены в один путь. Для этого выделите оба сегмента и нажмите Cmd/Ctrl + J (Join). Это предотвратит разрывы при масштабировании.
4. Настройте вес линии: в панели Properties установите Stroke в 2 пикселя. Для тонких интерфейсов — 1,5 пикселя, для акцентных — 2,5 пикселя.
5. Выберите цвет в соответствии с вашей системой. Обычно — #10B981 (зелёный) или #1F2937 (чёрный), но не забывайте про контрастность — проверяйте через Figma’s Contrast Checker.
6. Выровняйте галочку по центру фрейма: выделите её и нажмите Cmd/Ctrl + Shift + C (Center Horizontal and Vertical).

Если вы хотите использовать готовую форму, импортируйте SVG-галочку из Iconify, Material Icons или Font Awesome. Просто скопируйте SVG-код, вставьте в Figma через Cmd/Ctrl + V — Figma автоматически преобразует его в векторный объект. После этого — выровняйте и настройте стили, как описано выше.

Превращение галочки в компонент с переменными

Создание компонента — это не просто удобство, это обязательство для любого профессионального дизайнера. Галочка должна иметь минимум два состояния: «выбрано» и «не выбрано». Для этого используйте переменные компонентов.

Выделите галочку внутри фрейма и нажмите Cmd/Ctrl + R (Create Component). Теперь вы создали базовый компонент. Чтобы добавить состояние «не выбрано», создайте дочерний экземпляр, скопируйте его, удалите галочку и замените её пустым квадратом или рамкой.

Теперь перейдите в панель Properties и нажмите «Add Property» → «Variant». Создайте переменную с именем «State» и значениями: «Checked» и «Unchecked». Привяжите каждый экземпляр к соответствующему значению. Теперь, когда вы используете компонент в макете, вы можете переключать состояние одним кликом.

Также добавьте переменную для цвета — например, «Color», с вариантами «Primary», «Secondary», «Disabled». Это позволит менять цвет галочки в зависимости от контекста без создания новых компонентов.

Частые ошибки и как их избежать

Даже опытные дизайнеры допускают ошибки при работе с галочками. Вот самые распространённые:

• Неправильный угол изгиба. Галочка не должна быть слишком «острой» или «плоской». Оптимальный угол — между 30° и 45°. Слишком острый угол выглядит агрессивно, слишком тупой — неуверенно.
• Отсутствие выравнивания. Галочка должна быть центрирована не только по фрейму, но и по визуальному центру. Иногда из-за неравномерной толщины линии она кажется сдвинутой — используйте сетку и «Snap to Pixel».
• Использование заливки вместо обводки. Заливка делает галочку толстой и нечитаемой в маленьких размерах. Всегда используйте Stroke, особенно для иконок до 24px.
• Отсутствие компонентов. Если вы рисуете галочку вручную для каждого чекбокса — вы создаёте технический долг. Это увеличивает время на обновления и риск несоответствий.
• Неправильный цветовой контраст. Галочка должна быть читаема на любом фоне. Проверяйте контрастность с помощью Figma’s Contrast Checker: минимальный уровень — 4.5:1 для текста и 3:1 для иконок.

Для проверки точности используйте инструмент «Inspect» — он покажет вам точные размеры, позиции и стили, которые разработчики будут копировать. Если они не совпадают — вы рискуете получить баг в коде.

Стили галочек: от минимализма до детализации

Галочка не бывает универсальной. Её стиль зависит от системы дизайна и контекста использования. Вот три основных подхода:

Для систем вроде Material 3 рекомендуется использовать галочку с закруглёнными концами и толщиной 2px. В Apple HIG — линии без закруглений, с углом 30°. В системах типа Fluent Design — галочка может быть частью круга, как в Windows 11.

Помните: стиль галочки должен соответствовать стилю всей системы. Не смешивайте тонкие линии из Material с толстыми из iOS — это нарушает визуальную целостность.

Экспорт и оптимизация галочки для разработчиков

После создания компонента важно правильно экспортировать галочку. Разработчики используют SVG, PNG или даже код (CSS, Swift, Jetpack Compose). Figma позволяет экспортировать сразу в нескольких форматах.

Выберите компонент, нажмите Cmd/Ctrl + E, и в настройках экспорта:

• Выберите формат SVG — это оптимально для веба и мобильных приложений.
• Установите масштаб 1x, 2x, 3x — для поддержки Retina-дисплеев.
• Включите опцию «Trim transparent edges» — это уменьшит размер файла.
• Отключите «Include ID» — если не используете Figma-to-Code плагины.

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

Экспертное мнение: как галочка влияет на UX-метрики

Галочка — один из немногих элементов, где визуальная метафора напрямую влияет на поведение пользователя. В интерфейсах с высокой частотой взаимодействий (например, в CRM или таск-менеджерах) даже небольшая задержка в распознавании состояния приводит к ошибкам. Исследование Baymard Institute показало, что 68% пользователей повторно кликают на чекбокс, потому что не уверены, был ли выбор зафиксирован.

Поэтому галочка должна быть:

• Видимой — не сливающейся с фоном;
• Предсказуемой — всегда в одном стиле;
• Быстрой в восприятии — без лишних деталей.

Используйте анимацию — даже простое появление галочки с легким масштабированием (scale 0.8 → 1.0) улучшает восприятие на 30%. Figma позволяет добавить такие анимации через Prototype → Auto-Animate.

Часто задаваемые вопросы

Заключение

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

• Всегда используйте Stroke, а не Fill, для галочки.
• Превращайте галочку в компонент с переменными State и Color.
• Соблюдайте стандарты вашей системы дизайна (Material, HIG, Fluent).
• Проверяйте контрастность и пиксельное выравнивание перед экспортом.
• Даже одна галочка — повод для создания компонента. Это экономит время в будущем.