КАК РАСТЯНУТЬ ТЕКСТ В ФИГМЕ
Для растягивания текста в Figma нужно выбрать нужный текст и воспользоваться инструментом «Scale» (Масштаб). Чтобы это сделать, следует выделить текстовый блок, затем кликнуть на значок «Scale» и увеличить или уменьшить его размер, изменяя значения в полях свойств или используя комбинацию клавиш «Shift» + «Drag» (Перетаскивание с зажатой клавишей Shift).
Кроме того, если нужно изменить шрифт и размер текста для всего документа, можно воспользоваться настройками типографики (Typography), находящимися в правом меню. Следует выбрать нужный шрифт и размер в разделе «Text styles», а затем при необходимости изменить их с помощью инструмента «Scale» или вручную.
Также в Figma есть возможность использовать функцию «Auto Layout» для динамического изменения размера группы элементов в зависимости от содержимого. Чтобы использовать эту функцию, нужно выделить группу элементов, затем кликнуть на значок «Auto Layout» и выбрать тип расположения (vertical или horizontal). Затем можно задать параметры межэлементного расстояния и выравнивания элементов.
Если же нужно растянуть текст внутри формы, можно воспользоваться инструментом «Vector» и создать форму нужной формы, затем вставить в нее нужный текст и растянуть его с помощью инструмента «Scale».
В целом, в Figma достаточно много инструментов и настроек для работы с текстом, и выбор подходящего зависит от конкретной задачи и личных предпочтений пользователя.
4 инструмента как деформировать текст в Figma, Illustrator, Photoshop — Liquid text effect
Текст в Фигма. Работа с текстом в Figma
В Фигме есть хорошие возможности для работы с текстом через специальный тип слоёв. Чтобы создать текстовый слой, нажимаем T и кликаем в нужное место, либо растягиваем блок как прямоугольник или фрейм и в нем уже можно писать.
Шрифты из Google Web Fonts
Круто: в Фигме по умолчанию доступна вся библиотека шрифтов Google Fonts,
Не круто: нельзя динамически просматривать как будут выглядеть эти шрифты. Чтобы увидеть, как будет выглядеть шрифт в проекте его обязательно нужно применить. не удобно — факт. Лично я просматриваю шрифты на самом сайте гуглфонтс, копирую название подходящего и применяю его в Figma.
Если ты используешь десктопную версию, то все шрифты с твоего компьютера подтянуться автоматически в фигму. подробно о загрузке локальных шрифтов в браузерную версию программы описано в отдельной статье http://figmaweb.ru/kak-zagruzit-v-figma-shrifty/
Режимы текстового слоя в Figma
• Horizontally — Текстовый блок обволакивает текст по горизонтали( если нет перехода на новую строку — текст выстроится в линию)
• Vertical — обводка текста по вертикали
• Fixed -фиксированный размер текстового блока вне зависимости от количества текста.
Так же ты можешь всегда уменьшить размер текстового блока до размера самого текста дважды кликнув по обводке
Основные настройки текста
Если выделен текстовый слой, справа мы увидим панель работы с текстом.
Справа вверху блока иконка Text Styles — всплывающее меню стилей текста. Подробнее о создании стилей для текста читай в отдельной статье.
Далее идут поля:
• Typeface — само название шрифта
• Weight – выбор начертания
• Size не знаю что это такое))
• Line Height – межстрочное расстояние. В мае 2019 пофиксили баги этой настройки и теперь она работает, как нужно.
• Letter Spacing — трекинг, межбуквенное расстояние или разрядка.
• Paragraph Spacing — отступ между параграфами, разделёнными обрывом строки, Enter
• Paragraph Indentation — красная строка, абзац.
Так же тут у нас есть возможность выравнивать текст по левому краю, центру и по правому краю. Но что более примечательно — есть настройки по вертикальному выравниваю, что просто невероятно круто и полезно.
В доп меню за тремя точками скрывается более подробная настройка выравнивания текста внутри блока по вертикали и горизонтали
Красным выделен блок в котором можно настроить все буквы заглавные, строчные, каждое слово с большой буквы, подчеркнутый и зачеркнутый текст.
Блок 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 работа с любыми объектами, в том числе и с текстом, происходит через слои. В левой части находится панель со слоями, где вы сможете видеть все текстовые слои. Перед ними будет стоять буква Т.
Как добавить текст в Фигме
Укажите метод создания нового слоя с текстом
Добавляя текст в программу, вы создаёте новый слой, в котором он будет находиться. Текстовый слой можно создать двумя разными методами:
- Первый – указать место, где вы хотите разместить текст. В этом случае формируется новый слой, в котором ширина текста увеличивается автоматически в зависимости от количества написанного.
- Второй метод, как можно добавить текст в Фигме, заключается в том, чтобы кликнуть мышью на экране и нарисовать поле для текста необходимого размера. Так получается ещё до написания текста не просто определить размер поля, но и установить размер текста на указанную ширину, благодаря чему можно напечатать больше текста. Помимо этого, текст автоматически переносится на новую строку.
Скачивайте и используйте уже сегодня:
Топ-30 самых востребованных и высокооплачиваемых профессий 2023
Поможет разобраться в актуальной ситуации на рынке труда
Подборка 50+ бесплатных нейросетей для упрощения работы и увеличения заработка
Только проверенные нейросети с доступом из России и свободным использованием
ТОП-100 площадок для поиска работы от GeekBrains
Список проверенных ресурсов реальных вакансий с доходом от 210 000 ₽
Введите текст
Какой бы вы метод ни выбрали, у вас появится курсор, и вы сможете напечатать нужный текст. Изначально вы увидите только базовые настройки шрифта (мелкий чёрный шрифт), однако, вы можете поменять его. Для этого надо выбрать текст и через текстовую панель, которая находится справа, его изменить, либо создать и использовать стиль текста.
Редактирование текста в Фигме пошагово
Впервые столкнувшись с программой, пользователь может испытывать трудности даже с не сложными действиями. Например, как поменять текст в Фигме, исправить ошибки, отредактировать размер.
- Установите курсор мыши на тексте, который необходимо изменить
Если его можно менять, то вокруг него образуется текстовое поле – синяя прерывистая линия. Также при наведении стрелки мыши на текст, она поменяет свой вид на вертикальный курсор.
- Выделите фрагмент текста, над которым собираетесь работать
Для этого зажмите левую кнопку мыши и проведите по тексту. Он подсветится синим цветом. Свойства выделенного фрагмента отобразятся в правой части экрана в панели свойств. Если вам не надо менять внешний вид написанного, а необходимо что-то дописать или удалить, то установите курсор в нужной части текста. Так вы сможете менять то, что требуется.
Выделить текст можно и с помощью самого слоя, нажав на него с панели слоёв, которая находится слева. Чтобы изменить сразу несколько текстовых слоёв, зажмите клавишу Shift и щёлкните на те слои, которые вам нужны.
- Выясните, есть ли у текста какой-то стиль
Если при выделении текста в правой части экрана появилась панель «Текст», то на нём нет наложенного стиля. Однако, вместо той панели может высветится «Ag». Значит текст уже имеет стиль, из-за которого вы не сможете его поменять.
- Отредактируйте внешний облик текста
Выделенный текст в Фигме можно как выровнять, так и изменить размер, начертание и прочие характеристики, используя текстовую панель. Информацию о типе можно узнать, нажав на три точки справа в нижнем углу текстового окна. Там вы сможете изменить показатели выравнивания, оформления и интервалов. Примените панель обводки для добавления к тексту внутренней линии, контура и изменения размера, цвета. С помощью панели эффектов можно сделать тень тексту, размытие.
Если текст в Фигме выделился серым цветом, а рядом с названием шрифта стоит значок с надписью «А?», значит на вашем устройстве отсутствует данный шрифт. В таком случает возможность изменять текст будет недоступна до тех пор, пока вы не установите нужный шрифт или замените его на тот, что у вас есть. Для замены шрифта кликните на значок «А?». В открывшемся окне «Отсутствующие шрифты» вы сможете выбрать установленный шрифт.
- Поменяйте цветовое решение надписи
Цвет текста меняется не в текстовой панели, а в окне заливки, которая располагается справа. Для использования желаемого цвета нажмите на него на панели заливки, после этого текст приобретёт выбранный оттенок.
- Поменяйте расположение текста
Если вы решили поменять местоположение текста в Фигме, то при этом весь текст на слое переместится. Как изменить расположение надписи:
Параметры текста в Figma
Когда мы создаем текстовые поля в Фигме, им присваиваются некоторые стандартные параметры, которые могут быть не очень удобны при дальнейшей работе. На скриншоте снизу мы видим, например, что реальный текст вылезает за границы поля, а соответственно, нам как минимум будет неудобно позиционировать другие элементы в документе.
Форматирование текста в Фигме
Стрелкой на изображении ниже отмечено подменю, в котором находятся некоторые полезные поля, позволяющие нам нормально позиционировать и декорировать текст.
Меню параметров текста в Фигме
Как изменить межстрочное расстояние
Чтобы изменить расстояние (отступ по вертикали) между строками, измените параметр Line Heigh.
Значение по умолчанию — Auto. Оно будет рассчитываться исходя из размера шрифта.
Допустимые значения: от нуля и до бесконечности (ну или почти бесконечности).
Межстрочное расстояние в Фигме
Если захотите снова установить значение Auto, просто оставьте это поле пустым.
Как изменить расстояние между абзацами
Чтобы увеличить или уменьшить расстояние между параграфами (иными словами там, где в тексте присутствует перенос), измените параметр Paragraph Spacing.
Расстояние между абзацами в Фигме
Значения Auto для этого параметра не предусмотрено, по умолчанию Figma ставит его равным 20.
Как изменить отступ у абзаца
Для того, чтобы сделать у абзаца отступ (там, где есть перенос текста), измените параметр Paragraph Identation.
Значение по умолчанию — 0.
Отступ в абзаце в Фигме
Обратите внимание, что если вы выставите значение этого параметра больше ширины текстового поля, Фигма просто сдвинет целиком первую строчку на следующую, оставив первую строку пустой.
Как изменить расстояние между символами (кернинг)
Чтобы изменить расстояние между символами, измените параметр Letter Spacing. Этот параметр измеряется в процентах и по умолчанию равен нулю.
Межсимвольное расстояние в Фигме
Выравнивание текста в Figma
Figma позволяет выравнивать текст внутри контейнера по вертикали и горизонтали:
Для изменения выравнивание переключите тумблеры параметров Text Align и.Align
Выравнивание текста в Фигме по горизонтали 
Выравнивание текста в Фигме по вертикали
Ресайзинг текста или как растянуть текст в Фигме
Один из наиболее важных параметров при работе с макетами. От него зависит то, как будет вести себя контейнер в зависимости от содержания — размера и количества текста.
Этот параметр скрыт в дополнительном меню и содержит три предустановки: Grow Horizontally, Grow Vertically, Fixed size.
Меню параметров текста в Фигме
Grow Horizontally
При выборе данного параметра Фигма будет растягивать каждый параграф в одну строчку, иными словами, его ширина будет определена количеством текста до переноса.
Растягивание текста во всю ширину
Учтите, что при смене параметра Resizing формат текста вы сможете вернуть назад только сочетанием ctrl+z / cmnd+z, а не выставлением прежнего параметра.
Также важно отметить, что если вы измените ширину текста после выставления Grow Horizontally, ресайзинг автоматически переключится на Grow Vertically.
Grow Vertically
Наиболее универсальное значение, которое выставляет автоматическую высоту контейнера при заданной вручную ширине.
Растягивание текста по высоте в зависимости от ширины
При этом важно понимать, что нижняя часть контейнера будет заканчиваться строго там же, где и текст.
Fixed size
При этом значении текстовое поле регулирует ширину текста, но текст может выходить за пределы поля по вертикали.
Фиксированный размер текста в Фигме