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

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

Основные шаги: как разместить текст поверх изображения

Первое, что нужно сделать — импортировать изображение в ваш Figma-файл. Это можно сделать через перетаскивание файла на холст или с помощью пункта «File → Place Image». После загрузки картинка появится на выбранной странице. Убедитесь, что она находится в нужном масштабе и позиции.
Далее активируйте инструмент Text (T) на панели слева. Кликните в нужной части изображения — появится текстовый блок. Начните печатать. По умолчанию текст будет чёрным, без фона, поэтому важно сразу проверить, насколько он виден на текущем фоне. Если изображение тёмное, используйте светлый текст, и наоборот.
После ввода текста настройте его параметры: выберите шрифт, размер, межстрочный интервал (line height), выравнивание и отступы. Эти параметры находятся в правой боковой панели под вкладкой Design. Figma поддерживает как локальные шрифты, так и Google Fonts через плагины, например, «Google Fonts for Figma».

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

• Импортируйте изображение на холст
• Выберите инструмент T (Text)
• Кликните по изображению и введите нужный текст
• Настройте шрифт, размер и цвет
• Зафиксируйте ширину текстового блока при необходимости

Выравнивание текста относительно изображения — ключевой этап. Используйте инструменты центрирования из верхней панели: «Align Horizontal Center» и «Align Vertical Center». Можно также воспользоваться функцией Auto Layout, чтобы привязать текст к краям или центру.

1. Выделите текст и изображение одновременно (Shift + клик)
2. Нажмите кнопку «Center horizontally in frame»
3. Проверьте визуальный баланс композиции

Пример использования в интерфейсе

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

Настройка текста для лучшей читаемости

Читаемость — главный критерий успешного наложения текста на изображение. Даже самый красивый шрифт будет бесполезен, если пользователь не сможет прочесть слова. Проблема возникает, когда текст теряется на фоне сложного изображения: например, тёмные буквы на тёмной листве или светлые на облаках.
Один из самых эффективных способов — добавление полупрозрачного фона под текст. Создайте прямоугольник (R), разместите его под текстовым слоем, но над изображением. Задайте ему цвет, например, чёрный с прозрачностью 60–70%. Это создаёт «подложку», которая повышает контраст.

Альтернатива — использование тени (drop shadow). В Figma это делается в разделе Effects. Добавьте тень с небольшим смещением (X: 0, Y: 1), размытием 2–4 и цветом, противоположным фону. Например, для тёмного фона — белая тень, для светлого — чёрная.

Обводка работает особенно хорошо для заголовков. В Figma её можно применить к тексту, но только если преобразовать текст в вектор (Ctrl+Shift+O). Однако этот метод делает текст неизменяемым, поэтому используйте его на финальных стадиях.
Ещё один подход — размытие фрагмента фона под текстом. Сделайте копию изображения, выделите нужную зону, примените Gaussian Blur (например, 10–15 px), обрежьте по маске. Это создаёт эффект «прозрачного окна», где текст легко читается.

Цветовая контрастность: нормы и практика

По стандартам WCAG (Web Content Accessibility Guidelines), минимальный уровень контрастности между текстом и фоном — 4.5:1 для обычного текста и 3:1 для крупного (более 18 pt). В Figma есть плагины, такие как «Contrast Checker», которые автоматически анализируют соответствие.

Работа со слоями и порядком элементов

Figma строится на принципе слоёв, где каждый элемент имеет свою позицию в стеке. Порядок слоёв критически важен: текст должен находиться выше изображения, иначе он будет скрыт. В правой панели Layers вы можете видеть иерархию объектов.
Если текст не виден, скорее всего, он находится под изображением. Перетащите его в списке слоёв выше. Также можно использовать горячие клавиши: Ctrl+] (вперёд), Ctrl+[ (назад).
Группировка элементов помогает организовать макет. Выделите текст и подложку, нажмите Ctrl+G. Теперь они будут двигаться как единый блок. Это удобно при создании повторяющихся карточек.
Auto Layout — мощный инструмент для динамических блоков. Примените его к группе из подложки и текста. Теперь при изменении текста фон будет автоматически подстраиваться по ширине и высоте. Это особенно полезно для локализации, когда текст на других языках длиннее.

Использование фреймов для управления позицией

Поместите изображение в отдельный фрейм. Затем добавьте внутрь этого фрейма текстовый элемент. Так вы сможете точно контролировать позицию текста относительно фона. При использовании Auto Layout внутри фрейма можно задать отступы (padding), чтобы текст не прижимался к краям.

Создание адаптивных заголовков с эффектами

Для современных макетов важно, чтобы текстовые блоки адаптировались под разные размеры экранов. Figma позволяет создавать responsive текстовые блоки с помощью сочетания Auto Layout и constraints.
Задайте текстовому блоку свойство «Fill container» по ширине. Если используется Auto Layout, установите направление — например, vertical. Добавьте внутрь заголовок и подзаголовок, настройте gap (расстояние между элементами).
Constraints определяют, как элемент ведёт себя при изменении родительского фрейма. Для текста, который должен оставаться по центру, выберите «Center». Для текста у края — «Left» или «Right».

Анимированные эффекты для hover (через prototyping)

Хотя Figma — не анимационный инструмент, вы можете смоделировать эффекты наведения. Создайте два состояния: обычное и при наведении. Во втором увеличьте размер текста, поменяйте цвет фона подложки или добавьте scale-эффект.
Свяжите фреймы через Prototyping: выберите исходный фрейм, нажмите на синюю точку, протяните к целевому. Выберите триггер «On Hover», действие «Smart Animate». Это полезно для демонстрации интерактивности клиенту.

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

Новички часто допускают ошибки, которые снижают качество макета. Одна из самых частых — игнорирование порядка слоёв. Текст оказывается под изображением, и дизайнер часами ищет причину, почему ничего не видно.
Другая ошибка — чрезмерное усложнение. Добавление трёх теней, градиентов и обводок делает текст «тяжёлым» и отвлекает от содержания. Лучше придерживаться принципа «less is more».

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

Экспорт результата: когда и как сохранять

После завершения работы важно правильно экспортировать макет. Выделите нужный фрейм или группу с текстом и изображением. В правой панели найдите раздел Export, нажмите «+». Выберите формат: PNG для прозрачного фона, JPEG — для сжатия, SVG — если используется векторный текст (после Outline).
Можно задать несколько вариантов экспорта: @1x, @2x, @3x — для ретина-экранов. Это гарантирует чёткость на всех устройствах.
Если вы передаёте макет разработчику, не забудьте включить режим «Design» в правом верхнем углу. Разработчик сможет посмотреть все слои, стили, отступы и цвета. Также можно использовать плагины типа «Tokens Studio» для передачи типографики.

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

Figma позволяет импортировать и экспортировать файлы в форматах Sketch, PSD (через конвертеры), а также публиковать ссылки на просмотр. Это удобно при совместной работе с командой, использующей разные инструменты.

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

Он также отмечает важность компонентов: «Создайте мастер-компонент для «текст-на-изображении» с вариантами: центр, слева, с подложкой, без. Потом просто дублируйте и меняйте текст. Это спасает при срочных правках.»

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

Заключение

Размещение текста поверх изображения в Figma — базовый, но критически важный навык для любого дизайнера. Успешная реализация зависит от понимания слоёв, контрастности, выравнивания и адаптивности. Использование Auto Layout, компонентов и эффектов позволяет создавать гибкие, профессиональные макеты.

• Всегда следите за порядком слоёв: текст должен быть выше изображения
• Обеспечьте контрастность с помощью подложки, тени или обводки
• Используйте Auto Layout для адаптивных и легко редактируемых блоков
• Группируйте элементы и создавайте компоненты для повторного использования
• Проверяйте читаемость и экспортите в нужных форматах