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

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

Зачем нужна обводка текста в дизайне

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

По данным исследования NNGroup, 73% пользователей быстрее теряют интерес к интерфейсу, если текст плохо читается на фоне. Обводка — один из самых эффективных способов повысить контрастность без изменения цвета самого текста. Она особенно полезна в дизайне для телевизоров, цифровых вывесок, AR-интерфейсов и приложений с динамическими фонами.

Как добавить обводку текста в Figma: пошаговая инструкция

Добавить обводку к тексту в Figma проще, чем кажется. Вот пошаговый алгоритм:

1. Выберите текстовый слой на холсте. Убедитесь, что вы кликнули именно по тексту, а не по рамке блока — иначе свойства не активируются.
2. Откройте панель свойств справа. Если её нет — нажмите Cmd + Option + 4 (Mac) или Ctrl + Alt + 4 (Windows).
3. Найдите раздел «Stroke» (Обводка). По умолчанию он скрыт, если толщина равна 0.
4. Щёлкните по полю «Stroke» и установите значение больше 0. Начните с 1 пикселя — это оптимальный порог для большинства шрифтов.
5. Выберите цвет обводки. Используйте палитру цветов, совместимую с вашим брендом или контрастную с фоном.
6. Если нужно, настройте стиль обводки (сплошная, пунктирная, штрих-пунктир) через выпадающее меню.

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

Настройка параметров обводки: толщина, стиль, позиция

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

Толщина (Weight)

Толщина обводки должна соответствовать размеру шрифта. Общее правило: толщина обводки = 5–10% от размера шрифта. Например, для шрифта 36px оптимально 2–3px. Для мелкого текста (12–16px) используйте 0.5–1px — иначе буквы станут нечитаемыми.

Стиль (Dash Pattern)

В Figma можно выбрать не только сплошную линию, но и пунктирную (dashed), штрих-пунктирную (dotted) или кастомный паттерн. Это полезно для декоративных элементов, но не для функционального текста. Пунктирная обводка может визуально «разрывать» буквы — особенно в пропорциональных шрифтах.

Позиция (Position)

Здесь важно: Figma позволяет выбрать, где рисуется обводка — внутри текста (Inside), по центру (Center) или снаружи (Outside). Для текста лучше всего подходит Outside — так обводка не перекрывает сами буквы. Если выбрать Inside, текст может выглядеть «сжатым» или «заполненным» — это полезно только для эффектов типа «вырезания».

Частые ошибки и как их избежать

Даже опытные дизайнеры допускают типичные ошибки при работе с обводкой текста.

• Слишком толстая обводка — делает текст «жирным» и неестественным. Особенно критично на мобильных экранах. Решение: всегда тестируйте на реальных устройствах.
• Цвет обводки не контрастирует с фоном — например, тёмно-серая обводка на чёрном фоне. Решение: используйте инструмент «Color Contrast Analyzer» в Figma или плагин Stark.
• Обводка на мелком тексте — при размере шрифта ниже 12px обводка толщиной более 0.5px ухудшает читаемость. Решение: для мелкого текста лучше использовать тень или изменить цвет текста.
• Не проверяется на разных фонах — обводка, которая выглядит отлично на белом, может исчезнуть на градиенте. Решение: создайте 3–4 варианта фона и проверьте текст в режиме Preview.
• Смешивание обводки и тени — два эффекта одновременно могут создавать визуальный шум. Решение: выбирайте один — обводка для контура, тень для глубины.

Обводка vs тень: в чём разница и когда что использовать

Многие начинающие дизайнеры путают обводку и тень. Это разные инструменты с разной логикой.

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

Тень — это объём, который создаёт иллюзию поднятия текста над поверхностью. Она подходит для:
— эффектов «выделения»;
— объёмных кнопок;
— декоративных заголовков в рекламных баннерах.

Продвинутые техники: обводка с градиентом, анимация, экспорт

Figma позволяет идти дальше стандартных настроек.

Градиентная обводка

К сожалению, Figma пока не поддерживает градиентную обводку напрямую. Но есть обходной путь:
1. Скопируйте текстовый слой.
2. Превратите его в контур (Right-click → Convert to Vector).
3. Удалите заливку (Fill → None).
4. Примените градиент к Stroke.
Теперь у вас есть градиентный контур, который можно анимировать или экспортировать как SVG.

Анимация обводки

В Figma нельзя анимировать обводку в самом инструменте, но вы можете создать несколько состояний (Frames) и экспортировать их в Lottie или After Effects. Это полезно для анимированных логотипов или загрузочных экранов.

Экспорт в SVG

При экспорте текста с обводкой в SVG, Figma корректно сохраняет параметры stroke. Убедитесь, что вы экспортируете как SVG, а не PNG — иначе обводка превратится в пиксели. Для веб-разработчиков это критично: SVG с обводкой масштабируется без потерь.

Экспертное мнение: как используют обводку профессионалы

Профессионалы редко используют обводку как декор. Она применяется стратегически:
— для акцентирования ключевых элементов (цены, кнопки, коды);
— в системах доступности — для пользователей с нарушениями зрения;
— в брендинге — чтобы создать узнаваемый стиль (например, обводка в стиле «неон»).

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

Заключение

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

Помните: лучшая обводка — та, которую пользователь не замечает, но которая делает текст чётким и понятным. Используйте толщину 1–2px, цвет с высоким контрастом, позицию Outside, и всегда тестируйте на реальных устройствах.

• Обводка добавляется через панель свойств — Stroke, а не через эффекты или плагины.
• Толщина обводки должна быть 5–10% от размера шрифта — иначе текст станет нечитаемым.
• Используйте позицию Outside для максимальной чёткости.
• Обводка лучше тени для текста на сложных фонах — она не размывает контур.
• Для веб-проектов всегда экспортируйте текст с обводкой как SVG.