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

Картинка как заливка для текста

Самым простым способом сделать изображение в форме текста — это выбрать его как заливку для текстового слоя. Для этого нужно создать текстовый слой, выделить его и в графе Fill на правой панели фигмы нажать на превью заливки. В появившемся окне кликнуть на иконку изображения, затем — на кнопку Upload from computer. Далее просто выбираем заранее сохраненное изображение или фотографию со своего компьютера, и она принимает форму нашего текста.

При желании с помощью ползунков Exposure, Contrast, Saturation и так далее можно поменять яркость, насыщенность и прочие параметры изображения.

Параметр Fill означает, что картинка растянется на весь размер текста, а те её части, которые выходят за пределы, просто обрежутся:

Если выбрать Fill — картинка сожмется так, чтобы не вылазить за пределы размеров текста. При этом если пропорции не совпадают, часть текста останется прозрачной (для наглядности я добавил обводку тексту). Чаще всего этот вариант не подойдет.

В случае с Tile картинка будет повторяться некоторое количество раз, чтобы своими копиями заполнить весь текст. Число в процентах обозначает размер одной копии, его можно выставить произвольно.

Самым полезным для дизайнера является вариант Crop. Он позволяет произвольно поменять расположение картинки, изменить его пропорции и размеры, а также повернуть под любым углом, что дает наивысшую степень свободы для креатива.

Текст как маска для изображений

Предыдущий способ является самым простым, однако иногда его может быть недостаточно. Например, если мы хотим сделать картинку в тексте векторной или составной, состоящей из нескольких элементов. В такой ситуации оптимальным решением будет сделать текст маской.

Для примера прямо в фигме нарисуем простейшее изображение, но состоящее при этом из нескольких векторных слоев:

Далее нужно объединить все эти слои в единую группу, Для этого — выделить их, нажать правой кнопкой мыши и выбрать в выпадающем меню пункт Group selection.

Следующим шагом — написать текст и на панели слоев переместить его ПОД образовавшейся группой:

Затем перетащить текст в область картинки. Его не будет видно — это нормально, так и должно быть, поскольку на предыдущем этапе мы перенесли его вниз на панели слоев.

Далее — одновременно выделяем группу с изображением и текст, кликаем по ним правой клавишей мышки и выбираем там Use As Mask (использовать как маску). Также можно воспользоваться горячими клавишами.

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