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

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

Основы создания иконки в Figma

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

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

Каждая иконка должна быть легко узнаваема даже в маленьком размере. Поэтому важно минимизировать количество деталей и следить за контрастом. Особенно это актуально для иконок в темных или светлых темах интерфейса.

Какие типы иконок можно создавать

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

• Линейные (outline) — выполнены тонкими линиями, часто с одинаковой толщиной штриха. Подходят для легких, воздушных интерфейсов.
• Заполненные (filled) — сплошные формы, без внутренних контуров. Хорошо работают в темных темах и на малых размерах.
• Двойные (duo tone) — сочетают заполненные и линейные элементы, добавляя глубину.
• Flat и Material — плоские, без теней и градиентов, соответствуют современным трендам.
• Глифовые — минималистичные, часто используются в меню и панелях навигации.

Выбор стиля зависит от общего дизайна продукта. Например, если у вас светлая тема с мягкими цветами, подойдут линейные иконки. Если интерфейс плотный и информационно насыщенный — заполненные.

Подготовка рабочего пространства

Прежде чем начать рисовать, важно правильно настроить проект. Это сэкономит время и обеспечит единообразие всех иконок в библиотеке.

Начните с создания нового файла или страницы в Figma. Добавьте фрейм размером 24×24 пикселя — это стандартный размер для большинства UI-библиотек. Включите сетку: Settings → Layout & Grids → Show layout grids. Установите шаг сетки 1 пиксель, чтобы все элементы выравнивались точно.

Также полезно включить snapping (привязку) и pixel preview. Это поможет видеть, как иконка будет выглядеть на реальном устройстве. Чтобы активировать пиксельный режим, нажмите Ctrl+Alt+P (или Cmd+Option+P на Mac).

Настройка плагинов для ускорения работы

Figma поддерживает множество плагинов, которые упрощают создание иконок. Вот самые полезные:

• Iconify — библиотека из более чем 100 000 иконок, которые можно вставлять напрямую в проект.
• SVGOMG — оптимизация SVG после экспорта.
• Grid Icon Frame — автоматически создает фреймы 24×24 с сеткой.
• Icons to Components — превращает иконки в компоненты с вариантами (filled/outline).

Установка плагинов: зайдите в Plugins → Find more plugins, найдите нужный и установите. После этого он появится в меню Plugins.

Методики создания иконок

Есть три основных подхода к созданию иконки: через готовые фигуры, с помощью Pen Tool и через комбинирование элементов. Каждый имеет свои преимущества.

Первый метод — использование примитивов. Например, иконка «дом» может быть сделана из треугольника (крыша) и квадрата (здание). Просто нарисуйте фигуры, объедините их с помощью Union (Ctrl+Shift+U), и получите цельную форму.

Второй метод — Pen Tool (P). Он даёт полный контроль над формой. Щелкайте, чтобы создать точки, перетаскивайте для кривых Безье. Этот способ сложнее, но необходим для уникальных иконок, которых нет в библиотеках.

Третий метод — Boolean Operations. Это объединение, вычитание и пересечение фигур. Например, чтобы сделать иконку «глаз», нарисуйте внешний овал, внутри — круг зрачка, а затем вычтите из зрачка блик с помощью Subtract (Ctrl+-).

Пошаговое создание иконки «поиск»

Рассмотрим практический пример. Создадим классическую иконку лупы.

1. Создайте новый фрейм 24×24 пикселя.
2. Инструментом Ellipse (O) нарисуйте круг диаметром 16 пикселей.
3. Сместите его на 4 пикселя вниз и вправо, чтобы оставить равномерные отступы.
4. Добавьте линию — это ручка лупы. Используйте Line (L), длина 8 пикселей, угол 45°.
5. Объедините круг и линию через Union (Ctrl+Shift+U).
6. Убедитесь, что обводка (stroke) выставлена на Outside, чтобы линии не выходили за границы.

Теперь иконка готова. Можно сохранить её как компонент для повторного использования.

Работа с сеткой и пропорциями

Сетка — основа хорошей иконки. Она обеспечивает визуальную согласованность всей библиотеки. В Figma можно использовать как встроенную сетку, так и кастомные guide-линии.

Стандартные системы, такие как Material Design, используют 24×24 пикселя как основу. Внутри этого квадрата иконка занимает 20×20 пикселей, оставляя по 2 пикселя отступа со всех сторон. Это создаёт визуальное равновесие и предотвращает «прилипание» к краям.

Для более точного контроля создайте guide-линии: кликните на линейку слева или сверху и протяните на холст. Разметьте 2px, 22px по горизонтали и вертикали — это границы безопасной зоны.

Правила построения формы

Хорошая иконка следует нескольким правилам:

• Центр тяжести должен быть визуально по центру, даже если форма асимметричная.
• Толщина линий — кратная 1px или 2px. Чаще всего — 2px для outline-стиля.
• Углы скругления — 1px или 2px, чтобы избежать «заострённого» вида.
• Не используйте больше двух цветов в одной иконке, если это не предусмотрено стилем.

Экспорт и интеграция

После завершения дизайна иконку нужно экспортировать. Выделите объект или фрейм, перейдите в правую панель, раздел Export.

Рекомендуемые форматы:

• SVG — для веба. Легкий, масштабируемый, поддерживает анимацию.
• PNG — для мобильных приложений. Экспортируйте в 1x, 2x, 3x для разных экранов.

Настройте параметры: для SVG отключите «Include ‘id’ attributes», чтобы избежать конфликтов в коде. Для PNG выберите прозрачный фон (Transparent background).

Интеграция в систему дизайна

Если вы работаете в команде, превратите иконку в компонент. Выделите её, нажмите Ctrl+Alt+K (или Create Component). Теперь её можно вставлять в другие файлы через Assets.

Для управления библиотекой создайте отдельный файл с названием «Icons Library». Добавьте туда все иконки, сгруппируйте по категориям: Navigation, Content, Action и т.д.

Типичные ошибки и как их избежать

Даже опытные дизайнеры допускают ошибки при создании иконок. Знание этих проблем помогает сэкономить время и улучшить качество.

Первая ошибка — игнорирование пиксельной выравнивания. Если линия проходит между пикселями, она становится размытой. Решение: включите Pixel Preview и проверяйте иконку в 100% масштабе.

Вторая — слишком много деталей. Иконка «наушники» с проводами, микрофоном и регулятором громкости теряет читаемость. Оставьте только основной силуэт.

Третья — несоответствие стилю. Одна иконка в стиле Material, другая — в стиле iOS. Это нарушает целостность интерфейса. Решение — создайте гайдлайн с правилами: толщина линий, скругления, цвета.

Чек-лист перед экспортом

Прежде чем отправить иконку разработчикам, проверьте:

• Размер фрейма: 24×24 пикселя.
• Отступы: 2 пикселя со всех сторон.
• Толщина линий: кратная 1px.
• Цвет: один (или два, если есть смысл).
• Формат: SVG с оптимизацией.
• Компонент: создан и задокументирован.

Экспертное мнение

Мы поговорили с Тимуром Бектемировым, старшим дизайнером компании «СберИнтерфейсы», который более 6 лет разрабатывает дизайн-системы.

Он также отметил, что автоматизация — ключевой тренд: «Мы написали скрипт, который берёт иконку из Figma, оптимизирует SVG, добавляет в библиотеку и деплоит в npm. Это экономит по 10 часов в неделю на рутине.»

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

Заключение

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

• Используйте стандартный размер 24×24 пикселя с отступами 2px.
• Работайте на пиксельной сетке и включайте Pixel Preview.
• Применяйте Boolean Operations для сложных форм.
• Экспортируйте в SVG и PNG@1x/2x/3x.
• Создавайте компоненты и библиотеки для командной работы.