Как вставить логотип в Figma — SVG, компоненты и частые ошибки
Собираете макет — нужен логотип Сбера в шапке, иконки банков в способах оплаты, знак клиента в футере. Казалось бы, банальная операция, но именно на ней в макетах появляются растровые огрызки с белым фоном, которые мылятся при первом же увеличении. Разберём, как вставлять логотипы в Figma правильно — так, чтобы они оставались векторными, перекрашиваемыми и лёгкими.
Правильный путь — SVG: перетащите файл в Figma или скопируйте SVG‑код и нажмите Ctrl+V — логотип вставится редактируемым вектором. PNG — только когда вектора не существует. Повторяющиеся логотипы оформляйте компонентами.
Способ 1. Перетащить SVG‑файл
Скачали SVG логотипа — просто перетащите его из папки на холст Figma. Файл развернётся в полноценный векторный объект: группа с фигурами, у каждой — свои заливки.
Что это даёт:
- Масштабирование без потерь — логотип в макете хоть 16 пикселей, хоть весь экран.
- Перекраска — выделяете фигуры и меняете fill: нужна белая версия для тёмного футера — две секунды.
- Лёгкий файл — вектор не раздувает макет, в отличие от пачки PNG.
Способ 2. Вставить SVG‑код из буфера
Ещё быстрее: если источник отдаёт SVG‑код (кнопка «копировать SVG» в каталогах, код из DevTools), его можно вставить в Figma напрямую — Ctrl+V/Cmd+V на холсте. Figma распознаёт SVG‑разметку в буфере и разворачивает её в вектор. Файл на диск сохранять не нужно.
Этот способ идеален в связке с каталогами логотипов: в нашем каталоге у каждого бренда есть кнопка копирования SVG — клик там, Ctrl+V в Figma, готово.
Способ 3. PNG — когда выбора нет
PNG перетаскивается так же, но вставляется картинкой: ни перекрасить, ни увеличить без мыла. Когда это оправдано:
- логотип существует только в растре (старый бренд, фотография вывески);
- нужен именно растровый стиль (скриншот приложения в макете).
Правила гигиены: берите PNG минимум в 2 раза больше размера в макете и обязательно с прозрачным фоном — почему это важно, разбирали в статье про прозрачность.
Логотип как компонент — для повторяющихся
Если логотип встречается в макете больше двух раз (шапка на каждом экране, список банков), сделайте из него компонент:
- Вставьте SVG, приведите в порядок (группа, понятное имя вроде
logo/sber). - Ctrl+Alt+K / Cmd+Option+K — создать компонент.
- Дальше по макету расставляются инстансы: обновили мастер — обновились все копии.
Продвинутый уровень — варианты компонента: цветная и монохромная версия логотипа как variants одного компонента с переключателем. В дизайн‑системах логотипы партнёров и способов оплаты обычно живут именно так.
Логотипы в ряд (банки, партнёры, «нам доверяют») никогда не выравнивайте по ширине — вытянутый логотип станет гигантским, квадратный — микроскопическим. Ставьте всем одинаковую высоту и выравнивание по центру, а визуально массивные знаки уменьшайте на 10–15% руками. Оптическое выравнивание важнее математического.
Частые ошибки
- Скриншотить логотип с сайта. Получается мыльный растр с фоном. Всегда ищите SVG — он существует почти для любого бренда.
- Разбирать чужой SVG до атомов. После вставки не применяйте Flatten без нужды: слои и группы в оригинальном SVG — это структура, которая пригодится для перекраски.
- Растягивать логотип непропорционально. В Figma легко случайно потянуть за одну сторону. Держите Shift или фиксируйте пропорции замком в панели.
- Перекрашивать в «почти фирменный» цвет. У брендов точные HEX‑коды — берите их из SVG или гайдлайнов, а не на глаз (как — в статье про цвет логотипа).
Экспорт обратно
Из Figma логотип выгружается в любом виде: выделите объект → Export → SVG для веба, PNG нужного множителя для растров, PDF для печати. Follow‑up для разработчиков: отдавайте им SVG, а не PNG — вставка SVG в вёрстку даёт чёткость и гибкость (подробности — в гиде по вставке SVG на сайт).
Логотипы в дизайн‑системе: как хранить правильно
Если проект больше одного макета, логотипам место в библиотеке, а не россыпью по страницам:
- Отдельная страница «Logos» в файле дизайн‑системы: полный логотип, знак, монохром, инверсия — каждый компонентом с именем по схеме
logo/<бренд>/<вариант>. - Варианты через properties: один компонент
logo/sberсо свойствами color (full/mono/white) и layout (full/mark) удобнее четырёх отдельных компонентов — переключение в один клик прямо в макете. - Слоты правильного размера: оберните логотип во фрейм фиксированной высоты (например, 32 px) с автолейаутом — тогда в шапках и списках все логотипы будут стоять ровно без ручной подгонки.
- Не отсоединяйте инстансы ради перекраски: если хочется поменять цвет — это сигнал, что в компоненте не хватает варианта. Добавьте вариант в мастер, и правка разойдётся по всем макетам.
Такая структура окупается в первый же ребрендинг клиента: замена мастер‑компонента обновляет логотип в сотне экранов за минуту.
Тонкости работы с чужими SVG в Figma
- SVG вставился «плоским» одним слоем. Автор файла сделал Flatten перед экспортом. Перекрасить отдельные элементы не выйдет — ищите исходник с послойной структурой (в нашем каталоге SVG сохраняют слои).
- Цвета не меняются через Selection colors. Проверьте, не заданы ли цвета в SVG через
styleс!important-подобными конструкциями — пересохранение через «копировать как SVG → вставить» обычно нормализует структуру. - Логотип вставился гигантским или крошечным. У SVG не было width/height, и Figma взяла размеры из viewBox. Просто задайте нужный размер с зажатым Shift — пропорции сохранятся.
- Тонкие линии «поплыли» при уменьшении. Включите у фрейма «Clip content» и проверьте, что strokes заданы внутри фигур (Inside), — внешние обводки при масштабировании ведут себя неожиданно. Для мелких размеров лучше версия знака с чуть более толстыми штрихами — именно поэтому у брендов бывают отдельные small‑size версии.
Частые вопросы
Как вставить логотип сразу на все макеты? Никак напрямую — и это правильно: сделайте компонент и расставьте инстансы. Массовая вставка без компонента — техдолг, который выстрелит при первой же правке.
Можно ли анимировать логотип в Figma? Прототипирование Figma анимирует переходы между вариантами (Smart Animate) — для простого появления/смены состояния хватит. Полноценный мошн — это After Effects и экспорт в Lottie (подробнее — в статье про анимированные логотипы).
Почему PNG‑экспорт логотипа мыльный? Проверьте множитель экспорта: 1x при мелком размере фрейма даст мелкий файл. Ставьте 2x–4x или задавайте точную ширину в поле Export.
Коротко
SVG перетащили или вставили из буфера → при необходимости сделали компонентом → выровняли по высоте → экспортировали обратно в SVG. Растр — только когда вектора не существует в природе.
Быстрый источник векторов — наш каталог логотипов: сотни брендов в SVG, копирование кода в один клик — и сразу Ctrl+V в Figma. Для эмодзи в макетах есть отдельный каталог с PNG высокого разрешения в стилях Apple и Google.