Как поместить текст в фигуру в фигме

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

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

Figma предлагает мощный инструмент — маскирование (masking), который позволяет ограничить видимую область одного слоя по форме другого. Это идеальный способ, чтобы поместить текст внутрь круга, треугольника, звезды или любой другой фигуры. Маска работает как «окно»: только та часть текста, которая попадает в пределы фигуры-маски, остаётся видимой.
Для начала создайте фигуру — например, прямоугольник, эллипс или многоугольник. Затем добавьте текстовый элемент поверх неё. Убедитесь, что текст расположен точно там, где вы хотите его видеть внутри фигуры. Далее выделите оба объекта: сначала фигуру, затем текст (или наоборот — порядок важен только для группировки). Нажмите правой кнопкой мыши и выберите «Use as Mask» (Использовать как маску) или воспользуйтесь сочетанием клавиш Ctrl+Alt+M (Cmd+Option+M на Mac).
После применения маски текст становится дочерним слоем по отношению к фигуре. В панели слоёв он отображается как вложенный внутрь фигуры. Теперь любые изменения размера или положения текста будут ограничены границами маски. Если вы переместите текст влево, его правая часть может исчезнуть, если выйдет за пределы фигуры.

Если вам нужно изменить форму маски, просто выделите фигуру и скорректируйте её углы, радиусы или размеры. Текст автоматически пересчитает своё отображение. Однако будьте осторожны: при преобразовании фигуры в вектор (например, через «Convert to Vector») маска может перестать работать корректно. Лучше избегать этой операции, если вы планируете редактировать маску позже.
Маскирование поддерживает не только простые фигуры, но и составные формы, созданные с помощью булевых операций (union, subtract, intersect). Это позволяет делать сложные дизайнерские эффекты — например, текст, просвечивающий через несколько отверстий в форме букв или иконок.

Пошаговая инструкция: применение маски к тексту

1. Создайте фигуру с помощью инструментов Rectangle, Ellipse или Polygon.
2. Добавьте текстовый слой поверх фигуры с помощью T-инструмента.
3. Выделите оба слоя: кликните по ним с зажатым Shift или выделите рамкой.
4. Щёлкните правой кнопкой мыши и выберите «Use as Mask».
5. Убедитесь, что текст стал дочерним слоем фигуры в панели слоёв.
6. Перемещайте или редактируйте текст — он будет отображаться только внутри фигуры.

Размещение текста в фигуре через фрейм с обрезкой

Альтернативный способ — использование фрейма как контейнера с включённой опцией обрезки контента. Этот метод особенно полезен, когда вы работаете с автолейаутом, компонентами или прототипированием. Фрейм в Figma ведёт себя как блочный контейнер, аналогичный div в HTML, и может ограничивать отображение вложенных элементов.
Создайте фрейм нужного размера и формы. Для этого воспользуйтесь инструментом Frame (F) или преобразуйте существующую фигуру в фрейм с помощью Ctrl+Alt+G (Cmd+Option+G). После этого добавьте внутрь фрейма текстовый слой. В правой панели инспектора найдите раздел «Layout Properties» и установите флажок «Clips content». Теперь весь текст, выходящий за границы фрейма, будет скрыт.
Преимущество этого подхода — гибкость. Вы можете изменять размер фрейма, и текст будет автоматически обрезаться. Кроме того, при использовании автолейаута фрейм может динамически адаптироваться под содержимое, сохраняя при этом эффект маскирования. Это особенно актуально при проектировании карточек товаров, новостных блоков или интерфейсов с динамическим текстом.
Фреймы с обрезкой поддерживают внутренние отступы (padding), которые можно задать вручную. Это позволяет контролировать расстояние между текстом и краями фрейма. Например, если вы создаёте баннер с текстом внутри круга, вы можете задать равномерные отступы, чтобы текст не прижимался к границам.

Когда использовать фрейм вместо маски?

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

Особенности работы с автолейаутом и компонентами

Одна из главных сложностей при помещении текста в фигуру — совместимость с автолейаутом. Маскирование и автолейаут плохо сочетаются: если вы примените маску к элементу внутри автолейаута, поведение может стать непредсказуемым. Например, при изменении текста фрейм может неправильно пересчитывать высоту, или маска сместится.
Лучшая практика — использовать фрейм с обрезкой контента внутри автолейаута. Создайте фрейм, включите Clips content, добавьте в него текст и настройте автолейаут для родительского контейнера. Так вы получите динамический блок, который адаптируется под объём текста, но при этом сохраняет эффект маскирования.
Например, при проектировании карточки пользователя с аватаром и именем, вы можете сделать круглый фрейм для имени, чтобы текст обрезался по кругу. При этом, если имя длинное, фрейм останется того же размера, а текст — обрезанным, как и задумано.

Если вы всё же хотите использовать маску в автолейауте, изолируйте её в отдельный фрейм без автолейаута и вставьте этот фрейм в общий поток. Это обходной путь, который позволяет сохранить контроль над поведением маски.

Пример: создание компонента с текстом в круге

1. Создайте фрейм диаметром 100×100 px.
2. Включите опцию «Clips content» в панели свойств.
3. Добавьте текстовый слой в центр фрейма.
4. Задайте стиль текста: белый цвет, жирный шрифт, выравнивание по центру.
5. Опционально: добавьте фоновый цвет или градиент к фрейму.
6. Преобразуйте фрейм в компонент для повторного использования.

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

Типичные ошибки и как их избежать

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

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

Экспертные рекомендации

При выборе между масками и фреймами с обрезкой ориентируйтесь на тип проекта. Для статичных макетов, презентаций и иллюстраций предпочтительнее маски — они дают больше визуальной свободы. Для продуктовых интерфейсов, систем дизайна и прототипов лучше использовать фреймы с Clips content — они стабильнее ведут себя при изменениях.
Всегда называйте слои осмысленно. Если у вас есть фрейм с обрезкой текста, назовите его, например, «Text Circle Mask» или «Clipped Name Field». Это упрощает работу команды и снижает риск ошибок при редактировании.
Используйте сочетания клавиш для ускорения работы. Ctrl+Alt+M (Cmd+Option+M) — быстрое применение маски. Ctrl+Shift+G (Cmd+Shift+G) — разгруппировка с сохранением маски. Эти комбинации экономят время при массовой обработке элементов.
Если вы работаете с длинными текстами, учитывайте читаемость. Не обрезайте текст слишком сильно — убедитесь, что ключевые слова остаются видимыми. Иногда лучше уменьшить шрифт или изменить расположение, чем жертвовать понятностью.

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

Заключение

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

• Маскирование — лучший выбор для иллюстраций и статичных элементов.
• Фреймы с Clips content идеальны для компонентов и автолейаута.
• Всегда проверяйте порядок слоёв при применении маски.
• Называйте слои осмысленно для удобства командной работы.
• Тестируйте поведение при экспорте и локализации текста.