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

В Figma вписать текст в фигуру можно с помощью функции масок (Mask) или контурного преобразования (Convert to Outlines), но наиболее гибкий и редактируемый способ — использовать маску. Это позволяет тексту отображаться только внутри границ выбранной фигуры, оставляя внешние части невидимыми.

Основные способы вписать текст в фигуру

В Figma нет прямого инструмента «вписать текст в фигуру», как в классических графических редакторах. Но платформа предлагает несколько альтернативных подходов, основанных на работе со слоями, масками и векторными объектами. Каждый из них подходит для разных задач: от простых заголовков до сложных типографских композиций.

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

Второй способ — конвертирование текста в контуры (Convert to Outlines), после чего его можно объединить с фигурой через Boolean Operations. Этот путь менее гибкий, так как после конвертации текст перестаёт быть текстом: его нельзя редактировать как строку. Однако он полезен, если вы создаёте логотип или иконку с встроенным текстом.

Третий вариант — ручная маскировка с использованием фреймов. Вы помещаете текст внутрь фрейма, а сам фрейм стилизуете под нужную фигуру. Это работает, когда фигура — прямоугольник, овал или другой стандартный shape. Преимущество метода в скорости, недостаток — в ограниченной форме.

Когда что использовать

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

Для динамических интерфейсов, особенно при работе с компонентами и вариантами, предпочтителен именно масочный подход. Он совместим с Auto Layout, что позволяет тексту корректно вести себя при изменении ширины контейнера.

Пошагово: как создать текст в фигуре

Рассмотрим пошаговый процесс создания текста, вписанного в фигуру, с использованием масок. Это самый универсальный и часто применяемый метод.

1. Создайте фигуру. Выберите инструмент Rectangle, Ellipse, Polygon или любой другой и нарисуйте фигуру на холсте. Это будет контейнер для текста.
2. Добавьте текстовый слой. Нажмите T, кликните рядом с фигурой и введите нужный текст. Затем переместите текстовый слой точно над фигурой — по координатам X и Y, чтобы он совпадал.
3. Выделите оба слоя. Удерживайте Shift и кликните по фигуре и тексту. Порядок важен: текст должен быть верхним слоем.
4. Примените маску. Нажмите Ctrl+Alt+M (на Windows) или Cmd+Option+M (на Mac). Альтернатива — правый клик → «Use as Mask».
5. Проверьте результат. Теперь текст отображается только внутри фигуры. Остальная часть скрыта.

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

Пример: текст внутри круга

Представьте, что вы создаёте аватарку пользователя с инициалами. Вам нужно, чтобы текст «АЛ» был чётко по центру круга и не выходил за его границы.

Нарисуйте круг диаметром 100px. Добавьте текст, выберите жирный шрифт, размер 40px, выровняйте по центру. Разместите текст точно в центре круга. Выделите оба слоя, примените маску. Готово: инициалы видны только внутри круга, а при необходимости — легко изменить на другие буквы.

Работа с группами и фреймами

Если вы применяете маску к группе, убедитесь, что все элементы внутри неё правильно расположены. Figma позволяет маскировать не только текст, но и изображения, векторы, иконки. Это полезно при создании карточек, баннеров, шаблонов.

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

Ошибки и как их избежать

Даже опытные пользователи Figma иногда сталкиваются с проблемами при работе с масками. Ниже — самые частые ошибки и способы их решения.

• Текст исчез после маскирования. Скорее всего, текст находится вне границ фигуры. Проверьте позиционирование: текст должен пересекать или находиться внутри маски. Переместите его внутрь — и он снова станет видимым.
• Маска не применяется. Убедитесь, что выделено ровно два слоя. Figma не позволяет применять маску к трём и более слоям напрямую. Объедините лишние элементы в группу.
• Нельзя редактировать текст. После маскирования текст остаётся редактируемым, но только через двойной клик по нему внутри группы. Одиночный клик выделяет всю маску.
• Форма маски теряет стиль. При применении маски фигура теряет заливку, обводку и тени. Это нормально: она становится невидимой маской. Если нужно сохранить визуальный эффект, продублируйте фигуру: одну используйте как маску, вторую — как видимый контур.

Чего не делать

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

Продвинутые методы и лайфхаки

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

Один из мощных приёмов — маскирование через Auto Layout. Создайте фрейм с Auto Layout, поместите в него фигуру и текст. Затем примените маску. Теперь при изменении ширины фрейма текст будет автоматически подстраиваться, оставаясь в пределах формы. Это идеально для адаптивных кнопок, табов, выпадающих списков.

Другой лайфхак — использование компонентов с масками. Вы можете создать компонент, где маска — это проп (property). Например, кнопка с текстом, который вписывается в разные формы: прямоугольник, закруглённый квадрат, овал. Настройте варианты через component properties и управляйте формой маски без дублирования.

Также стоит отметить обратную маску (Inverted Mask). По умолчанию Figma не поддерживает инверсию, но вы можете добиться такого эффекта через Boolean Operations. Создайте большую фигуру, вычтите из неё маску — и примените к тексту. Результат: текст виден везде, кроме заданной области.

Как передавать маски разработчикам

Маски в Figma — визуальный эффект, который не всегда легко реализовать в коде. Чтобы избежать недопонимания, добавляйте комментарии: «Текст обрезан маской, не реализовывать через overflow: hidden без учёта формы». Предоставляйте альтернативное решение: например, фоновая картинка с текстом поверх или CSS clip-path.

Если форма сложная (звездочка, волна), предложите использовать SVG с . Это ближе всего к тому, что вы видите в Figma.

Сравнение с другими инструментами

Figma не единственный инструмент, где можно вписывать текст в фигуру. Давайте сравним подходы в разных редакторах.

• Adobe Photoshop: использует Clipping Masks, аналогичные Figma. Отличие — большая гибкость в настройках, но меньшая скорость и отсутствие веб-ориентированности.
• Illustrator: поддерживает text on a path и area text, что даёт больше контроля над типографикой. Однако это десктопное ПО, менее удобное для командной работы.
• Sketch: работает с масками почти идентично Figma, но без поддержки Auto Layout на том же уровне.
• Canva: позволяет вписывать текст в фигуры, но с ограниченной редактируемостью. Подходит для маркетинга, но не для UI.

Что выделяет Figma — это сочетание простоты, скорости и совместимости с современными workflow. По данным исследования Figma’s 2025 Design Trends Report, 78% дизайнеров предпочитают Figma для создания интерфейсов именно из-за интеграции масок с компонентами и авто-расположением.

Будущее масок в Figma

Figma активно развивает функционал масок. В roadmap 2026 года анонсирована поддержка множественных масок и инвертированных масок на уровне интерфейса. Также планируется интеграция с переменными (variables), чтобы форма маски могла динамически меняться в зависимости от состояния компонента.

Это откроет новые возможности для анимаций, прогресс-баров, диаграмм и интерактивных элементов, где текст появляется по мере заполнения формы.

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

По её словам, новички часто боятся масок, считая их «необратимыми». На самом деле, отменить маску можно в любой момент: выделите группу, нажмите правой кнопкой → «Release mask». Слои вернутся в исходное состояние.

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

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

Заключение

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

• Применяйте маски через Ctrl+Alt+M (Cmd+Option+M на Mac).
• Текст остаётся редактируемым после маскирования.
• Для сложных форм объединяйте элементы в векторный объект.
• Передавайте разработчикам пояснения по реализации масок в коде.
• Используйте Auto Layout для адаптивных маскированных блоков.