Figma как изменить шрифт текста - Исправление ошибок и поиск оптимальных решений проблем

#Руководства

11 фев 2022
19

Рассказываем, как настроить интерлиньяж, разрядку, абзацные отступы и установить дополнительные шрифты.

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

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

Figma — очень удобна для веб-дизайнера благодаря встроенной интеграции с библиотекой Google Fonts. Но помимо этого она даёт пользователю много настроек шрифта, которые помогают очень тонко отрегулировать все текстовые блоки на макете. О том, где найти все эти настройки, — читайте в нашей инструкции.

9 мая 2022 года разработчики Figma выпустили обновление. В графическом редакторе изменился интерфейс и появились новые функции. Эта инструкция всё ещё может помочь вам освоить работу со шрифтами, но если вы только начали пользоваться Figma, советуем прочитать обзор последних обновлений.

Шрифты отображаются на панели инструментов справа в блоке Text. В нём есть несколько полей, которые помогут вам с настройками типографики:

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

Изображение: Skillbox Media

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

Шрифты в Figma можно применять к одному или нескольким текстовым объектам, отдельным словам или буквам:

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

По умолчанию в Figma доступны все шрифты из бесплатной библиотеки Google Fonts. Если вам их недостаточно, в редактор можно добавить и локальные шрифты.

В приложении для Windows и macOS локальные шрифты становятся доступны сразу после установки их на компьютер. Если вы используете Figma в браузере, то для этого отдельно нужно установить Figma Font Helper с официального сайта.

Чтобы проверить, сработал ли Figma Font Helper, зайдите в настройки аккаунта и прокрутите их до блока Fonts. Если Figma Font Helper установлен, вы увидите примерно такую надпись:

Изображение: Skillbox Media

Если коллега отправил вам файл без необходимых шрифтов, Figma предупредит об этом вот таким уведомлением:

Изображение: Skillbox Media

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

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

Самоучитель по Figma

Самые полные и полезные инструкции, которые помогут вам освоить все функции графического редактора.

Учись бесплатно:
вебинары по программированию, маркетингу и дизайну.

Участвовать

Научитесь: Figma с нуля до PRO
Узнать больше

Источник

По умолчанию, шрифты в Figma берутся из бесплатной коллекции шрифтов Google Fonts. Эта коллекция содержит в себе более 1000 шрифтов и поддерживает большое количество языков (в том числе и русский). Однако, дизайнеры не ограничиваются возможностью использования только этой коллекции шрифтов и могут устанавливать и использовать в макетах любые шрифты, которые смогут установить на свой компьютер.

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

Стандартные шрифты в Figma

Как уже было сказано выше, по умолчанию в Figma доступны все шрифты из Google Fonts. Для того, чтобы изменить шрифт текста, выделите текстовый элемент и найдите в правой части окна блок с названием Text. Сразу под названием блока вы увидите выпадающий список — это и есть список доступных шрифтов. В нем отображаются как шрифты Google Fonts, так и шрифты, которые установлены в вашей операционной системе.

Изменение шрифта текста в Фигме

Вы можете либо раскрыть список полностью, либо выделить название шрифта, и нажимая стрелки «Вверх» или «Вниз» на клавиатуре, выбрать подходящий шрифт.

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

Установка шрифтов

Для того, чтобы установить шрифт в Figma, вам нужно установить его в свою операционную систему. По сути, не существует такого процесса как «установка шрифта в Фигму». Редактор лишь отображает уже доступные в системе шрифты и шрифты Google Fonts.

Обычно, шрифты становятся доступными в Figma сразу после установки. В редких случаях вам нужно будет закрыть и заново открыть приложение Figma.

Установка шрифта в Windows

После того, как вы скачали архив со шрифтом, распакуйте его в отдельную папку. Щелкните правой кнопкой мыши на файле и в контекстном меню выберите опцию «Установить» (Install) для запуска процесса установки шрифта.

После окончания установки, вы можете найти новый шрифт перейдя в Панель управления > Шрифты. Так же, файлы шрифта будут доступны в директории C:WindowsFonts, соответственно директорию, в которую вы распаковали скачанный шрифт, можно удалить.

Установка шрифта в MacOS

Разархивируйте скачанный шрифт в директорию и двойным кликом откройте файл шрифта в окне просмотра. Далее, в этом окне кликните на кнопку Установить (Install). После установки, шрифт появится в окне приложения Шрифты (Font Book).

Так же как и в Windows, в MacOS шрифт скопируется в нужную системную директорию, поэтому после установки вы можете удалить как архив со шрифтом, так и директорию, в которую вы его разархивировали.

Figma Font Installer

Если вы используете браузерную версию Figma, то добавить внешние шрифты так же просто не получится. Для этого, вам нужно установить Figma Agent (Figma Font Installer). Скачать его можно на странице Downloads официального сайта. После установки этой программы, шрифты, установленные в операционной системе, будут доступны для выбора в веб-версии Фигмы.

Где скачать шрифты

В интернете вы без труда найдете большое количество сайтов с огромными коллекциями бесплатных шрифтов (в том числе с поддержкой кириллицы). Мы собрали топ-5 сайтов, где есть возможность предпросмотра шрифта, фильтрации списков по параметрам и главное — бесплатной загрузки.

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

Название сайта	Описание	Ссылка
DaFont	Огромная коллекция шрифтов на все случани жизни.	перейти на сайт
FontSpace	Большая подборка шрифтов для коммерческого использования	перейти на сайт
1001 Free Fonts	Несколько тысяч шрифтов разбитых на категории	перейти на сайт
Fontesk	Красивые шрифты, но мало фильтров и сортировок	перейти на сайт
TypeType	Бесплатные шрифты, сайт на русском языке	перейти на сайт

Сайты, где можно бесплатно скачать шрифты.

Главное, при использовании различных шрифтов в своих проектах, не забывать о здравом смысле. На курсах дизайна вас научат профессионально подбирать и использовать сочетания шрифтов для графического и веб-дизайна.

Источник

В этом уроке вы узнаете подробно про инструмент текст в фигме. Разберемся с популярными вопросами, которые возникают у многих пользователей программы. Посмотрите 6 минутное видео или воспользуйтесь текстовой версией урока ниже.

Как сделать текст в Figma

Чтобы создать текст в фигме, выберите сверху инструмент «Text». Затем нажмите на пустую область в вашем проекте либо зажмите левую клавишу мыши и создайте текстовый блок нужных размеров.

Как изменить начертание текста в фигме (сделать его жирным)

Чтобы изменить начертание текста, например седлать его жирным, выберите нужный текстовый блок и в правой панели поставьте bold, normal, light или другое значение.

Как изменить размер текста (кегль)

Чтобы изменить размер текста (кегль) в фигме в правой панели задайте другое значение вручную или выберите подходящее значение из списка.

Как изменить межстрочное расстояние (интерлиньяж) в Figma

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

Изначально стоит значение в процентах (%). Если хотите поставить пиксели, то напишите px.

Как изменить межбуквенное расстояние (трекинг) в фигме

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

Как задать расстояние между 2 абзацами текста в Figma

Чтобы задать расстояние между 2 абзацами в фигме измените значение в пикселях в поле, как показано на скриншоте выше. Если хотите создать новый абзац, то нажмите на клавишу «Enter» на клавиатуре.

Как изменить размеры ширины текстового блока в фигме

Автоматическая ширина текста «Auto width»

Если включить иконку «Auto width», то ширина текстового фрейма будет автоматически увеличиваться в зависимости от того текста, который там есть.

Автоматическая высота текста «Auto height»

При включении иконки автоматическая высота «Auto height» можно задать ширину вручную, а высота будет изменяться в зависимости от количества текста.

Фиксированный размер текстового блока «Fixed size»

При выставлении иконки «Fixed size» будет фиксированная высота и ширина текстового фрейма. Если вы будете добавлять новые предложения, то текст будет заходить за его границы.

Как изменить выравнивание (выключку) текста в Figma

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

Как разместить текст сверху, по центру или снизу (по вертикали фрейма)

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

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

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

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

Чтобы зачеркнуть текст в фигме, нажмите на 3 точки в панели редактирования текста и выберите пиктограмму обозначающий зачеркнутый текст (strikethrough).

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

Для создания красной строки в Figma, нажмите 3 точки в разделе для редактирования текста (как показано на скриншоте выше) и напротив надписи «Paragraph indent» поставьте значение для отступов в красной строке в пикселях (например 20).

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

Чтобы текст в фигме был заглавными (большими) буквами, нажмите на пиктограмму (три точки) справа и внизу надписи Letter case поставьте «AG». Текстовый блок, который вы выберите будет с большими буквами.

Как изменить цвет текста в фигме

Текст в фигме меняется стандартным образом в правой панели. Для того, чтобы изменить цвет какого-то текстового блока выделите его поменяйте значение как показано на скриншоте выше.

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

Чтобы задать обводку какому-то тексту выделите его, затем в правой панели напротив надписи Stroke нажмите на иконку «+». Измените толщину обводки. Чтобы обводка была видна текст должен быть большим и жирным.

Как сделать тень для текста в Figma

Чтобы сделать тень тексту в фигме, выделите его и нажмите на плюс напротив надписи «Effects». Можно поставить значение «Drop shadow» — внешняя тень, или «Inner shadow» — внутренняя тень.

Как экспортировать текст в фигме

Чтобы экспортировать текстовый блок из фигмы на ваш компьютер, выберите его и нажмите напротив надписи «Export» на плюс. Выберите нужный формат PNG, SVG, JPG или PDF. После этого нажмите кнопку экспорта и выберите место для сохранения.

Заключение

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

P.S. Так же переходите по этой ссылке, чтобы получить бонусный видео урок и материалы для создания дизайна сайтов (Landing Page) в Figma.

Автор статьи: Владимир Чернышов

P.P.S. Проект и автор не связан с компанией Figma (Not affiliated with Figma).

Источник

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

Текущий пост будет иметь прикладной характер и расскажет про инструменты, которые есть в Фигме для создания текстового контента. Мы разберем различные типы шрифтов, их комбинации, что и где лучше использовать. А так-же что обходить стороной.

Выбор шрифта для контента разного типа

Весь текстовый контент на сайтах условно можно разделить на заголовки и основной текст. Так например к основному тексту можно отнести описание в карточке с товарами или параграф в статье. В свою очередь к заголовкам можно отнести пункты меню или название товара, в той же карточке.

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

Связь Figma и Google Fonts

Первое о чем нужно знать при выборе шрифта. Фигма использует в качестве умолчательных шрифтов коллекцию Google Fonts. Поэтому, процесс выбора лучше вести не в самом редакторе Фигмы, а искать напрямую на сайте Google. Банально из-за лучшего интерфейса и большего числа фильтров.

Здесь легко найти шрифт под любую задачу, будь это рукописный, кириллический или декоративный шрифт.

Variable шрифты

Как известно, 2 шрифта отличаются друг от друга многими параметрами: шириной и высотой символов (кеглем), отступом между буквами и т.д. И когда мы выбираем шрифты для нашего сайта, то должны так подобрать пару, чтобы шрифт с одним набором параметров, гармонично смотрелся с другим. И даже если в теории вы знаете, какое соотношение свойств вы ищете, найти 2 и более шрифта с таким свойствами довольно проблематично. Но здесь есть лазейка.

Одним из интересных типов шрифтов, которые предлагает нам Google Fonts, являются variable шрифты. Они интересны тем, что в рамках одного шрифта, мы можем сами менять параметры, тем самым точно подгоняя ширину, высоту и другие свойства. А значит в наших силах, взяв за основу некоторый шрифт, модифицировать его таким образом, чтобы он идеально подходил для нашей задачи.

Одним из представителей, такого шрифта является Roboto Flex.

В левой части изображения можно увидеть панель с настройками – это и есть параметры, которые мы можем модифицировать. После того как вы подобрали нужную конфигурацию для шрифта вы можете использовать эти настройки как в Фигме, так и подключить в css.

В первом случае нам нужно перенести конфигурацию в панель настроек Figma. Для этого выберите нужный шрифт (В нашем случае Roboto Flex), нажмите на “…” (три точки) и в открывшемся меню перейдите на вкладку “Variable”.

Для подключения в css нужно либо скачать шрифт с Google Fonts, либо воспользоваться ссылкой. Оба способа доступны в правом открывшемся sidebar-е.

Как подобрать пару для шрифта

Представим, что у вас есть на примете шрифт, который вам нравится. И вы хотите с одной стороны иметь его в проекте, но с другой найти пару. Которая сочеталась бы с ним. Для этой цели можно использовать генератор шрифтов. В сети их довольно много, но в основном это генераторы, которые сразу предлагают вам готовую пару, но есть и исключение. С помощью Font Joy, можно подобрать пару к уже имеющемуся шрифту.

Для этого выберите нужный вам шрифт в панели слева и зафиксируйте его, нажав на замочек. После чего нажмите на “Generate”. Как пишут сами разработчики, сервис сгенерирует 2 парных шрифта, при помощи ИИ. И да, данный ресурс создает сразу 3 парных шрифта (Для заголовка, подзаголовка и текста). Но если для вас это избыточно, всегда можно отбросить один из них.

Кроме Font Joy также есть Designs AI. По функционалу очень похожи, хотя у второго на мой взгляд более симпатичный интерфейс.

Рукописные, декоративные (и не только) шрифты

Если в вашем проекте планируется использовать, в некоторой степени “необычные” шрифты, то вы опять же можете обратиться к Google Fonts и при помощи фильтров выбрать нужные шрифты, однако даже здесь число этих фильтров довольно скудное (язык, с засечкам/без, рукописные). В общем-то на этом практически все.

Однако, также существует ресурс, с большей вариацией различных типов шрифтов. Это Fonts Online.

Здесь можно выставить фильтр на декоративные, кириллические, английские, курсивные шрифты, шрифты для заголовков и множество других подвидов. К сожалению далеко не каждый шрифт, который вы найдете будет находиться в коллекции Google Fonts, а значит он не будет доступен вам из коробки в Фигме. Поэтому здесь у вас 2 выхода:

Брать выбранный шрифт и проверять, есть ли он у гугла
Добавить этот шрифт дополнительно в Фигму.

Как добавить шрифт, если не хватает стандартных

По большому счету при создании макета в фигме вы можете пользоваться шрифтами только из 2-х источников. Это Google Fonts, как уже было много раз озвучено, и шрифты, которые установлены у вас локально на компьютере. В случае с веб версией, гугловые шрифты доступны сразу, а вот установленные у вас на локальном пк фигма не видит, для этого нужно установить специальное дополнение Font installer.

Устанавливаете его себе на пк и забываете про него. Оно работает в фоновом режиме и будет запускаться при старте системы. Теперь все что вам осталось, скачать нужный шрифт, кликнуть дважды по файлу и нажать кнопку “Install”, чтобы установить шрифт в систему. После этого перезагрузите окно браузера в Фигме и установленный шрифт будет доступен.

Ссылка — на цикл статей по Фигме.

Источник

Download Article

When you’re new to Figma, seemingly-simple tasks like changing font size, fixing typos, and moving text can be a little tricky to figure out. This wikiHow article will teach you how to add, select, and modify text in Figma, as well as how to create and edit Text Styles that you can apply to your entire project.

1
Click the Text tool. This is the T icon at the top of Figma. Any time you want to change something about the text you’re working with, you’ll start by selecting this tool.^[1]
- Another quick way to open the Text tool is to press the T key on your keyboard.
- All text in Figma, like other objects, is created on layers. You’ll see all text layers in the Layers panel on the left side of Figma prefaced with a «T» icon.
2

Hover your mouse cursor over the text you want to edit. If the text is editable, you’ll see a blue dotted line appear around it—this is the text box. While your mouse is over the text, the pointer will turn into a vertical cursor.

Advertisement
3
Select the text you want to edit. You can do this by clicking and dragging the cursor over the text to highlight it in blue. When text is selected, its properties will appear in the Text properties panel on the right.
- If you don’t want to change the look of the text but instead want to add, delete, or correct something, click the cursor to place it at the desired position instead. Now you can modify as needed.
- You can also select the text by clicking the text layer in the Layers panel on the left. Additionally, if you want to change the look of multiple text layers at once, you can hold down the Shift key as you select multiple text layers.
4

Find out if a Text Style is applied to this text. If you see a panel called «Text» in the right sidebar when text is selected, there are no Text Styles applied to the selection. But if you don’t see a «Text» panel and do see one called «Ag,» this means there’s a text style applied to that text overriding your ability to make changes. See Using Text Styles for more information on Text Styles.
5
Change the look of the text. While the text or text layer is selected, the size, alignment, font face, and other options you choose in the Text panel will be applied to the text.
- Click the three horizontal dots at the bottom-right corner of the Text panel to expand the Type Details window. Here is where you’ll find your alignment, decoration, and spacing options.
- Use the Stroke panel to add an outline (or inner line) to your text and adjust its size and color.
- The Effects panel lets you add text effects like drop shadow, inner shadow, and blurring.
- If the Text panel is grayed out and you see a yellow icon with «A?» next to the font’s name, the font is not installed on your computer.^[2] You can’t edit the text unless you install the missing font or choose a replacement. To choose a replacement font, click the A? to open the Missing Fonts screen, and then select a font you have installed.
6

Change text color. The Color of text is actually controlled by the Fill panel in the right sidebar, not on the Text panel. Clicking the desired color in the Fill panel will recolor the selected text.
7
Move text around. When you move text in Figma, all text on the text layer will move. Here’s how to move text:
- Press the M key on the keyboard to select the Move tool.
- Click the text layer you want to move in the Layers panel. This surrounds the text with a bounding box.
- Click and drag the text to the desired position.
8
Resize text with the Scale tool. Figma recommends only changing the size of text using the Text panel, but you can also resize text with the scaling tool. The difference is that the text size may change to a different size than other text in your presentation, so things may not be as uniform. Still, this is handy if you’re working with text that you need to resize to fit in a certain area. Here’s how to scale text:
- Press the K key on the keyboard to open the Scale tool.
- Click the text layer in the Layers panel on the left.
- Drag any of the corner bounding boxes on the text outward to expand it, or inward to make it smaller.

1

Click the Text tool. This is the T icon at the top of Figma. This activates the Text tool. You can also open this tool by pressing the T key on your keyboard.
2
Choose how to create a new text layer. When you add text to Figma, you’re adding a new layer containing that text. There are two ways to create a text layer:
- One is to click the location where you want to add text. This creates a new text layer with text resizing set to Auto Width, which means that as you type, the width of the text box expands as you enter more text.^[3]
- The other is to click and drag your mouse to draw a text box with the desired dimensions. This not only defines the size of the text layer before you start typing, but also sets the text resizing to Fixed Width, which lets you enter more text. It also automatically wraps the text so it overflows onto the next line.
3
Start typing. Whether you clicked the mouse at the desired location or draw a text box, a cursor will appear and you can start typing. You’ll have some generic font settings by default—a smallish black font—but you change it by selecting it and using the Text panel in the right sidebar, or by creating or applying a text style.
- Your text layers appear in the Layers panel with a «T» before them.

1
Select some text that has properties you want to use. Text Styles allow you to define properties for text that you can use in any of your team’s projects. Once you’ve customized an area of text to your liking, click the name of the text layer in the Layers panel so you can create a style from it.
- For example, if you’re designing a website and want all section headers to be 36pt and right aligned, you can create a Header style with those properties and apply it to every header on your website.
- When you make changes to a Text Style’s properties later, such as its typeface, alignment, or spacing, the changes will affect all text to which you’ve applied that style. This is a great way quickly change text all across your entire design without tediously editing multiple text layers separately.
- Text Styles do not include color. You can add color using the Fill panel, or by creating a Color Style, which we’ll get to later.
2

Click the Style icon on the Text panel. The Text panel is in the properties bar on the right side of Figma, and the Style icon is the four dots at the panel’s top-right corner. This opens the Text Styles window.
3

Click the + on the Text Styles window. It’s at the top-right corner . This opens the «Create new text style» window.
4
Type a name and click Create style. This creates a new style using the properties of the selected text.
- Give the style a name that’s reflective of the content you’re applying the style to (such as «body» or «links»), or descriptive of the style itself (such as «red header»).
5
Assign a Text Style to other text. Now that you’ve created a Text Style, you can apply it to any text layers in your project. Here’s how:
- Select the layers you want to apply the style to in the Layers panel. To select multiple layers, hold down the Shift key as you click each layer’s name.
- Click the four dots at the top-right corner of the Text panel in the right sidebar.
- Click the name of the Text Style to apply it.
- When you try to modify text that has a style applied to it, you won’t see a Text panel on the right—you’ll just see «Ag» and the style’s name.
6
Remove a Text Style from text. If there’s a style applied to text that you’d rather just edit separately, or you just want to assign the text a different style, you can easily unlink the Text Style from the text. Here’s how:
- Either select the text layer(s) you want to remove the style from in the Layers panel, or press T to open the Text tool and highlight the text.
- Hover your mouse cursor over the name of the Text Style on the «Ag» panel in the right sidebar. You’ll see a small link icon appear.
- Click the link icon to unlink the style from the text. The Text panel will then reappear in the right sidebar so you can edit the text separately.
7
Change the properties of a Text Style. When you change something about a Text Style that’s applied to text in your project (such as its size or color), those changes will affect all text with that style. Here’s how you can make changes:
- Press T to activate the text tool, but don’t select any text.
- Click the four dots at the top-right corner of the Text panel to open the Text Styles window.
- Hover your mouse cursor over the style’s name.
- If you’re editing a local style (one you created in this project), you’ll see all of your options for editing the style now. You can also click the three dots to expand more options.
- If the style is in your Team Library, it will be marked a such, and editing it will be a little different. Click Go to style definition to view all styles in the Team Library, hover your mouse cursor over the style name, and click the two sliders to edit it there.
8
Create a Color Style. Because Text Styles don’t include color, you might want to create a Color Style so you can easily apply it styles to correspond with Text Styles. The process is very similar to creating a Text Style:
- Select some text and choose a color from the Fill panel.
- Click the Style icon on the Fill panel (the four dots).
- Click the + to create a new style.
- Type a name for the style, such as its color, and click Create style.
- You can now apply that color style to any layer in Figma, including text layers.
9
Share Text and Color Styles to the Team Library. If you’re a part of a team and you’re all working on the same document, you can publish your styles so they are available to your team. Here’s how:
- Click the Assets tab in the left sidebar.
- Click the Library icon (the open book) at the top.
- Click Publish.
- Type a description of the changes you’re making, such as «Adding header style,» for the version history.
- Click the down arrow next to «Styles and components» to view and select styles to publish.
- Click Publish.
- Anyone working on the project in Figma will be prompted to receive the update.

Ask a Question

200 characters left

Include your email address to get a message when this question is answered.

Submit

Thanks for submitting a tip for review!

References

About This Article

Article SummaryX

1. Press T to open the text tool.
2. Select a text layer to edit, or highlight some text.
3. Use the Text panel on the right sidebar to make changes.
4.

Did this summary help you?

Thanks to all authors for creating a page that has been read 24,555 times.

Is this article up to date?

Источник

Download Article

1
Click the Text tool. This is the T icon at the top of Figma. Any time you want to change something about the text you’re working with, you’ll start by selecting this tool.^[1]
- Another quick way to open the Text tool is to press the T key on your keyboard.
- All text in Figma, like other objects, is created on layers. You’ll see all text layers in the Layers panel on the left side of Figma prefaced with a «T» icon.
2

Hover your mouse cursor over the text you want to edit. If the text is editable, you’ll see a blue dotted line appear around it—this is the text box. While your mouse is over the text, the pointer will turn into a vertical cursor.

Advertisement
3
Select the text you want to edit. You can do this by clicking and dragging the cursor over the text to highlight it in blue. When text is selected, its properties will appear in the Text properties panel on the right.
- If you don’t want to change the look of the text but instead want to add, delete, or correct something, click the cursor to place it at the desired position instead. Now you can modify as needed.
- You can also select the text by clicking the text layer in the Layers panel on the left. Additionally, if you want to change the look of multiple text layers at once, you can hold down the Shift key as you select multiple text layers.
4

Find out if a Text Style is applied to this text. If you see a panel called «Text» in the right sidebar when text is selected, there are no Text Styles applied to the selection. But if you don’t see a «Text» panel and do see one called «Ag,» this means there’s a text style applied to that text overriding your ability to make changes. See Using Text Styles for more information on Text Styles.
5
Change the look of the text. While the text or text layer is selected, the size, alignment, font face, and other options you choose in the Text panel will be applied to the text.
- Click the three horizontal dots at the bottom-right corner of the Text panel to expand the Type Details window. Here is where you’ll find your alignment, decoration, and spacing options.
- Use the Stroke panel to add an outline (or inner line) to your text and adjust its size and color.
- The Effects panel lets you add text effects like drop shadow, inner shadow, and blurring.
- If the Text panel is grayed out and you see a yellow icon with «A?» next to the font’s name, the font is not installed on your computer.^[2] You can’t edit the text unless you install the missing font or choose a replacement. To choose a replacement font, click the A? to open the Missing Fonts screen, and then select a font you have installed.
6

Change text color. The Color of text is actually controlled by the Fill panel in the right sidebar, not on the Text panel. Clicking the desired color in the Fill panel will recolor the selected text.
7
Move text around. When you move text in Figma, all text on the text layer will move. Here’s how to move text:
- Press the M key on the keyboard to select the Move tool.
- Click the text layer you want to move in the Layers panel. This surrounds the text with a bounding box.
- Click and drag the text to the desired position.
8
Resize text with the Scale tool. Figma recommends only changing the size of text using the Text panel, but you can also resize text with the scaling tool. The difference is that the text size may change to a different size than other text in your presentation, so things may not be as uniform. Still, this is handy if you’re working with text that you need to resize to fit in a certain area. Here’s how to scale text:
- Press the K key on the keyboard to open the Scale tool.
- Click the text layer in the Layers panel on the left.
- Drag any of the corner bounding boxes on the text outward to expand it, or inward to make it smaller.

1

Click the Text tool. This is the T icon at the top of Figma. This activates the Text tool. You can also open this tool by pressing the T key on your keyboard.
2
Choose how to create a new text layer. When you add text to Figma, you’re adding a new layer containing that text. There are two ways to create a text layer:
- One is to click the location where you want to add text. This creates a new text layer with text resizing set to Auto Width, which means that as you type, the width of the text box expands as you enter more text.^[3]
- The other is to click and drag your mouse to draw a text box with the desired dimensions. This not only defines the size of the text layer before you start typing, but also sets the text resizing to Fixed Width, which lets you enter more text. It also automatically wraps the text so it overflows onto the next line.
3
Start typing. Whether you clicked the mouse at the desired location or draw a text box, a cursor will appear and you can start typing. You’ll have some generic font settings by default—a smallish black font—but you change it by selecting it and using the Text panel in the right sidebar, or by creating or applying a text style.
- Your text layers appear in the Layers panel with a «T» before them.

1
Select some text that has properties you want to use. Text Styles allow you to define properties for text that you can use in any of your team’s projects. Once you’ve customized an area of text to your liking, click the name of the text layer in the Layers panel so you can create a style from it.
- For example, if you’re designing a website and want all section headers to be 36pt and right aligned, you can create a Header style with those properties and apply it to every header on your website.
- When you make changes to a Text Style’s properties later, such as its typeface, alignment, or spacing, the changes will affect all text to which you’ve applied that style. This is a great way quickly change text all across your entire design without tediously editing multiple text layers separately.
- Text Styles do not include color. You can add color using the Fill panel, or by creating a Color Style, which we’ll get to later.
2

Click the Style icon on the Text panel. The Text panel is in the properties bar on the right side of Figma, and the Style icon is the four dots at the panel’s top-right corner. This opens the Text Styles window.
3

Click the + on the Text Styles window. It’s at the top-right corner . This opens the «Create new text style» window.
4
Type a name and click Create style. This creates a new style using the properties of the selected text.
- Give the style a name that’s reflective of the content you’re applying the style to (such as «body» or «links»), or descriptive of the style itself (such as «red header»).
5
Assign a Text Style to other text. Now that you’ve created a Text Style, you can apply it to any text layers in your project. Here’s how:
- Select the layers you want to apply the style to in the Layers panel. To select multiple layers, hold down the Shift key as you click each layer’s name.
- Click the four dots at the top-right corner of the Text panel in the right sidebar.
- Click the name of the Text Style to apply it.
- When you try to modify text that has a style applied to it, you won’t see a Text panel on the right—you’ll just see «Ag» and the style’s name.
6
Remove a Text Style from text. If there’s a style applied to text that you’d rather just edit separately, or you just want to assign the text a different style, you can easily unlink the Text Style from the text. Here’s how:
- Either select the text layer(s) you want to remove the style from in the Layers panel, or press T to open the Text tool and highlight the text.
- Hover your mouse cursor over the name of the Text Style on the «Ag» panel in the right sidebar. You’ll see a small link icon appear.
- Click the link icon to unlink the style from the text. The Text panel will then reappear in the right sidebar so you can edit the text separately.
7
Change the properties of a Text Style. When you change something about a Text Style that’s applied to text in your project (such as its size or color), those changes will affect all text with that style. Here’s how you can make changes:
- Press T to activate the text tool, but don’t select any text.
- Click the four dots at the top-right corner of the Text panel to open the Text Styles window.
- Hover your mouse cursor over the style’s name.
- If you’re editing a local style (one you created in this project), you’ll see all of your options for editing the style now. You can also click the three dots to expand more options.
- If the style is in your Team Library, it will be marked a such, and editing it will be a little different. Click Go to style definition to view all styles in the Team Library, hover your mouse cursor over the style name, and click the two sliders to edit it there.
8
Create a Color Style. Because Text Styles don’t include color, you might want to create a Color Style so you can easily apply it styles to correspond with Text Styles. The process is very similar to creating a Text Style:
- Select some text and choose a color from the Fill panel.
- Click the Style icon on the Fill panel (the four dots).
- Click the + to create a new style.
- Type a name for the style, such as its color, and click Create style.
- You can now apply that color style to any layer in Figma, including text layers.
9
Share Text and Color Styles to the Team Library. If you’re a part of a team and you’re all working on the same document, you can publish your styles so they are available to your team. Here’s how:
- Click the Assets tab in the left sidebar.
- Click the Library icon (the open book) at the top.
- Click Publish.
- Type a description of the changes you’re making, such as «Adding header style,» for the version history.
- Click the down arrow next to «Styles and components» to view and select styles to publish.
- Click Publish.
- Anyone working on the project in Figma will be prompted to receive the update.

Ask a Question

200 characters left

Include your email address to get a message when this question is answered.

Submit

Thanks for submitting a tip for review!

References

About This Article

Article SummaryX

1. Press T to open the text tool.
2. Select a text layer to edit, or highlight some text.
3. Use the Text panel on the right sidebar to make changes.
4.

Did this summary help you?

Thanks to all authors for creating a page that has been read 24,555 times.

Is this article up to date?

Источник

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

Шрифты из Google Web Fonts

Круто: в Фигме по умолчанию доступна вся библиотека шрифтов Google Fonts,

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

Если ты используешь десктопную версию, то все шрифты с твоего компьютера подтянуться автоматически в фигму. подробно о загрузке локальных шрифтов в браузерную версию программы описано в отдельной статье http://figmaweb.ru/kak-zagruzit-v-figma-shrifty/

• Horizontally — Текстовый блок обволакивает текст по горизонтали( если нет перехода на новую строку — текст выстроится в линию)

• Vertical — обводка текста по вертикали

• Fixed -фиксированный размер текстового блока вне зависимости от количества текста.

Так же ты можешь всегда уменьшить размер текстового блока до размера самого текста дважды кликнув по обводке

Основные настройки текста

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

Справа вверху блока иконка Text Styles — всплывающее меню стилей текста. Подробнее о создании стилей для текста читай в отдельной статье.

Далее идут поля:

• Typeface — само название шрифта

• Weight – выбор начертания

• Size не знаю что это такое))

• Line Height – межстрочное расстояние. В мае 2019 пофиксили баги этой настройки и теперь она работает, как нужно.

• Letter Spacing — трекинг, межбуквенное расстояние или разрядка.

• Paragraph Spacing — отступ между параграфами, разделёнными обрывом строки, Enter

• Paragraph Indentation — красная строка, абзац.

Нравится Figma? — подпишись на нас в вк и инстаграме

Так же тут у нас есть возможность выравнивать текст по левому краю, центру и по правому краю. Но что более примечательно — есть настройки по вертикальному выравниваю, что просто невероятно круто и полезно.

Настройка текстового блока в фигма

В доп меню за тремя точками скрывается более подробная настройка выравнивания текста внутри блока по вертикали и горизонтали

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

Блок Font Features

Содержит дополнительные возможности шрифта для…. блин, я не знаю для кого)) Это супер редко используемые фишки.

Discretionary and historical ligatures — использовать ли дискретные и исторические лигатуры.

Fractions – дроби. Соединять ли такие значения как 1/2 в один глиф с дробью.

Выставление степеней и числовых подписей

Numbers

Тут можно выбрать размеры ячейки для каждой буквы. Например, сделать так, чтобы каждая буква занимала определенную ширину или чтобы занимала ширину равную своему размеру. полезно для табличек и перфекционистов, имхо.

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

В начале тебе нужно выставить все настройки текста(выбрать шрифт, его размер, начертание и тд). После этого кликаешь на вот эту иконку (выделена красным) после кликаешь на плюсик и даешь название своему стилю текста в Figma.

Создать стиль текста в фигма

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

Термины в типографике

Основа типографики

Горячие клавиши в работе с текстом в Фигма

В начале ответы на популярные вопросы:

Как вставить текст в Фигма? — CTRL+v (удивительно)
Как растянуть текст в Фигме? — выбирай scale tool (K) и растягивай текст, как нужно. Он будет растягиваться пропорционально.

ctrl+с копировать
ctrl+v вставить
ctrl+d сделать дубль (дубль появляется мгновенно поверх копируемого элемента)
ctrl+alt+c копировать свойства текста(цвет, тени, обводку, для шрифта — размер, начертание, керлинг и тд.)
ctrl+alt+v вставить свойства
ctrl+shift+v вставить текст со свойствами текстового блока, в который ты вставляешь сам текст
ctrl+b текст станет жирным
ctrl+i текст станет наклонным
ctrl+u текст станет подчеркнутым

Источник

В статье рассказывается:

Стиль текста в Figma
Рекомендации по выбору шрифтов в Figma
Работа со шрифтами в Figma
Добавление шрифта в десктопную версию Figma
Использование шрифта с иконками в Figma
Полезные плагины для работы со шрифтами в Figma
Пройди тест и узнай, какая сфера тебе подходит:
айти, дизайн или маркетинг.

Бесплатно от Geekbrains

Шрифты в Figma синхронизированы с Google Fonts, если вы работаете в браузерной версии приложения. Если же вам необходимо добавить новые, создать подборку для работы в команде, то лучшим решением будет установить десктопную версию и все дальнейшие действия проводить через нее, чтобы не перегружать браузер.

У работы с шрифтами в Figma есть свои особенности, например, им нельзя задать цвет, равнение и т. д. Это вызывает неудобства только при первом знакомстве с платформой, в дальнейшем вы поймете, что это не недостатки, а преимущества. О том, как правильно работать со шрифтами в Figma, как добавить новые, вы узнаете из нашего материала.

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

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

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

Стиль текста в Figma

Далее перечислены свойства, присущие текстовым стилям в Figma, и параметры, которые тут задать нельзя.

Задаваемые свойства:

Доступные к установке в Figma шрифты, их размер, вес.
Межстрочный интервал (интерлиньяж).
Интервал между буквами и абзацами, структурирование текста.
Украшение текста (зачеркивающая и подчеркивающая линии).
Установка прописных и строчных букв, капитализация.
Прочие опции Open Type, то есть, работа с табличными данными, капителиями и проч.

Скачать файл

Свойства, отсутствующие в стиле текста Figma:

Цвет шрифта.
Выравнивание (выключка) текста по левому либо правому краю, по центру, по формату.
Выравнивание текстового поля (верхнее, нижнее, по центру).
Установка размера текстового поля (по горизонтали, по вертикали, фиксировано).

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

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

Работа с шрифтами в Figma

В Figma мало выбрать красивые, подходящие для вашей системы шрифты. Тут важно еще правильно задать интерлиньяж. К примеру, для заголовков и для основного текста он будет неодинаков. Далее описывается, от чего следует отталкиваться в каждом из этих случаев.

Параметры основного текста.

Главное требование к типографике основного текста – хорошая читаемость. Для этого можно немного увеличить межстрочное расстояние. Слишком плотный текст воспринимается труднее. Как выбрать оптимальный интерлиньяж для основного текста? Умножьте размер шрифта на 1,5, и посмотрите, какой вид в результате получится у текста.

Топ-30 самых востребованных и высокооплачиваемых профессий 2023

Поможет разобраться в актуальной ситуации на рынке труда

Подборка 50+ ресурсов об IT-сфере

Только лучшие телеграм-каналы, каналы Youtube, подкасты, форумы и многое другое для того, чтобы узнавать новое про IT

ТОП 50+ сервисов и приложений от Geekbrains

Безопасные и надежные программы для работы в наши дни

Уже скачали 19536

Влияние оптических эффектов.

Цвета текста и фона тоже имеют значение при определении интерлиньяжа. Положительный и негативный тексты (то есть, темные буквы на светлом фоне и наоборот, соответственно) смотрятся и читаются неодинаково. На восприятие влияет контекст и оптические эффекты, даже если свойства стиля оставить неизменными.

Влияние оптических эффектов

К примеру, в Figma можно установить шрифт и стиль специально для положительного либо отрицательного текста. Разница тут будет в том, что для темного фона применяется чуть большее расстояние между буквами.

Оформление заголовков.

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

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

Добавление шрифтов в десктопную версию Figma

Для того чтобы подключить новый шрифт в Figma, необходимо сначала установить версию программы для десктопов. В браузерную версию шрифты тоже можно добавлять (задействовав Figma font Helper), но все-таки лучше этого не делать, потому что движок браузера дает существенную дополнительную нагрузку системе.

Добавление шрифтов в десктопную версию Figma выполняется в несколько шагов:

Сначала необходимо скачать подходящий шрифт на сайте Figma (впрочем, не обязательно именно здесь).
Далее выполнить его установку.
После завершения – перезагрузить систему Figma.

Добавление шрифтов в десктопную версию Figma

Как изменить, то есть добавить и установить новый шрифт в Figma? Стандартным путем. К примеру, в Windows это можно сделать двумя способами:

Войти в директорию со скачанным файлом и дважды кликнуть мышкой по его названию. В новом окне появится начертание, вверху страницы – кнопка «Установить». Просто нажмите на нее.
Скопировать файл. Затем через «Проводник» зайти в системную папку Windows и там положить скопированный файл в папку Fonts. Всё, теперь он доступен для работы.

Перенос макета из Figma в Tilda: как сделать быстро

Использование шрифта с иконками в Figma

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

Программная и браузерная версии Figma рассчитаны на то, чтобы использовать шрифты с иконками. Как это осуществить? Порядок действий, следующий:

Скачать на компьютер файл с иконочным шрифтом.
Установить его.
Дать вашей версии дизайн-системы Figma возможность использовать загруженный шрифт. Десктопные версии поддерживают данную опцию на автомате (иконочных шрифтов это тоже касается). Если пользуетесь браузерным вариантом, то придется найти на официальном сайте специальное приложение, скачать его и установить у себя. Выше есть описание того, как это делается.

Теперь шрифт с иконками доступен для применения в проектах, только разработчик должен не забыть перезапустить систему после окончания установки. Если все-таки это не было сделано, то нужно закрыть Figma, а затем снова ее запустить.

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

Полезные плагины для работы с шрифтами в Figma

Подключать дополнительные шрифты в Figma можно с помощью специальных плагинов, которых на сегодняшний день насчитывается свыше 400. Далее описаны самые эффективные из них (по мнению разработчиков).

Полезные плагины для работы с шрифтами в Figma

Аdd number to text

В данном плагине предусмотрены расширения для форматирования контента. Это позволяет редактировать шрифты в системе Figma, задавать фильтр для создания списков, указывать характеристики продукта. Работать с плагином просто:

Сформируйте нужное количество полей.
Укажите названия.
Используя таблицу выбора (появляющуюся после клика правой кнопкой мыши, выделите все области).
В списке выберите нужный плагин.

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

Change Text

Ищет и заменяет слова. Во всплывающем окне открывается два поля, в одно нужно вписать слово, подлежащее замене, а во второе – новый вариант. Затем запускаете программу, и она автоматически меняет все найденные заданные слова – на другие. Если надо выполнить корректировку в нескольких полях, то плагин запускается в действие по каждому в отдельности.

Content Buddy

Тоже плагин для выполнения замен в тексте, но он работает даже с целыми предложениями. Как запустить? Кликнуть правой кнопкой мыши по слою с нужным текстом, зайти в контекстное меню и нажать там по плагину (снова с помощью ПКМ).

Text Counts

Считает число букв и число пробелов в тексте. Просто выделяете нужный кусок текста и подключаете программу.

Выполняет топографическую чистку текста, может заменять некоторые символы. То есть, если в тексте вдруг ошибочно стоит два тире подряд, то плагин найдет и исправит эту ошибку. Как-то специально настраивать Typograf не нужно, он может работать и в фоновом режиме. Выделите предназначенный для сайта текст, который хотите проверить, обратитесь к плагину и запустите его.

Довольно часто при работе с дизайн-системой Figma по мере надобности приходится изменять шрифты, подключать новые, больше подходящие для конкретного проекта. При использовании десктопной версии вы просто заходите в операционную систему и выполняете там установку. А в браузере понадобится инсталляция специального приложения.

Источник

Стандартные шрифты в Figma

Установка шрифтов

Установка шрифта в Windows

Установка шрифта в MacOS

Figma Font Installer

Где скачать шрифты

Как сделать текст в Figma

Как изменить начертание текста в фигме (сделать его жирным)

Как изменить размер текста (кегль)

Как изменить межстрочное расстояние (интерлиньяж) в Figma

Как изменить межбуквенное расстояние (трекинг) в фигме

Как задать расстояние между 2 абзацами текста в Figma

Как изменить размеры ширины текстового блока в фигме

Автоматическая ширина текста «Auto width»

Автоматическая высота текста «Auto height»

Фиксированный размер текстового блока «Fixed size»

Как изменить выравнивание (выключку) текста в Figma

Как разместить текст сверху, по центру или снизу (по вертикали фрейма)

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

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

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

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

Как изменить цвет текста в фигме

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

Как сделать тень для текста в Figma

Как экспортировать текст в фигме

Заключение

Выбор шрифта для контента разного типа

Связь Figma и Google Fonts

Variable шрифты

Как подобрать пару для шрифта

Рукописные, декоративные (и не только) шрифты

Как добавить шрифт, если не хватает стандартных

References

About This Article

Is this article up to date?

References

About This Article

Is this article up to date?

Шрифты из Google Web Fonts

Основные настройки текста

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

Горячие клавиши в работе с текстом в Фигма

Рекомендации по выбору шрифтов в Figma

Работа с шрифтами в Figma

Добавление шрифтов в десктопную версию Figma

Использование шрифта с иконками в Figma

Полезные плагины для работы с шрифтами в Figma

Аdd number to text

Change Text

Content Buddy

Text Counts

Читайте также: