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

В Figma добавление контура текста — это один из способов визуального выделения надписей, особенно при создании макетов с прозрачным фоном или сложными композициями. Поскольку Figma не имеет встроенного параметра «контур текста» как в Photoshop, его имитируют через обводку и конвертацию текста в фигуры. Главное — понимать, когда можно использовать динамическую обводку, а когда необходимо преобразовать текст в вектор.

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

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

В мобильных интерфейсах, баннерах, логотипах и презентационных материалах контурный текст часто становится ключевым инструментом стилизации. Например, белый текст с чёрной обводкой легко читается на любом фоне. Это стандартный приём в UI-дизайне, особенно при работе с динамическим контентом.

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

Как сделать контурный текст без конвертации: обводка в Figma

Figma предоставляет встроенный инструмент для добавления обводки к текстовым объектам — панель Stroke в правой боковой панели Inspector. Этот способ самый простой и обратимый, поскольку текст остаётся редактируемым.

Для начала выделите текстовый элемент. Убедитесь, что в панели свойств активна вкладка «Text». Затем найдите параметр Stroke, расположенный ниже заливки (Fill). По умолчанию он отключён. Нажмите на значок карандаша, чтобы активировать обводку, и выберите цвет.

Толщину контура можно регулировать ползунком Stroke Weight. Значение указывается в пикселях. Для тонкого контура подойдёт 1–2 px, для акцентированного — 4–6 px. Также важно выбрать тип наложения: внутри, по центру или снаружи. Это регулируется через переключатель Stroke Align.

• Inside — обводка располагается внутри границ текста. Подходит, если нужно сохранить внешние размеры блока.
• Center — обводка делится поровну между внутренним и внешним пространством. Стандартный выбор.
• Outside — контур выходит за пределы текста. Используется для максимального визуального выделения.

Обратите внимание: обводка применяется ко всему текстовому блоку, а не к отдельным символам. Если вы хотите разные цвета обводки для разных букв — такой функции в Figma нет. В этом случае потребуется разбить текст на отдельные объекты или использовать векторную конвертацию.

Конвертация текста в вектор: полный контроль над контуром

Если вам нужен продвинутый контроль — например, двойной контур, градиентная обводка или изменение формы букв — текст необходимо преобразовать в векторные фигуры. Это делается через команду Outline Stroke (в старых версиях — Create Outlines).

Выделите текстовый объект и нажмите Ctrl+Shift+O (Windows) или Cmd+Shift+O (Mac). Текст превращается в группу векторных путей. Теперь вы можете:

• Применять несколько обводок через дублирование и масштабирование контуров.
• Использовать градиенты, узоры и маски для обводки.
• Редактировать узлы букв с помощью Pen Tool.
• Добавлять тени, размытия и другие эффекты к контуру отдельно от заливки.

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

Пошаговая инструкция: двойной контур

1. Введите текст и настройте начертание (шрифт, размер, кернинг).
2. Создайте копию текста (Ctrl+D) и отправьте её назад (Send to Back).
3. У нижнего слоя увеличьте Stroke Weight до желаемого значения (например, 8 px).
4. У верхнего слоя установите обводку тоньше (например, 2 px) и выберите другой цвет.
5. Настройте порядок слоёв: толстый контур — снизу, тонкий — сверху.
6. При необходимости объедините слои в группу для удобства управления.

Градиентный контур: как сделать

Figma не поддерживает градиентную обводку для текста напрямую. Но после конвертации в вектор вы можете:

• Выбрать векторный контур (после Outline Stroke).
• В панели Stroke выбрать тип заливки Gradient.
• Настроить направление и цвета градиента.
• При необходимости добавить эффект размытия или наложить маску.

Этот метод часто используется в промо-баннерах, логотипах и заголовках для презентаций. Градиентный контур создаёт современный, технологичный вид.

Ошибки и ограничения: чего стоит избегать

Первое, что нужно понимать: обводка в Figma — это не настоящий контур в классическом понимании, а графическая обводка вокруг текстового объекта. При малых размерах шрифта толстая обводка может «съесть» внутреннее пространство букв, особенно у символов вроде «o», «e», «c». Это снижает читаемость.

Вторая частая ошибка — использование слишком ярких или контрастных цветов обводки без учёта фона. Например, красная обводка на жёлтом фоне вызывает зрительный дискомфорт. Всегда проверяйте сочетание цветов с помощью инструментов вроде Contrast Checker.

Третья проблема — попытка применить разные обводки к разным словам в одном текстовом блоке. Figma не поддерживает стилизацию части текста через обводку, если только вы не используете Rich Text Formatting. Однако и там обводка применяется ко всему фрагменту, а не к отдельным символам.

Также стоит помнить: при экспорте в PNG или JPEG контурный текст будет растрирован. Если вы используете его в системе компонентов, убедитесь, что экспорт настроен на нужное разрешение. Для векторного экспорта (SVG) конвертация в пути обязательна.

Практические примеры использования контурного текста

Рассмотрим три реальных кейса, где контурный текст решает конкретные задачи.

1. Текст на динамическом фоне

В приложении с персонализированными обоями пользователь может загружать любые изображения. Чтобы заголовок всегда оставался читаемым, используется белый текст с чёрной обводкой (1–2 px, Outside). Это простое, но эффективное решение, которое работает без программирования.

2. Логотип с эффектом металлик

Для бренда премиум-класса был разработан логотип с градиентной обводкой и внутренней тенью. Текст был конвертирован в вектор, затем к контуру применён радиальный градиент от серебристого к тёмному. Такой эффект невозможно сделать без Outline Stroke.

3. Анимированный контур в прототипе

Через Figma Prototyping можно имитировать анимацию контура. Например, при наведении обводка текста увеличивается с 1 до 4 px. Это достигается через Auto Layout и два состояния одного текстового блока с разной толщиной Stroke. Эффект работает только в просмотре, но хорошо демонстрирует взаимодействие.

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

Также эксперты отмечают, что в 2025 году растёт популярность «тонких» контуров (1–1.5 px) в сочетании с полупрозрачной заливкой. Это создаёт эффект стекла или неона, особенно при использовании светящихся цветов (#00f7ff, #ff00aa). Такой стиль часто встречается в дизайн-системах Web3 и метавселенных.

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

Заключение

Добавление контура к тексту в Figma — это комбинация простых шагов и глубокого понимания ограничений инструмента. Основной путь — использование обводки (Stroke) для живого текста. Он подходит для 90% задач в UI-дизайне. Когда нужны сложные эффекты — градиенты, двойные контуры, анимации — приходится прибегать к конвертации текста в вектор.

• Для быстрого результата используйте Stroke с выравниванием Outside или Center.
• После Outline Stroke текст становится неизменяемым — сохраняйте копию.
• Градиентная или двойная обводка возможна только через вектор.
• Проверяйте читаемость контурного текста на разных фонах.
• Экспорт в SVG требует предварительной векторизации текста.