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

Классическая структура и размер логотипа в фигме

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

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

Как создать векторный логотип в фигме с помощью фигур

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

С помощью инструмента Rectangle можно создавать обычные прямоугольники, квадраты (если зажать Shift), прямоугольники со скругленными углами (радиус скругления каждого угла можно задать отдельно). Цвет получившейся фигуры можно поменять на панели Fill, угол наклона — на панели Position, а размеры — на панели Layout.

С помощью инструмента Ellipse можно создавать эллипсы и круги (с зажатым Shift). Если навести на эллипс и потянуть за маленький кружочек справа, можно будет вырезать из эллипса угловой сегмент и середину. Все эти параметры также можно поменять на правой панели фигмы.

Также в фигме можно создавать многоугольники и звезды с различными настройками:

Операции с формами для создания логотипа

При разработке логотипа фигуры можно объединять или вырезать друг из друга. Рассмотрим различные варианты на примерах.

Union selection объединяет несколько фигур в одну:

Subtract selection вырезает одну фигуру из другой:

Intersect selection оставляет видимой только области пересечения фигур:

Exclude selection в свою очередь вырезает пересекающиеся области:

Поочередно применяя различные опрации с фигурами, можно создавать сложные и интересные фигуры для вашего логотипа:

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

Это можно сделать при помощи обычного инструмента Text на панели инструментов. Выбрать шрифт, размер, жирность и прочие параметры можно на панели Typography в правой части интерфейса фигмы.

Размер шрифта для названия бренда стоит делать достаточно крупным: это самый важный элемент во всем логотипе. Он должен быть немного крупнее графической части и сильно крупнее подписи. Шрифт для названия стоит подбирать с характером и настроением, соответствующим позиционированию бренда. Но при этом не забывать о читаемости. Данный элемент можно сделать как строчными, так и прописными буквами.

Для подписи стоит выбирать максимально простой шрифт, например Inter, Roboto или Open Sans. Его размер должен быть значительно меньше, чем у основной надписи.

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

Выравнивать текстовые блоки в логотипе, как уже говорилось выше, лучше либо по центру, либо по левому краю.

Цвета логотипа — как создать палитру

Изменить цвет логотипа и его элементов можно на панели справа в графе Fill. По умолчанию рекомендуется делать черный логотип на белом фоне и белый на черном.

Затем нужно создать цветные варианты:

• На белом фоне: насыщенный (синий/красный/зеленый и т д) цвет для графической части + темный, почти черный, оттенок этого же цвета для текстов

• Лого на насыщенном фоне (обычно лучше всего смотрится белый)
• Светлый лого на темном фоне. Темный цвет выбирается тот же, что ранее использовался для текста. Цвет текста — белый, цвет графики — насыщенный (чаще всего нужно делать его светлее)

Все эти варианты будут полезны в дальнейшем при использовании логотипа на сайте, визитках, баннерах и других материалах.

Как сохранить и скачать логотип в фигме

Сделать это можно с помощью функции Export в самом низу правой панели фигмы. Сохранить логотип можно как в растровом формате png (пнг), так и в более предпочтительно векторном — svg или pdf.

Поделиться ссылкой на figma-файл можно просто скопировав её из адресной строки браузера или с помощью кнопки Share в правом верхнем углу. В появившемся окне нужно убедиться, что стоит доступ Anyone can view и скопировать ссылку нажав Copy Link.

Домашнее задание по созданию логотипа в фигме

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

Легкий уровень сложности: пошагово повторить пример логотипа «Ракета» из видеоурока, включая горизонтальный и вертикальный варианты, а также разные цветовые схемы.

Средний уровень сложности: нарисовать в фигме один или несколько логотипов из этого набора:

Горизонтальные версии и другие цветовые схемы сделать самостоятельно. По желанию можно внести в дизайн этих логотипов свои изменения.

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