Чтобы увеличить текст в Фигме, выделите слой с надписью и введите новое значение в поле размера шрифта в разделе Typography правой панели, либо используйте сочетание Ctrl+Shift с клавишами < и > на Windows (Shift+Command на Mac). Если нужно увеличить надпись вместе с рамкой и всеми соседними элементами, включите инструмент Scale клавишей K и потяните за край. Так работает Figma Design, а в Figma Slides те же свойства текста открываются в режиме дизайна. Коротко о способах:
- точное значение: поле Font size рядом с начертанием шрифта;
- быстро на глаз: сочетания клавиш с символами < и >;
- текст вместе с рамкой: инструмент Scale, клавиша K;
- весь макет сразу: правка текстового стиля, если он применён;
- в презентации Figma Slides: режим дизайна, Shift+D.
Чаще всего после увеличения текст вылезает за рамку или переносится не там, где нужно, и дело тут в настройке Resizing слоя. Ниже разберём каждый способ и то, как избежать таких сюрпризов.
Делаете в Figma слайды и тратите вечер на подгонку шрифтов? Попробуйте создать презентацию бесплатно в SimpleSlide: её генерирует ИИ примерно за 1 минуту. Введите тему или вставьте свой текст, и вы получите готовый шаблон с уже подобранными размерами текста, который легко отредактировать или сразу скачать в PPTX или PDF.
Где в Figma меняется размер текста?
Что отвечает за величину букв?
За размер символов отвечает свойство Font size. Оно находится в разделе Typography правой боковой панели, рядом с выбором шрифта и начертания. В справке Figma сказано так:
Размер шрифта управляет масштабом текста. Figma указывает размер шрифта в пикселях, не зависящих от плотности экрана (перевод наш).
Font size controls the scale of your text. Figma represents font size in density-independent pixels.
Отсюда практический вывод: число в поле размера относится к пикселям макета, а не к пунктам, как в Word или PowerPoint. При экспорте в PDF, по той же справке, Figma переводит размер в привычные типографские пункты. Поэтому один и тот же заголовок в макете и в PDF может обозначаться разными числами, и это нормально.
Чем размер шрифта отличается от размера рамки?
Новички часто тянут блок с надписью за угол и удивляются, что буквы остались прежними. У такого слоя в Figma несколько независимых габаритов, и справка перечисляет их по отдельности:
| Свойство | Что меняет | Где находится | Когда использовать |
|---|---|---|---|
| Font size | Величину самих букв | Раздел Typography | Нужно сделать текст крупнее или мельче |
| Dimensions | Ширину и высоту рамки слоя | Перетаскивание рамки на холсте | Нужно, чтобы абзац переносился по другой ширине |
| Resizing | Поведение рамки при изменении текста | Раздел Layout | Текст вылезает за край или рамка растёт не туда |
| Scale | Рамку и размер шрифта одновременно | Инструмент Scale, клавиша K | Нужно пропорционально увеличить группу элементов |
Как увеличить текст в фигме через панель свойств?
Как ввести точный размер?
Это самый предсказуемый способ. Шаги:
- Выделите нужный слой на холсте или в списке слоёв.
- В правой панели найдите раздел Typography.
- Нажмите стрелку у поля размера и выберите значение из списка либо введите своё число.
- Нажмите Enter, чтобы применить.
- Если нужно поменять только одно слово, сначала войдите в режим редактирования двойным щелчком и выделите его.
Справка Figma прямо рекомендует такой путь, когда нужно изменить размер текста относительно других элементов: размер шрифта останется целым числом, а значит, не будет проблем при экспорте и передаче макета разработчикам.
Как узнать размер шрифта в чужом файле?
Бывает, что макет прислали только для просмотра, а повторить заголовок нужно у себя. По справке Figma, человек с правами просмотра всё равно видит свойства: выделите слой и откройте вкладку Properties в правой панели. В разделе Typography будут шрифт, начертание и размер, а кнопка Copy скопирует все свойства в буфер обмена. Если у вас есть доступ к Dev Mode, там же видно значение в CSS-пикселях, которое пригодится верстальщику.
Ещё один нюанс касается единиц. Реальная величина букв на экране телефона или ноутбука зависит от разрешения устройства, поэтому одно и то же значение в макете на разных экранах выглядит по-разному. Сравнивайте не цифры, а впечатление: откройте прототип или экспорт на том устройстве, где его будут смотреть.
Какие сочетания клавиш помогают?
Если подбирать размер на глаз, удобнее работать с клавиатуры. Все сочетания ниже взяты из справки Figma и работают на выделенном тексте; одна из клавиш с угловой скобкой увеличивает значение, другая уменьшает:
| Действие | Windows | Mac |
|---|---|---|
| Увеличить или уменьшить размер шрифта | Ctrl+Shift и < или > | Shift+Command и < или > |
| Сделать начертание жирнее или тоньше | Ctrl+Alt и < или > | Option+Command и < или > |
| Изменить межбуквенный интервал | Alt и < или > | Option и < или > |
| Изменить межстрочный интервал | Alt+Shift и < или > | Shift+Option и < или > |
| Включить инструмент Scale | K | K |
Помните о раскладке: символы < и > на клавиатуре стоят на тех же клавишах, что русские Б и Ю. Если сочетание не срабатывает, проверьте, что не включён режим редактирования другого слоя, и попробуйте переключиться на английскую раскладку. Если вам нужен шрифт, которого нет в списке, сначала установите его, инструкция есть в статье как добавить локальный шрифт в Figma.
Как увеличить текст вместе с рамкой?
Как работает инструмент Scale?
Scale увеличивает слой целиком, сохраняя пропорции: рамка растёт, а размер шрифта пересчитывается вместе с ней. По справке Figma, вместе с объектом масштабируются обводки и размытия, а ограничения вложенных слоёв игнорируются. Это удобно, когда вы увеличиваете карточку с заголовком, подписью и иконкой и хотите, чтобы всё выросло одинаково. Порядок:
- Нажмите K или выберите Scale в панели инструментов.
- Выделите текст или группу с текстом.
- Потяните за край рамки, либо укажите множитель в панели Scale справа, например 1.5.
- Можно ввести и точную ширину или высоту: второе значение пересчитается само.
- Если нужно, задайте точку привязки, чтобы объект рос в нужную сторону.
Ограничения тоже есть: заблокированные слои и слои внутри экземпляра компонента так увеличить нельзя. Сначала разблокируйте слой. С экземпляром сложнее: правьте главный компонент, и изменения разойдутся по всем копиям.
Почему нельзя просто тянуть за рамку?
Можно, но результат будет другим. Если без Scale потянуть слой с надписью за край, Figma изменит только рамку, а буквы останутся прежними. Заодно настройка Resizing переключится на Fixed size, и дальше рамка перестанет подстраиваться под текст. С инструментом Scale другая беда: справка предупреждает, что он может давать дробные размеры шрифта и субпиксельные координаты, а это лишние артефакты при экспорте. Поэтому для одного заголовка лучше поле Font size, а для группы элементов инструмент Scale.
Почему текст не помещается после увеличения?
Как настроить Resizing?
Настройка Resizing решает, как ведёт себя рамка, когда текст становится длиннее или крупнее. Она находится в разделе Layout правой панели. Справка Figma описывает варианты так:
- Auto width: рамка растёт вширь вместе с текстом, а новая строка появляется только по нажатию Enter;
- Auto height: ширина фиксирована, а высота подстраивается под число строк;
- Fixed size: рамка остаётся того размера, который вы задали, независимо от объёма текста.
Режим ставится автоматически. Одиночный щелчок по холсту создаёт слой с Auto width, а если растянуть рамку мышью при создании, получится Fixed size. Именно поэтому увеличенный заголовок иногда уходит за пределы фрейма: в Auto width ему просто некуда переноситься. Переключите слой в Auto height, задайте ширину, и строки начнут переноситься.
Где ломаются строки после увеличения?
Когда заголовок становится крупнее, в строку помещается меньше слов, и переносы смещаются. У Figma для этого есть параметр Wrap style в Type settings. Вариант Balance распределяет строки равномерно, а Pretty старается не оставлять одно слово в последней строке. Для коротких заголовков на две-три строки это заметно меняет вид. Работает параметр только там, где надпись действительно переносится: у слоёв в режиме Auto width строка заканчивается лишь по нажатию Enter.
Что ещё влияет на вид текста?
Вместе с размером стоит проверить межстрочный интервал. По умолчанию он стоит в режиме Auto и зависит от шрифта; его можно задать в пикселях или в процентах от размера шрифта. При сильном увеличении заголовка процентный интервал масштабируется сам, а фиксированный в пикселях может оказаться слишком тесным. Вертикальное выравнивание, по справке, работает только у слоёв с Fixed size, у Auto width и Auto height оно игнорируется. Для длинных подписей есть ещё обрезка текста с ограничением числа строк в настройках Type settings.
Если заголовок должен переноситься внутри карточки или слайда, ставьте Auto height и задавайте ширину вручную. Тогда увеличение размера шрифта добавит строки вниз, а не вытолкнет текст за край макета.
Как изменить размер текста в Figma Slides?
Чем Slides отличается от Figma Design?
Figma Slides это отдельный редактор презентаций внутри Figma, и набор инструментов там упрощён. Для тонкой настройки текста в Slides есть режим дизайна. По справке Figma, он открывает функции Figma Design прямо в презентации, в том числе свойства текста с функциями OpenType, автолейаут и панель слоёв. Включается режим переключателем на панели инструментов или сочетанием Shift+D. Важное условие: для режима дизайна нужно полное место (Full seat) и права на редактирование презентации. Переходы между слайдами настраиваются на отдельной вкладке Animate.
Начинаете с нуля? Сначала соберите структуру слайдов, а типографику доводите в конце. Так меньше переделок.
Что будет с размером шрифта при экспорте?
Готовую презентацию из Figma Slides часто скачивают в PDF или PPTX. В первом случае размеры, как уже говорилось, переводятся в пункты. Во втором есть подвох со шрифтом: по справке Figma об экспорте из Slides, если шрифт недоступен в PowerPoint, слой получит стандартный шрифт PowerPoint. Строки при этом могут стать длиннее или короче, и подобранный вами кегль перестанет попадать в рамку. Как скачать презентацию и что проверить после выгрузки, подробно разобрано в материале Figma, скачать презентацию.
Какой размер текста выбрать для слайда?
Для презентаций есть понятный ориентир из справки Microsoft о доступных слайдах PowerPoint:
Используйте крупный (не менее 18 пт) шрифт без засечек с достаточным расстоянием между символами.
В Figma размер задаётся в пикселях, поэтому пункты надо пересчитать под ширину вашего слайда. Широкоэкранный слайд PowerPoint имеет ширину 13,333 дюйма, то есть около 960 пунктов. Если ваш фрейм в Figma шириной 1920 пикселей, он ровно вдвое шире в своих единицах, и 18 пт соответствуют примерно 36 px. Для другой ширины фрейма пропорцию легко пересчитать тем же способом.
Как изменить размер текста во всём макете сразу?
Помогут ли текстовые стили?
Да, если вы их используете. В разделе Typography есть кнопка для создания и применения текстовых стилей. Когда у заголовков и основного текста назначен стиль, достаточно один раз отредактировать сам стиль, и все слои с ним обновятся. Если стилей нет, выделите нужные текстовые слои через Shift или список слоёв и поменяйте размер в поле Font size для всех разом. Для слайдов и фреймов одного размера это быстрее, чем править каждый слой по отдельности; подготовку самих фреймов мы описали в инструкции как создать фрейм в Фигме.
А если шрифт вариативный?
У вариативных шрифтов в Type settings появляется вкладка Variable. По справке Figma, там настраиваются оси вроде насыщенности, ширины, оптического размера и наклона, причём набор осей зависит от автора шрифта. Ось оптического размера, если она есть, подстраивает рисунок букв под крупный или мелкий кегль. Сначала выберите кегль. Оси трогайте потом.
Как откатить неудачное увеличение?
Самый быстрый путь это отмена: Ctrl+Z на Windows и Command+Z на Mac. Она возвращает шаги по одному, так что после серии экспериментов придётся нажать несколько раз. Если вы уже успели закрыть файл или правки сделал коллега, поможет история версий Figma: в ней можно найти состояние до изменений и восстановить его или скопировать оттуда нужный фрагмент.
Чтобы откатывать приходилось реже, перед крупной переделкой продублируйте фрейм и экспериментируйте на копии. Удачный вариант оставите, неудачный удалите. Соседний фрейм рядом с оригиналом заодно позволяет сравнить два варианта глазами, а не по памяти.
Что проверить перед сдачей макета?
- размеры шрифта целые, без дробей после масштабирования;
- заголовки с Auto height не вылезают за фреймы;
- межстрочный интервал не стал тесным после увеличения;
- шрифт с кириллицей установлен у всех, кто будет открывать файл;
- экспорт в PDF или PNG выглядит так же, как на холсте.
И о доступности сервиса. Оплатить платные тарифы Figma российской банковской картой сейчас нельзя, а режим дизайна в Slides требует полного места (Full seat). Перед важным проектом проверьте, что ваш аккаунт открывается и файлы синхронизируются без сбоев.
