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

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

Принципы визуального тиснения в цифровом дизайне

Тиснение (или «emboss») — это оптическая иллюзия, при которой элемент кажется вдавленным в фон. В реальном мире такой эффект достигается механическим прессованием, но в интерфейсах он строится на законах восприятия света. Мозг читает форму по градиентам: если верх ярче, а низ темнее — объект выглядит углублённым.

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

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

Как работает восприятие глубины

Человеческий глаз определяет рельеф по трём основным признакам:

• Контраст — перепад света и тени указывает на изменение плоскости;
• Градиент — плавный переход цвета создаёт объём;
• Край — наличие чёткой границы или мягкого смещения помогает распознать форму.

В Figma эти параметры контролируются через:

• Opacity (прозрачность) — для смягчения границ;
• Blur (размытие) — для имитации мягкого света;
• Gradient fills — для плавного изменения тона;
• Inner shadow — для создания эффекта «вдавленности».

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

Пошаговое создание эффекта тиснения

Давайте создадим тиснёный текст с нуля. Подойдёт и для логотипов, кнопок, значков. Процесс одинаков вне зависимости от формы.

Шаг 1: Создайте базовый элемент

Начните с текста или фигуры. Например, добавьте текст «PRESS ME» с жирным шрифтом (например, Montserrat Bold). Убедитесь, что он расположен на однотонном фоне — лучше всего серый или тёмный, чтобы контраст был заметен.

Цвет текста временно установите в светло-серый (#CCCCCC), а фон — в более тёмный (#444444). Это упростит настройку градиентов.

Шаг 2: Настройте градиентную заливку

Выделите текст, откройте панель Fill. Замените сплошной цвет на линейный градиент:

• Угол — 180° (сверху вниз);
• Верхний цвет — #FFFFFF с opacity 20–30%;
• Нижний цвет — #000000 с opacity 20–25%.

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

Шаг 3: Добавьте внутреннюю тень

Перейдите в раздел Effects → + Inner Shadow.

Настройки:

• X: 0px, Y: 1px;
• Blur: 2px;
• Spread: 0px;
• Цвет: #000000, opacity 30–40%.

Внутренняя тень создаст тонкий контур внутри буквы, подчёркивающий, что она «утоплена». Не переусердствуйте с размытием — слишком сильный blur «размоет» эффект.

Шаг 4: Добавьте внешнюю тень (опционально)

Для усиления глубины можно добавить очень мягкую внешнюю тень:

• Y: 1px;
• Blur: 4px;
• Color: #000000, opacity 10%.

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

Шаг 5: Настройте обводку (для фигур)

Если вы работаете с фигурой (кнопкой, иконкой), добавьте тонкую обводку:

• Width: 1px;
• Type: Inside;
• Color: #FFFFFF, opacity 15% — только сверху и слева;
• #000000, opacity 15% — снизу и справа.

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

Разновидности тиснения: матовое, глубокое, бархатное

Не всё тиснение одинаково. В зависимости от цели и стиля интерфейса используются разные варианты.

Матовое тиснение

Подходит для минималистичных интерфейсов, где важна сдержанность. Характеристики:

• Минимальный контраст (градиент от 10% до 20% opacity);
• Нет внешней тени;
• Только внутренняя тень с размытием 1–2 px.

Идеально для подписей, водяных знаков, фона текста.

Глубокое тиснение

Используется в промо-дизайне, лендингах, логотипах. Создаёт сильный 3D-эффект.

Такой стиль хорошо работает на тёмных фонах, особенно в сочетании с неоновыми акцентами.

Бархатное тиснение

Имитирует тиснение на бархатной бумаге — популярный приём в люксовых брендах. Добивается не через резкие тени, а через мягкие переходы.

• Фон — текстурированный (можно импортировать subtle fabric texture);
• Градиент — очень слабый (10–15% opacity);
• Blur внутренней тени — 4px, opacity 20%;
• Добавьте эффект «Noise» (через image fill) с низкой непрозрачностью.

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

Даже опытные дизайнеры допускают просчёты при создании тиснения. Вот самые распространённые.

Ошибка 1: Неправильное направление света

Если в интерфейсе свет условно падает сверху, а у вас тень от текста — сверху, мозг воспринимает его как выпуклый. Проверьте: верх ярче — значит, тиснение; низ ярче — выпуклость.

Ошибка 2: Слишком сильный контраст

Ярко-белый верх и чёрный низ делают текст «парящим», а не вдавленным. Используйте полупрозрачные цвета. Лучше недодать, чем переборщить.

Ошибка 3: Отсутствие единства в проекте

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

Ошибка 4: Игнорирование фона

Тиснение на белом фоне почти незаметно. Оно требует контраста. Используйте средне-серые, тёмные или текстурированные фоны.

Ошибка 5: Избыток эффектов

Градиент + внутренняя тень + внешняя тень + обводка + текстура — может превратиться в «грязь». Ограничьтесь 2–3 эффектами. Чем проще — тем изящнее.

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

Интервью с Михаилом Романовым, старшим продуктовым дизайнером в fintech-компании

— Почему тиснение редко используется в современных интерфейсах?

«Современный дизайн движется в сторону плоскости (flat design). Тиснение — это наследие skeuomorphism’а. Но оно возвращается в luxury-сегменте, брендинге, NFT и промо-материалам. Здесь важна тактильность, которую нельзя передать физически — только визуально.»

— Как сделать тиснение, не нарушая доступность?

«Главное — контраст. Даже с эффектом, текст должен соответствовать WCAG AA (минимум 4.5:1). Я всегда проверяю через плагин Stark. Иногда приходится усиливать нижний цвет градиента, чтобы компенсировать “потерю” яркости из-за теней.»

— Есть ли альтернативы тиснению в Figma?

«Да. Можно использовать двойной текст: один слой — чуть ниже с тёмным цветом и blur, второй — выше с градиентом. Ещё вариант — SVG-фильтры через плагины вроде “SVG Effects”, но это уже продвинутый уровень.»

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

Заключение

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

• Тиснение имитируется через градиент, внутреннюю тень и контраст.
• Свет должен падать сверху — верх светлее, низ темнее.
• Избегайте перегрузки эффектами — хватит 2–3 слоя.
• Тестируйте на разных экранах и в темной теме.
• Сохраняйте успешные стили как компоненты для повторного использования.