Как сделать обводку, тень, подчеркивание или ссылку текста в фигме

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

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

Если при этом удалить заливку (Fill), можно добиться эффекта прозрачного текста:

Прямо на панели Stroke можно задать цвет, прозрачность, положение (внутри или снаружи текста) и толщину обводки. А если нажать на иконку дополнительных настроек, можно будет также сделать её пунктирной, и выбрать способы сглаживания углов и соединений, что позволяет добиться очень интересных эффектов:

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

Добавить тень для текста или любого другого объекта в фигме можно нажав на иконку плюс на панели Effects. По умолчанию добавится черная тень с небольшим смещением и непрозрачностью 25%. Все эти параметры можно редактировать, нажав на иконку тени:

Помимо внешней, падающей тени (Drop Shadow) также можно добавить и эффект внутренней тени (Inner Shadow). Примечательно, что для одного текста можно добавить сразу несколько теней обоих видов, что позволяет добиться очень разнообразных эффектов:

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

Чтобы сделать подчеркивание текста в фигме, необходимо кликнуть на иконку дополнительных настроек на панели Typography и в появившемся окне нажать на иконку U (Underline) в графе Decorations.

Если после этого нажать на иконку со стрелочкой справа от иконок U и S, появится еще больше настроек подчеркивания — его форма (Style), толщина (Thickness), смещение (Offset), прерывистость (Skip ink) и цвет (Color):

Зачеркивание (перечеркивание) текста в фигме делается аналогичным образом, только вместо иконки U (underline) нужно нажать S (strikethrough).

Как в фигме вставить ссылку в текст

Сделать текст ссылкой в фигме проще простого. Нужно просто выделить нужное слово в текстовом блоке и нажать на иконку ссылки на панели Text в правой колонке интерфейса фигмы. В появившемся поле ввода останется ввести нужный URL-адрес и нажать клавишу Enter на клавиатуре. Вот и всё, ссылка готова!

Существует и еще один способ — более сложный. Чтобы им воспользоваться, важно чтобы будущая ссылка находилась внутри фрейма. Переходим на вкладку Prototype, выделяем слой, который хотим сделать ссылкой, жмем на иконку с плюсиком в графе Interactions, в появившемся окне ставим значение Trigger: On click, Action: Open Link, в поле Link вводим нужный адрес. Галочка Open in new tab означает, будет ли ссылка открываться в новом окне.

Чтобы проверить, работает ли ссылка, перейдите в режим просмотра прототипа и нажмите на неё.