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>20 авг 2021</li>
2
<ul><li>20 авг 2021</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>В Figma есть много инструментов для работы с текстами, но некоторые задачи невозможно решить её стандартными инструментами. В этом случае вам помогут плагины, которые расширяют и упрощают функционал графического редактора.</p>
7
<p>В Figma есть много инструментов для работы с текстами, но некоторые задачи невозможно решить её стандартными инструментами. В этом случае вам помогут плагины, которые расширяют и упрощают функционал графического редактора.</p>
8
<p>Рассказываем, какие плагины для Figma помогут вам работать с текстом и шрифтами.</p>
8
<p>Рассказываем, какие плагины для Figma помогут вам работать с текстом и шрифтами.</p>
9
<p>Плагин располагает выделенный текст на кривой или по краю любой стандартной фигуры:</p>
9
<p>Плагин располагает выделенный текст на кривой или по краю любой стандартной фигуры:</p>
10
Изображение: Skillbox Media<p><strong>Как пользоваться</strong></p>
10
Изображение: Skillbox Media<p><strong>Как пользоваться</strong></p>
11
<ul><li>Скачайте плагин<a>по ссылке</a>.</li>
11
<ul><li>Скачайте плагин<a>по ссылке</a>.</li>
12
<li>Зайдите в Figma, нарисуйте кривую с помощью пера и напишите любой текст.</li>
12
<li>Зайдите в Figma, нарисуйте кривую с помощью пера и напишите любой текст.</li>
13
<li>Выделите кривую и текстовый модуль.</li>
13
<li>Выделите кривую и текстовый модуль.</li>
14
<li>Нажмите правой кнопкой мыши выделенные предметы, в выпадающем меню перейдите в пункт Plugins и нажмите на To Path.</li>
14
<li>Нажмите правой кнопкой мыши выделенные предметы, в выпадающем меню перейдите в пункт Plugins и нажмите на To Path.</li>
15
<li>В появившемся окне нажмите на кнопку Link.</li>
15
<li>В появившемся окне нажмите на кнопку Link.</li>
16
</ul><p>Плагин разделит каждое слово на отдельные слои с буквами и разместит их по контуру фигуры или кривой:</p>
16
</ul><p>Плагин разделит каждое слово на отдельные слои с буквами и разместит их по контуру фигуры или кривой:</p>
17
Изображение: Skillbox Media<p>В Figma не очень удобно выбирать шрифты, так как они не отображаются на макете сразу. С помощью плагина Better Font Picker вы сможете в отдельном окне посмотреть, как выглядит каждый шрифт, и быстрее принять решение - использовать его или нет:</p>
17
Изображение: Skillbox Media<p>В Figma не очень удобно выбирать шрифты, так как они не отображаются на макете сразу. С помощью плагина Better Font Picker вы сможете в отдельном окне посмотреть, как выглядит каждый шрифт, и быстрее принять решение - использовать его или нет:</p>
18
Изображение: Skillbox Media<p><strong>Как пользоваться</strong></p>
18
Изображение: Skillbox Media<p><strong>Как пользоваться</strong></p>
19
<ul><li>Скачайте плагин<a>по ссылке</a>.</li>
19
<ul><li>Скачайте плагин<a>по ссылке</a>.</li>
20
<li>Зайдите в Figma, создайте и выделите текстовый объект на макете.</li>
20
<li>Зайдите в Figma, создайте и выделите текстовый объект на макете.</li>
21
<li>Нажмите правой кнопкой мыши на выделенный объект, в выпадающем меню перейдите в пункт Plugins и нажмите на Better Font Picker.</li>
21
<li>Нажмите правой кнопкой мыши на выделенный объект, в выпадающем меню перейдите в пункт Plugins и нажмите на Better Font Picker.</li>
22
<li>Появится окно предварительного просмотра, которое покажет, как выглядят ваши установленные шрифты. Выберите любой, и он сразу применится к выделенному тексту.</li>
22
<li>Появится окно предварительного просмотра, которое покажет, как выглядят ваши установленные шрифты. Выберите любой, и он сразу применится к выделенному тексту.</li>
23
</ul>Изображение: Skillbox Media<p>Чтобы не тратить время на подбор шрифтовых пар вручную, воспользуйтесь плагином Soroka. У него есть большая база из сочетаний бесплатных шрифтов Google Fonts, которые можно использовать в вашем макете:</p>
23
</ul>Изображение: Skillbox Media<p>Чтобы не тратить время на подбор шрифтовых пар вручную, воспользуйтесь плагином Soroka. У него есть большая база из сочетаний бесплатных шрифтов Google Fonts, которые можно использовать в вашем макете:</p>
24
Изображение: Skillbox Media<p><strong>Как пользоваться</strong></p>
24
Изображение: Skillbox Media<p><strong>Как пользоваться</strong></p>
25
<ul><li>Скачайте плагин<a>по ссылке</a>.</li>
25
<ul><li>Скачайте плагин<a>по ссылке</a>.</li>
26
<li>Зайдите в Figma, нажмите правой кнопкой мыши на макет, в выпадающем меню перейдите в пункт Plugins и нажмите на Soroka.</li>
26
<li>Зайдите в Figma, нажмите правой кнопкой мыши на макет, в выпадающем меню перейдите в пункт Plugins и нажмите на Soroka.</li>
27
<li>В появившемся меню выберите подходящий шрифт и нажмите на него. Плагин предложит вам несколько подходящих к нему пар.</li>
27
<li>В появившемся меню выберите подходящий шрифт и нажмите на него. Плагин предложит вам несколько подходящих к нему пар.</li>
28
<li>Нажмите на любую пару - откроется статья, где использованы эти шрифты. Чтобы экспортировать статью в макет, нажмите Export to artboard.</li>
28
<li>Нажмите на любую пару - откроется статья, где использованы эти шрифты. Чтобы экспортировать статью в макет, нажмите Export to artboard.</li>
29
</ul><p>Первый выбранный шрифт будет использоваться в заголовках, а дополнительный - в основном тексте:</p>
29
</ul><p>Первый выбранный шрифт будет использоваться в заголовках, а дополнительный - в основном тексте:</p>
30
Изображение: Skillbox Media<p>Разработчики не любят, когда в макете остаются дробные значения кегля. Они отображаются не в каждом браузере, а доставать дизайнера вопросами о каких-то незначительных пикселях долго. Чтобы проект из-за этого не тормозил, перед передачей макета в разработку воспользуйтесь плагином Fontiger - он автоматически округляет дробное значение кегля до ближайшего целого:</p>
30
Изображение: Skillbox Media<p>Разработчики не любят, когда в макете остаются дробные значения кегля. Они отображаются не в каждом браузере, а доставать дизайнера вопросами о каких-то незначительных пикселях долго. Чтобы проект из-за этого не тормозил, перед передачей макета в разработку воспользуйтесь плагином Fontiger - он автоматически округляет дробное значение кегля до ближайшего целого:</p>
31
Изображение: Skillbox Media<p><strong>Как пользоваться</strong></p>
31
Изображение: Skillbox Media<p><strong>Как пользоваться</strong></p>
32
<ul><li>Скачайте плагин<a>по ссылке</a>.</li>
32
<ul><li>Скачайте плагин<a>по ссылке</a>.</li>
33
<li>Откройте проект в Figma и выберите любой фрейм с текстом.</li>
33
<li>Откройте проект в Figma и выберите любой фрейм с текстом.</li>
34
<li>Нажмите правой кнопкой мыши на выделенный фрейм, в выпадающем меню перейдите в пункт Plugins и нажмите на Fontiger. Плагин округлит все дробные кегли.</li>
34
<li>Нажмите правой кнопкой мыши на выделенный фрейм, в выпадающем меню перейдите в пункт Plugins и нажмите на Fontiger. Плагин округлит все дробные кегли.</li>
35
</ul><p>Плагин учитывает текстовые модули только внутри фреймов. Если текст не стоит внутри фрейма, его кегль не изменится.</p>
35
</ul><p>Плагин учитывает текстовые модули только внутри фреймов. Если текст не стоит внутри фрейма, его кегль не изменится.</p>
36
Изображение: Skillbox Media<p>В Figma очень удобно следить за используемыми цветами - достаточно выделить все объекты на макете и посмотреть на панель справа. Но кегль, интерлиньяж, кернинг и шрифты таким образом не отображаются. Плагин Font Master решает эту проблему - он показывает все используемые настройки текста на макете и при необходимости создаёт из них полноценный стиль.</p>
36
Изображение: Skillbox Media<p>В Figma очень удобно следить за используемыми цветами - достаточно выделить все объекты на макете и посмотреть на панель справа. Но кегль, интерлиньяж, кернинг и шрифты таким образом не отображаются. Плагин Font Master решает эту проблему - он показывает все используемые настройки текста на макете и при необходимости создаёт из них полноценный стиль.</p>
37
Изображение: Skillbox Media<p><strong>Как пользоваться</strong></p>
37
Изображение: Skillbox Media<p><strong>Как пользоваться</strong></p>
38
<ul><li>Скачайте плагин<a>по ссылке</a>.</li>
38
<ul><li>Скачайте плагин<a>по ссылке</a>.</li>
39
<li>Зайдите в Figma, нажмите правой кнопкой мыши на макет, в выпадающем меню перейдите в пункт Plugins и нажмите на Font Master.</li>
39
<li>Зайдите в Figma, нажмите правой кнопкой мыши на макет, в выпадающем меню перейдите в пункт Plugins и нажмите на Font Master.</li>
40
</ul><p>Плагин покажет все сочетания шрифтов и кеглей и где они были использованы. Из любого сочетания можно сделать полноценный стиль:</p>
40
</ul><p>Плагин покажет все сочетания шрифтов и кеглей и где они были использованы. Из любого сочетания можно сделать полноценный стиль:</p>
41
Изображение: Skillbox Media<a>Практический курс: "Figma с нуля до PRO" Узнать о курсе</a>
41
Изображение: Skillbox Media<a>Практический курс: "Figma с нуля до PRO" Узнать о курсе</a>