Как в Figma сделать плашку с прозрачным текстом

Коротко и ясно рассказываем, как быстро добиться интересного эффекта для вашего проекта.

Иллюстрация: Оля Ежак для Skillbox Media

Вячеслав Лазарев

Редактор. Пишет про дизайн, редактирует книги, шутит шутки, смотрит аниме.

Функция маски в Figma помогает добиваться очень интересных эффектов. Часто благодаря ей многие элементы интерфейса можно создать сразу в макете, а не открывать Photoshop и делать там дополнительные PNG-картинки. В этой инструкции рассказываем, как с помощью функции маски сделать плашку с прозрачным текстом.

Подготовка текста

Сделайте текстовый слой и напишите на нём что-нибудь. Чтобы результат получился красивее, у шрифта советуем использовать начертание Bold или Black.
Нажмите по слою правой кнопкой мыши и выберите Frame selection. При необходимости у получившегося фрейма можно включить Auto layout.
На верхней панели инструментов нажмите , чтобы сделать из фрейма с текстом компонент. Это необязательно, но так вам будет удобнее изменить надпись позже.

Подготовка плашки

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

Создайте прямоугольник и скруглите у него углы.
В свойствах заливки прямоугольника вместо Solid укажите Angular. Над цветным полотном появится ещё одна цветная полоска — она отражает текущие цвета градиента и позволяет их редактировать.
На цветную полоску добавьте через один цвета #FFFFFF и #A7A7A7 — они должны стоять примерно на равном расстоянии друг от друга. Чтобы добавить цвет на градиент, нажмите на любое свободное место между цветами внутри полоски.

Вместо белого и серого можно использовать и другие цвета. Например, как в голограмме.

Создание плашки

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