Как рисовать иконки в фигма

Как рисовать иконки в Figma — это не просто технический навык, а системный подход к созданию визуальных элементов, которые должны быть понятны, масштабируемы и согласованы с брендом. Многие дизайнеры сталкиваются с размытостью иконок на разных экранах, несоответствием стиля между элементами интерфейса или потерей пропорций при изменении размера. Решение — не в инструментах, а в методике: соблюдение сетки, использование компонентов, работа с пиксель-перфекшном и строгая стандартизация. Главная рекомендация: всегда создавайте иконки на сетке 24×24 или 20×20 пикселей с выравниванием по пикселям, используйте компоненты с вариантами размеров и сохраняйте стили в библиотеке для единого визуального языка.

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

Основы создания иконок: сетка, пропорции и пиксель-перфекшн

Первый и самый важный этап — выбор базовой сетки. Большинство современных систем иконок, включая Material Design, Apple Human Interface и Fluent Design, используют сетку 24×24 пикселя как стандарт. Это не случайно: 24 делится на 2, 3, 4, 6, 8 и 12 — что позволяет точно выстраивать формы без дробных пикселей. Для более мелких элементов (например, в навигации) подойдёт сетка 20×20, а для сложных иконок с детализацией — 32×32.

В Figma включите сетку через View → Show Grid и установите шаг 1 пиксель. Затем включите Snap to Grid (View → Snap to Grid) и Snap to Pixel (View → Snap to Pixel). Эти функции — ваша страховка от размытости. Без них даже идеально нарисованная линия может оказаться на полпикселя смещённой, что приведёт к нечёткому краю на экранах с низким DPI.

Создавайте иконки только в пределах базовой сетки. Не рисуйте линии толщиной 1.5 пикселя — это невозможно отобразить чётко. Вместо этого используйте 1 или 2 пикселя. Например, линия в иконке «меню» (гамбургер) должна быть 2 пикселя толщиной, с отступом 5 пикселей между линиями — так она будет выглядеть одинаково на всех устройствах.

Работа с компонентами: создание масштабируемой системы

Один из самых частых ошибок — рисовать каждую иконку отдельно. Такой подход приводит к хаосу: разные размеры, разные стили, разные цвета. Решение — компоненты.

Создайте базовый компонент иконки в размере 24×24. Выделите все элементы, нажмите Ctrl+Alt+C (Cmd+Option+C на Mac) и задайте имя, например, «Icon/Plus». Теперь, когда вы создадите экземпляр, вы сможете менять его размеры через Instance Properties — Figma автоматически масштабирует форму, сохраняя пропорции.

Но масштабирование — не всегда решение. Для иконок 16×16, 20×20 и 24×24 рекомендуется создавать отдельные варианты. Почему? Потому что при уменьшении до 16 пикселей детали теряются: линии смыкаются, углы становятся размытыми. Вместо того чтобы просто уменьшать, перерисуйте иконку с учётом ограничений малого размера — упростите форму, увеличьте толщину линий, уберите мелкие детали.

Используйте компоненты с вариациями (Variant). В Figma создайте один компонент, затем добавьте варианты по параметру «Size»: 16, 20, 24, 32. Это позволяет дизайнерам и разработчикам выбирать нужный размер из одного источника, не рискуя нарушить стилистику.

Стили и библиотеки: как обеспечить единообразие

Цвет, толщина линий, скругления — всё это должно быть стандартизировано. Создайте в Figma стили для:

— Stroke: толщина 1.5 или 2 пикселей, цвет — из цветовой палитры бренда (например, «Primary 600»).
— Fill: для заполненных иконок используйте только цвета из библиотеки, не допускайте «ручного» выбора.
— Effects: тени и свечения в иконках — редкость. Если вы используете их, ограничьтесь одним типом (например, «Soft Shadow») и добавьте в стили.

Вынесите все стили в отдельную библиотеку — например, «Design System — Icons». Поделитесь ею с командой через Figma Community или Team Library. Это гарантирует, что даже новый дизайнер не создаст иконку с толщиной 1.7 пикселя и цветом #4A90E2 вместо #4A90E0.

Используйте Figma’s Auto Layout для группировки элементов внутри иконки. Например, если иконка состоит из двух линий (как «плюс»), оберните их в Auto Layout с выравниванием по центру. Это позволит легко менять размеры без потери симметрии.

Общие ошибки и как их избежать

Ошибка №1: Иконка не соответствует размеру. Дизайнер создаёт иконку 24×24, а разработчик использует её в 16×16 — результат: размытые края и потеря смысла. Решение: создавайте варианты размеров и не используйте масштабирование без проверки.

Ошибка №2: Несогласованная толщина линий. Одна иконка — 1.5 пикселя, другая — 2. Это нарушает визуальный ритм. Решение: используйте стили и не позволяйте ручное изменение stroke.

Ошибка №3: Избыточная детализация. Иконка «документ» с тенью, складками и текстом внутри — это не иконка, это миниатюра. Иконка должна быть узнаваемой на 16 пикселей. Если вы не можете распознать форму за 1 секунду — упрощайте.

Ошибка №4: Неправильное выравнивание. Линии не центрированы, угол смещён на 0.5 пикселя — это заметно на Retina-экранах. Решение: включите Snap to Pixel и используйте «Align to Pixel Grid» в свойствах объекта.

Экспертное мнение: как работают команды в крупных продуктах

В Тинькофф, например, команда дизайна использует Figma с собственной библиотекой «Tinkoff Icons», где каждая иконка проходит через 3 этапа: дизайн → тест на читаемость (включая A/B-тесты с пользователями) → верификация разработчиками. Иконки проверяются на:

— читаемости на экранах iPhone 8 и Samsung Galaxy S10;
— контрастности (соотношение 4.5:1 по WCAG);
— скорости загрузки (вес SVG не превышает 1 КБ).

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

Вопросы и ответы: самые частые вопросы о создании иконок в Figma

• Как правильно экспортировать иконки для разработчиков? Экспортируйте как SVG, а не PNG. SVG масштабируется без потерь и имеет меньший вес. В настройках экспорта выберите «Optimize SVG» — это уберёт лишние метаданные. Не экспортируйте с филлом, если иконка должна наследовать цвет из интерфейса — оставьте только stroke.
• Можно ли использовать иконки из сторонних библиотек (например, Material Icons)? Можно, но только с оговорками. Скачайте SVG, импортируйте в Figma, убедитесь, что они соответствуют вашей сетке и стилю. Часто сторонние иконки имеют разную толщину линий — их нужно унифицировать. Лучше — создавать свои, даже если это займёт больше времени.
• Как сделать иконку адаптивной под тёмную и светлую темы? Используйте компоненты с вариантами по теме. Создайте два варианта: «Icon/Plus/Light» и «Icon/Plus/Dark». Привяжите цвет stroke к переменной (например, $color-text-primary). При смене темы цвет автоматически изменится.
• Как проверить, что иконка читаема? Закройте глаза, откройте их — и сразу узнайте, что это за иконка. Если нет — упростите. Также протестируйте на чёрно-белом экране (включите «Grayscale» в Figma). Если форма не сохраняется — значит, она слишком сложная.
• Нужно ли рисовать иконки вручную, или можно использовать AI? AI может помочь с генерацией базовых форм, но не заменяет ручную доработку. Иконки — это символы, а не изображения. Они требуют точности, смысла и культурной адаптации. AI может создать «круг с линиями», но не поймёт, что «плюс» должен быть симметричен, а «дом» — иметь крышу, а не просто треугольник.

Заключение

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

Практически все крупные продукты — от Google до Яндекса — используют одинаковые принципы: минимальная детализация, строгая сетка, компоненты и автоматизированная проверка. Это не ограничивает креативность — наоборот, даёт свободу: вы больше не тратите время на согласование мелочей, а сосредоточены на решении пользовательских задач.

• Всегда используйте сетку 24×24 пикселей и включайте Snap to Pixel.
• Создавайте иконки как компоненты с вариантами размеров — 16, 20, 24, 32.
• Привязывайте цвета и толщину линий к стилям, а не кручению вручную.
• Упрощайте иконки для малых размеров — не масштабируйте, а перерисовывайте.
• Проверяйте читаемость и контрастность — иконка должна быть узнаваемой за 1 секунду.