Как добавить текст
Инструмент текста вызывается клавишей T. Дальше есть два способа, и разница между ними важна: просто клик по холсту создаёт надпись с автоматической шириной, а если протянуть мышью рамку — получится текстовый блок фиксированного размера.
Для заголовков удобнее автоширина, для абзацев — фиксированная ширина с автоматической высотой, тогда строки переносятся сами.
- Auto width — ширина растёт вместе с текстом, строка не переносится.
- Auto height — ширина фиксирована, текст переносится, высота подстраивается.
- Fixed size — размеры не меняются, лишний текст выходит за рамку.
Как оформить текст
Шрифт, размер, начертание, межстрочный интервал и выравнивание — в разделе Typography правой панели. Цвет текста задаётся в Fill, обводка букв — в Stroke.
Для русского текста выбирайте шрифты с кириллицей: в Google Fonts внутри Figma это Inter, Manrope, Montserrat, Roboto и многие другие. Шрифты с компьютера доступны в настольном приложении.
Как обрезать картинку в Figma
Обрезка в Figma неразрушающая: скрытая часть изображения не удаляется, и кадр всегда можно поправить.
Выделите слой с картинкой
Изображение в Figma — это заливка фигуры или фрейма.
Откройте настройки заливки
В правой панели в разделе Fill нажмите на миниатюру изображения.
Переключите режим на Crop
В выпадающем списке режима заливки выберите Crop. Появятся рамки обрезки.
Настройте кадр
Тяните за края, двигайте и масштабируйте картинку внутри рамки.
Примените
Кликните по холсту или нажмите Enter.
Обрезка маской и «вырезать» объект
Если картинку нужно вписать в круг или сложную форму, используйте маску. Нарисуйте фигуру, поместите её под изображением в списке слоёв, выделите оба слоя и нажмите Use as mask на верхней панели. Видно будет только то, что внутри фигуры.
Запрос «как вырезать в Figma» обычно означает одно из двух. Либо вырезать слой в буфер — обычное Ctrl+X, либо вырезать фигуру из фигуры — это булевы операции (Subtract, Intersect) в меню рядом с кнопкой маски. Убрать фон с фотографии встроенными средствами Figma нельзя — для этого нужен отдельный инструмент.
Типичные ошибки
- Текст «съехал» после правки — у блока стоял Fixed size. Переключите на Auto height.
- Картинка растянулась — режим заливки Stretch. Для фото используйте Fill или Crop.
- Маска закрыла всё — фигура-маска лежит выше картинки. Перетащите её ниже в списке слоёв.
Стили текста: чтобы не настраивать каждый раз
Когда в макете десятки надписей, размеры и шрифты быстро расползаются: здесь заголовок 32 пикселя, там 30. Решение — стили текста. Настройте заголовок один раз, нажмите значок с четырьмя точками в разделе Typography и создайте стиль, например «H1».
Теперь любой текст можно привести к этому стилю одним кликом, а изменение стиля обновит все надписи в файле. Обычно хватает пяти-шести стилей: два-три уровня заголовков, основной текст, подпись и текст кнопки.
Та же логика работает с цветами: сохраните фирменные цвета как стили заливки, и перекрашивать макет станет делом одной минуты.
Как обрезать всё изображение, а не заливку
Если нужно навсегда уменьшить картинку, например перед отправкой в мессенджер, обрежьте её кадром: поставьте фрейм нужного размера поверх изображения, поместите картинку внутрь фрейма и экспортируйте фрейм в PNG или JPG. На выходе будет только видимая часть.
Этот же приём помогает сделать превью для соцсетей: фрейм 1080×1080 с картинкой внутри экспортируется ровно в нужном размере.
Когда быстрее через ИИ-агента
Если надписи и обрезка нужны ради одной карточки товара или обложки, проще прислать фото и текст ИИ-агенту LeanTech. Он соберёт изображение нужного размера с читаемой русской типографикой и уберёт фон с фото, если нужно.
Агент не редактирует ваш макет в Figma и не повторяет пиксель в пиксель чужой фирменный стиль без исходников — присылайте цвета, шрифты и примеры.