0 added
0 removed
Original
2026-01-01
Modified
2026-02-21
1
<p><a>#Руководства</a></p>
1
<p><a>#Руководства</a></p>
2
<ul><li>14 мар 2025</li>
2
<ul><li>14 мар 2025</li>
3
<li>0</li>
3
<li>0</li>
4
</ul><p>Рассказываем, как настроить интерлиньяж, разрядку, абзацные отступы и установить дополнительные шрифты.</p>
4
</ul><p>Рассказываем, как настроить интерлиньяж, разрядку, абзацные отступы и установить дополнительные шрифты.</p>
5
<p>Иллюстрация: Полина Честнова для Skillbox Media</p>
5
<p>Иллюстрация: Полина Честнова для Skillbox Media</p>
6
<p>Редактор. Пишет про дизайн, редактирует книги, шутит шутки, смотрит аниме.</p>
6
<p>Редактор. Пишет про дизайн, редактирует книги, шутит шутки, смотрит аниме.</p>
7
<p>Благодаря встроенной интеграции с библиотекой Google Fonts Figma очень удобна для дизайнера. Но помимо этого графический редактор даёт пользователю много настроек шрифта, которые помогают очень тонко настроить все текстовые блоки на макете. О том, где всё это найти, - читайте в нашей инструкции.</p>
7
<p>Благодаря встроенной интеграции с библиотекой Google Fonts Figma очень удобна для дизайнера. Но помимо этого графический редактор даёт пользователю много настроек шрифта, которые помогают очень тонко настроить все текстовые блоки на макете. О том, где всё это найти, - читайте в нашей инструкции.</p>
8
<p>Из материала вы узнаете:</p>
8
<p>Из материала вы узнаете:</p>
9
<ul><li>Как устанавливать шрифты в <a>веб-версии Figma</a>и <a>десктопном приложении</a>.</li>
9
<ul><li>Как устанавливать шрифты в <a>веб-версии Figma</a>и <a>десктопном приложении</a>.</li>
10
<li>Что можно<a>настроить в шрифте</a>при вёрстке.</li>
10
<li>Что можно<a>настроить в шрифте</a>при вёрстке.</li>
11
<li>Что делать,<a>если у вас нет шрифта</a>из макета.</li>
11
<li>Что делать,<a>если у вас нет шрифта</a>из макета.</li>
12
<li>Где скачивать<a>бесплатные шрифты</a>.</li>
12
<li>Где скачивать<a>бесплатные шрифты</a>.</li>
13
</ul><p>По умолчанию в Figma доступны все шрифты из бесплатной библиотеки Google Fonts. Но можно подключить и те, что установлены у вас на компьютере.</p>
13
</ul><p>По умолчанию в Figma доступны все шрифты из бесплатной библиотеки Google Fonts. Но можно подключить и те, что установлены у вас на компьютере.</p>
14
<p><strong>1.</strong>Скачайте шрифт. Вы можете легко найти их в интернете, но советуем посмотреть в наших подборках.</p>
14
<p><strong>1.</strong>Скачайте шрифт. Вы можете легко найти их в интернете, но советуем посмотреть в наших подборках.</p>
15
<p><strong>2</strong>. Распакуйте скачанный архив. В папке вы увидите файл со шрифтом - если его открыть, появится окно с предпросмотром. В нём нажмите кнопку "Установить", и шрифт будет установлен. Таких файлов может быть несколько для разных начертаний.</p>
15
<p><strong>2</strong>. Распакуйте скачанный архив. В папке вы увидите файл со шрифтом - если его открыть, появится окно с предпросмотром. В нём нажмите кнопку "Установить", и шрифт будет установлен. Таких файлов может быть несколько для разных начертаний.</p>
16
<p><strong>3.</strong>Скачайте и установите<a>Font installer</a> - он нужен, чтобы Figma могла считывать ваши шрифты, которые вы устанавливаете на компьютер.</p>
16
<p><strong>3.</strong>Скачайте и установите<a>Font installer</a> - он нужен, чтобы Figma могла считывать ваши шрифты, которые вы устанавливаете на компьютер.</p>
17
<p><strong>4</strong>. Проверьте, что Font installer установлен. Зайдите в настройки аккаунта и прокрутите их до блока Fonts. Если всё работает правильно, вы увидите такую надпись:</p>
17
<p><strong>4</strong>. Проверьте, что Font installer установлен. Зайдите в настройки аккаунта и прокрутите их до блока Fonts. Если всё работает правильно, вы увидите такую надпись:</p>
18
<em>Изображение: Skillbox Media</em><p>В этом случае вам не нужно устанавливать ничего дополнительного, так как всё необходимое уже есть в настольном приложении.</p>
18
<em>Изображение: Skillbox Media</em><p>В этом случае вам не нужно устанавливать ничего дополнительного, так как всё необходимое уже есть в настольном приложении.</p>
19
<p><strong>1.</strong>Скачать и установить шрифт, как мы объясняли выше: выбрать нужный → распаковать архив → открыть файл → нажать "Установить".</p>
19
<p><strong>1.</strong>Скачать и установить шрифт, как мы объясняли выше: выбрать нужный → распаковать архив → открыть файл → нажать "Установить".</p>
20
<p><strong>2</strong>. Установленный шрифт сразу появится в Figma. Если нет, просто перезапустите программу.</p>
20
<p><strong>2</strong>. Установленный шрифт сразу появится в Figma. Если нет, просто перезапустите программу.</p>
21
<p>Шрифты отображаются на панели инструментов справа в блоке Typography. В нём есть несколько полей, которые помогут вам с настройками типографики:</p>
21
<p>Шрифты отображаются на панели инструментов справа в блоке Typography. В нём есть несколько полей, которые помогут вам с настройками типографики:</p>
22
<p><strong>1.</strong>Сам шрифт - отображается как его полное название. По умолчанию Figma предлагает пользователю использовать Roboto, но вы можете выбрать любой из доступных.</p>
22
<p><strong>1.</strong>Сам шрифт - отображается как его полное название. По умолчанию Figma предлагает пользователю использовать Roboto, но вы можете выбрать любой из доступных.</p>
23
<p><strong>2.</strong>Начертание - находится под названием шрифта. Количество начертаний и их названия зависят от разработчика шрифта, но обычно это Light, Regular и Bold.</p>
23
<p><strong>2.</strong>Начертание - находится под названием шрифта. Количество начертаний и их названия зависят от разработчика шрифта, но обычно это Light, Regular и Bold.</p>
24
<p><strong>3.</strong>Кегль, или размер шрифта, - находится напротив начертания.</p>
24
<p><strong>3.</strong>Кегль, или размер шрифта, - находится напротив начертания.</p>
25
<p><strong>4.</strong>Интерлиньяж - расстояние между строками.</p>
25
<p><strong>4.</strong>Интерлиньяж - расстояние между строками.</p>
26
<p><strong>5</strong>. Разрядка - расстояние между буквами.</p>
26
<p><strong>5</strong>. Разрядка - расстояние между буквами.</p>
27
<p><strong>6.</strong>Выравнивание. Горизонтальное - по центру, по левому или правому флагу. Вертикальное - вверх, вниз или по центру.</p>
27
<p><strong>6.</strong>Выравнивание. Горизонтальное - по центру, по левому или правому флагу. Вертикальное - вверх, вниз или по центру.</p>
28
<p><strong>7.</strong>В блоке Layout есть настройки заполнения модуля. В одну строку, автоподстройка по ширине, фиксированный размер.</p>
28
<p><strong>7.</strong>В блоке Layout есть настройки заполнения модуля. В одну строку, автоподстройка по ширине, фиксированный размер.</p>
29
<p>Шрифт можно найти по названию. Для этого нажмите на поле выбора и введите с клавиатуры нужное вам название - Figma сразу начнёт вам предлагать наиболее близкие по первым буквам варианты:</p>
29
<p>Шрифт можно найти по названию. Для этого нажмите на поле выбора и введите с клавиатуры нужное вам название - Figma сразу начнёт вам предлагать наиболее близкие по первым буквам варианты:</p>
30
<em>Изображение: Skillbox Media</em><p>Если нажать на иконку, вы откроете дополнительные настройки шрифта. В них вы можете добавить зачёркивание, линию под текстом, капитель, настроить абзацный отступ и список. Если шрифт вариативный - детально настроить начертание.</p>
30
<em>Изображение: Skillbox Media</em><p>Если нажать на иконку, вы откроете дополнительные настройки шрифта. В них вы можете добавить зачёркивание, линию под текстом, капитель, настроить абзацный отступ и список. Если шрифт вариативный - детально настроить начертание.</p>
31
<p>Шрифты в Figma можно применять к одному или нескольким текстовым объектам, отдельным словам или буквам:</p>
31
<p>Шрифты в Figma можно применять к одному или нескольким текстовым объектам, отдельным словам или буквам:</p>
32
<ul><li>Чтобы применить шрифт сразу к нескольким текстовым блокам, выделите их на холсте и настройте - выбранные блоки сразу изменятся.</li>
32
<ul><li>Чтобы применить шрифт сразу к нескольким текстовым блокам, выделите их на холсте и настройте - выбранные блоки сразу изменятся.</li>
33
<li>Чтобы применить шрифт к конкретной фразе, просто выделите её внутри текстового блока и настройте так, как вам нужно.</li>
33
<li>Чтобы применить шрифт к конкретной фразе, просто выделите её внутри текстового блока и настройте так, как вам нужно.</li>
34
</ul><p>Если коллега отправил вам файл без необходимых шрифтов, Figma об этом предупредит вот таким уведомлением:</p>
34
</ul><p>Если коллега отправил вам файл без необходимых шрифтов, Figma об этом предупредит вот таким уведомлением:</p>
35
<em>Изображение: Skillbox Media</em><p>Чтобы редактировать все текстовые объекты в проекте, нужно установить или обновить недостающие шрифты на вашем устройстве. Вы также можете выбрать другой подходящий шрифт из уже имеющихся, но при этом помните, что он поменяется и для вашего коллеги.</p>
35
<em>Изображение: Skillbox Media</em><p>Чтобы редактировать все текстовые объекты в проекте, нужно установить или обновить недостающие шрифты на вашем устройстве. Вы также можете выбрать другой подходящий шрифт из уже имеющихся, но при этом помните, что он поменяется и для вашего коллеги.</p>
36
<p>Чтобы изменить шрифт, в уведомлении кликните на поле с жёлтым квадратом и выберите замену. При необходимости можно изменить и начертание:</p>
36
<p>Чтобы изменить шрифт, в уведомлении кликните на поле с жёлтым квадратом и выберите замену. При необходимости можно изменить и начертание:</p>
37
<p>Не скачивайте шрифты из первых ссылок в поисковиках. Если вы ищете что-то, что увидели на сайте или в плакате, то, вероятнее всего, шрифт платный, и вы не сможете его использовать ни в личном, ни в коммерческом проекте без платной лицензии.</p>
37
<p>Не скачивайте шрифты из первых ссылок в поисковиках. Если вы ищете что-то, что увидели на сайте или в плакате, то, вероятнее всего, шрифт платный, и вы не сможете его использовать ни в личном, ни в коммерческом проекте без платной лицензии.</p>
38
<p>Чтобы избежать проблем, берите шрифты из проверенных библиотек. В Figma по умолчанию уже доступны Google Fonts, но если вам их недостаточно, дополнительные гарнитуры можно скачать из наших подборок:</p>
38
<p>Чтобы избежать проблем, берите шрифты из проверенных библиотек. В Figma по умолчанию уже доступны Google Fonts, но если вам их недостаточно, дополнительные гарнитуры можно скачать из наших подборок:</p>
39
<ul><li><a>10 бесплатных шрифтов от словолитни Shriftovik</a></li>
39
<ul><li><a>10 бесплатных шрифтов от словолитни Shriftovik</a></li>
40
<li><a>8 необычных шрифтов для экспериментальных проектов</a></li>
40
<li><a>8 необычных шрифтов для экспериментальных проектов</a></li>
41
<li><a>Базовый шрифтовой гардероб: 5 платных и 5 бесплатных гарнитур</a></li>
41
<li><a>Базовый шрифтовой гардероб: 5 платных и 5 бесплатных гарнитур</a></li>
42
<li><a>24 новых шрифта с кириллицей</a></li>
42
<li><a>24 новых шрифта с кириллицей</a></li>
43
<li><a>25 шрифтов с кириллицей</a></li>
43
<li><a>25 шрифтов с кириллицей</a></li>
44
<li><a>Космические шрифты</a></li>
44
<li><a>Космические шрифты</a></li>
45
</ul><a>Практический курс: "Figma с нуля до PRO" Узнать о курсе</a>
45
</ul><a>Практический курс: "Figma с нуля до PRO" Узнать о курсе</a>