Как изменять текст в фигме (шрифт, размер, жирность, цвет, наклон)

Как в фигме поменять шрифт текста

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

Важно отметить, что большинство шрифтов к сожалению не поддерживают кириллицу, а значит и русский язык. В таком случае они просто будут заменяться на шрифт по умолчанию. Чтобы проверить, есть ли у шрифта поддержка кириллицы, можно просто написать одним шрифтом английские и русские буквы Аа и Aa. Если они выглядят одинаково — значит шрифт поддерживает кириллицу. Если нет — нужно поискать другой.

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

Чтобы сделать размер текста больше или меньше, также нужно обратиться к панели Typography. Число, находящееся прямо под названием шрифта как раз и указывает на его величину, поэтому для увеличения или уменьшения размера достаточно просто изменить это значение. Сделать это можно, введя нужные цифры в поле с помощью клавиатуры или выбрав его из выпадающего списка. Также, если выделить содержимое поля, стрелками вверх-вниз можно изменять размер на одну единицу, а если при этом зажать клавишу Shift — то сразу на десять.

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

Также стоит упомянуть еще один интересный факт: разные шрифты могут иметь разный визуальный размер при одинаковом размере численном. Это происходит из-за особенностей самого рисунка и формы букв в разных шрифтах. Например, Inter (слева) внешне выглядит значительно крупнее, чем Pompiere (справа), хотя численно они одинаковы:

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

Чтобы сделать все буквы большими (заглавными), нужно перейти в дополнительные настройки текста и выбрать там параметр Uppercase.

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

Самый простой способ выбрать нужную жирность — выбрать соответствующее начертание под названием шрифта на панели Typography. Для этого просто нажмите на стрелочку и в выпадающем списке кликните на соответствующее значение:

Thin — это самый тонкий шрифт, Regular — обычный, Black — самый жирный. Просто жирный называется Bold, полужирный — SemiBold. Могут быть и другие значения, всё зависит от конкретного шрифта.

А вот у некоторых шрифтов может быть всего одно начертание. В таком случае можно просто добавить ему обводку (Stroke) такого же цвета, но это скорее «костыль», а не решение проблемы. Лично я в такой ситуации рекомендую выбрать другой шрифт, имеющий несколько начертаний.

Также, как и в случае с размером, жирность может отличаться у разных шрифтов. Например, Regular начертание у Ultra (слева) выглядит жирнее, чем Black y Playfair Display (справа).

Как поменять цвет текста в фигме или сделать его прозрачным

Выделить текст каким-либо цветом можно с помощью параметра Fill, который находится на правой панели. Чтобы поменять цвет, просто нажмите на квадратик с цветом. Появится окно палитры. Двигая ползунки в разные стороны, можно выбрать любой из 16 миллионов цветов модели RGB. Здесь же можно сделать его прозрачным или полупрозрачным. При необходимости также можно задать шрифт в его числовых значениях, однако на практике этим дизайнеры пользуются редко.

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

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

Сделать наклонный текст в фигме можно выбрав соответствующее начертание на панели Typography в выпадающем списке под названием шрифта:

Начертания с наклоном будут содержать такие слова как Italic или Oblique, а слова перед ними указывают толщину:

К сожалению, многие шрифты не имеют в своем наборе наклонных начертаний, и если они вам нужны, лучшим решением будет подобрать другой шрифт. И всё же, есть способ наклонить текст, даже если его шрифт это не предусматривает. В частности, можно запустить плагин Warp и сделать наклон текста с его помощью:

Работает этот метод не идеально, и часто после его применения требуется редактировать текст еще и вручную, но это всё же лучше, чем ничего.

А если под наклоном текста имеется в виду просто его поворот — тут всё очень просто. Достаточно выделить слой с текстом и потянуть за его уголок, или же задать угол наклона на панели Position: