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

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

Почему Figma подходит для логотипов

Логотип обязан быть вектором — иначе он размывается при масштабировании (почему так работает растр — в статье векторная и растровая графика). Figma — векторный редактор, так что это требование выполняется автоматически. По сравнению с Illustrator здесь меньше специализированных инструментов для сложной иллюстрации, но для 90% логотипов — геометричных знаков и текстовых композиций — возможностей хватает с запасом, а порог входа несравнимо ниже.

Шаг 1Подготовка файла

1. Создайте новый дизайн‑файл.
2. Сделайте три фрейма (клавиша F): 512×512 — рабочий, 48×48 и 16×16 — контрольные. В маленьких фреймах вы будете проверять, выживает ли знак в размере иконки и фавиконки.
3. Включите сетку Layout Grid на рабочем фрейме — например, 8‑пиксельную: привязка к сетке дисциплинирует композицию.

Шаг 2Знак: фигуры вместо рисования

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

Рабочие инструменты:

• Фигуры (O — эллипс, R — прямоугольник) — база любой композиции.
• Булевы операции (панель сверху: Union, Subtract, Intersect, Exclude) — вычитайте один круг из другого, и получится полумесяц; пересекайте фигуры — получатся линзы и сегменты. Это главный инструмент логотип‑дизайна.
• Скругления углов — тяните за точку у угла фигуры или задайте радиус в панели справа.
• Перо (P) — для форм, которые из фигур не собрать. Правило: чем меньше опорных точек, тем чище кривая.

Шаг 3Текстовая часть

1. Инструмент Text (T), наберите название. Про выбор гарнитуры — со всеми ловушками лицензий — читайте в статье шрифт для логотипа: для коммерческого использования шрифт должен иметь открытую или купленную лицензию.
2. Настройте трекинг (межбуквенное расстояние): логотипам почти всегда идёт чуть увеличенный или чуть уменьшенный трекинг по сравнению с дефолтом — сравните варианты.
3. Перед финальным экспортом переведите текст в кривые: правый клик → Outline Stroke / Flatten (⌘E). Иначе SVG откроется без вашего шрифта на любой машине, где он не установлен. Сохраните копию с «живым» текстом для будущих правок!

Шаг 4Цвет

Назначьте цвета и сохраните их как стили (Color Styles) — так вы зафиксируете точные HEX‑коды для будущего фирменного стиля. Ориентиры по выбору: психология цвета в логотипе и фирменные цвета известных брендов. Сразу сделайте три версии знака: цветную, чёрную и белую (проверьте белую на тёмном фрейме) — монохром понадобится чаще, чем кажется.

Шаг 5Проверка размерами

Скопируйте знак в контрольные фреймы 48×48 и 16×16 (вставляйте как инстанс или просто масштабируйте копию — с вектором потерь не будет):

• В 48 px знак должен читаться мгновенно.
• В 16 px — оставаться узнаваемым пятном: мелкие детали сольются, и это нормально, если силуэт держится. Если нет — упрощайте: у больших брендов для маленьких размеров есть отдельные упрощённые версии знака — почему все упрощают, мы разбирали отдельно.

Дополнительно посмотрите знак в градациях серого (плагином или временной заливкой) — композиция должна работать без помощи цвета.

Шаг 6Экспорт

В панели Export справа добавьте форматы:

• SVG — главный результат: масштабируемый исходник для сайта и передачи дизайнерам, зачем вообще нужен SVG, мы объясняли отдельно. Перед экспортом убедитесь, что текст переведён в кривые, лишние скрытые слои удалены, а знак сгруппирован.
• PNG — экспортируйте в 1x, 2x и 4x с прозрачным фоном для площадок, которые не принимают вектор; какие размеры нужны для каждой площадки, мы разбирали отдельно.

Экспортированный SVG стоит прогнать через оптимизатор — лишние атрибуты Figma добавляет щедро, как оптимизировать SVG — отдельная инструкция.

Частые ошибки новичков

1. Обводки вместо заливок. Знак, построенный на strokes, при экспорте и масштабировании ведёт себя непредсказуемо. Финальную версию — Outline Stroke (⌘E → Flatten), превратив обводки в заливки.
2. Слишком много деталей. Проверка фреймом 16×16 отсекает лишнее лучше любого ментора.
3. Не переведённый в кривые текст. SVG с «живым» шрифтом сломается на чужом компьютере.
4. Один файл вместо комплекта. На выходе должно быть несколько версий: полная, компактная, монохромные — состав комплекта описан в статье про виды логотипов.
5. Копирование референсов один в один. Вдохновляться каталогом можно и нужно, повторять чужой знак — нельзя.

Что дальше

Готовый логотип: проверьте на реальных носителях (аватарка, шапка сайта, иконка приложения), соберите мини‑гайдлайн с кодами цветов и подумайте о регистрации товарного знака, если бренд коммерческий. Если рисовать с нуля не хочется — есть путь генерации нейросетью с последующей доводкой в той же Figma, а разбор всех вариантов «сделать самому» — в статье как сделать логотип самостоятельно.