В фигме работа с текстом: Текст в Фигма. Работа с текстом в Figma |

Содержание

Текст в Фигма. Работа с текстом в 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 — красная строка, абзац.

Нравится 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 текст станет подчеркнутым

работа с текстом и изображениями / Skillbox Media

Дизайн

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

25 мар 2022
0

Как быстро сделать красивые векторные фигуры, перекрасить картинку и оттипографить текст.

Vkontakte

Twitter

Скопировать ссылку

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

Вячеслав Лазарев

Редактор. Пишет про дизайн, редактирует книги, шутит шутки, смотрит аниме.

В Figma очень удобно устроена работа с текстом и изображениями, но некоторые вещи приходится делать вручную — а это обычно долго. Например, чтобы просто перекрасить PNG-картинку, вам придётся делать отдельную слой-маску. Избавиться от этой рутины вам помогут плагины, которые расширяют функционал графического редактора.

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

Этот плагин поможет быстро оттипографить текст в документе — он автоматически расставит неразрывные пробелы после предлогов и союзов, поменяет кавычки на правильные «ёлочки» и «лапки».

Как пользоваться

Скачайте плагин по ссылке.
Зайдите в Figma, нажмите правой кнопкой мыши на текстовый модуль, в выпадающем меню перейдите в пункт Plugins и выберите Typograff.
Укажите, какие кавычки вы хотите использовать, и нажмите на кнопку «Оттипографить». Вместе с новыми кавычками в тексте расставятся неразрывные пробелы.

С помощью этого плагина можно быстро перекрасить PNG-картинку в однотонный цвет без использования слой-масок. Также через Color Overlay можно убрать из изображения любой цвет.

Как пользоваться

Скачайте плагин по ссылке.
Зайдите в Figma, нажмите правой кнопкой мыши по PNG-картинке, в выпадающем меню перейдите в пункт Plugins и выберите Color Overlay.
Откроется окно плагина. В верхнем поле укажите, каким цветом нужно залить картинку, а в нижнем — какой цвет нужно убрать.
Нажмите Colorize, и изображение изменится.

Меняет палитру любого изображения. Например, поможет поменять цвета красной картинки на синий или превратить голубую фотографию моря в фиолетовую.

Как пользоваться

Скачайте плагин по ссылке.
Зайдите в Figma, нажмите правой кнопкой мыши по картинке, в выпадающем меню перейдите в пункт Plugins и выберите Spectrum.
В появившемся окне выберите количество цветов в новой палитре и их яркость. Также вы можете изменить режим наложения цветов: shades (оттенки) hue (насыщенность) или сделать собственный.
Нажмите Apply Palette, и изображение изменится.

Этот плагин — условно бесплатный. В Figma вы можете изменить только три картинки с бесплатного аккаунта. Полная версия стоит 29 долларов.

Веб-версия сервиса доступна бесплатно без покупки.

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

Как пользоваться

Скачайте плагин по ссылке.
Зайдите в Figma, нажмите правой кнопкой мыши по макету, в выпадающем меню перейдите в пункт Plugins и выберите Spirous.
В появившемся окне выберите понравившуюся фигуру.
Чтобы изменить фигуру, наведите курсор на её изображение и кликните на карандаш в правом нижнем углу.
Чтобы добавить фигуру на макет, кликните по ней в окне плагина.

Превращает растровые картинки в векторные. Хорошо работает только с однотонными изображениями, где чётко можно разглядеть границы для вектора.

Как пользоваться

Скачайте плагин по ссылке.
Зайдите в Figma, нажмите правой кнопкой мыши по нужной картинке, в выпадающем меню перейдите в пункт Plugins и выберите Image tracer.
В появившемся окне нажмите Place traced vector.
При необходимости в меню Show options можно настроить параметры вывода векторного изображения.

Больше о Figma

Vkontakte

Twitter

Скопировать ссылку

Figma с нуля до PRO

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

Узнать про курс

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

Участвовать

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

Фирма Chermayeff & Geismar & Haviv обновила логотип Warner Bros. к столетию студии
22 дек 2022

Швейцарское агентство Dinamo выпустило 10 дизайнерских зубных щеток
22 дек 2022

Художник Grotesk выпустил архивный принт с Месси ограниченным тиражом
21 дек 2022

Понравилась статья?

Да

Работа с текстом | Плагин API

При работе с текстовыми узлами необходимо учитывать множество моментов:

Смешанные стили
Загрузка шрифтов
Отсутствующие шрифты

Смешанные стили

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

Предположим, что есть текстовый узел, содержащий текст « привет мир». Ниже приведены некоторые свойства и функции для получения имени шрифта:

Получение имени шрифта

 // Вывод: figma.mixed 
 textNode.fontName  // Вывод: { family: 'Inter', style: 'Bold' } 
 textNode .getRangeFontName(0, 5) 
  // Вывод: { family: 'Inter', style: 'Regular' } 
 textNode.getRangeFontName(5, 11) 
  // Вывод: figma.mixed 
 textNode.getRangeFontName(4, 6) 
  /* 
 Вывод: 
  [ 
 { 
 символов: "hello", 
 start: 0, 
 end: 5, 
 fontName: { семейство: 'Интер', стиль: 'Жирный' }, 
 }, 
 { 
 символов: "мир", 
 начало: 5, 
 конец: 11, 
 fontName: { семейство: 'Интер', стиль: 'Обычный ' }, 
 } 
 ] 
 */ 
 textNode. getStyledTextSegments(['fontName'])

Обычно мы рекомендуем использовать свойства текста, такие как fontSize , fontName и т. д. при получении/настройке стилей для всего текстового узла или при проверке наличия смешанных значений.
Используйте функции getRange* и setRange* для получения/установки стилей для определенного диапазона символов. Если вы хотите узнать, каковы значения свойств и к каким символам они применяются, используйте getStyledTextSegments .

Загрузка шрифтов

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

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

characters
fontSize
fontName
textStyleId
textCase
textDecoration
letterSpacing
lineHeight
setRangeFontSize()
setRangeFontName()
setRangeTextCase()
setRangeTextDecoration()
setrangeletterspacing ()
SetRangelineHeight ()
Setrangetextstyleid ()

Вы делаете , которые не нужно, чтобы нагрузить только в цвете, и это затронуты, и это, как и в цвете, и это, как и в цвете, и в цветах, и это, как и в цвете, и в цветах, и это, как и в цвете, и это, как и в цвете, а также, и они не требуют . заполняет , .fillStyleId , .strokes , .strokeWeight , .strokeAlign , .strokeStyleId , .dash16 .dash16.

Загрузка шрифта осуществляется через figma.loadFontAsync(имя шрифта) .

Для текстовых узлов, содержащих один шрифт, вы можете вызвать figma.loadFontAsync(node.fontName) . Для узлов, содержащих несколько шрифтов, можно использовать API getRangeAllFontNames для получения всех шрифтов, используемых узлом. Например:

Загрузка имен шрифтов

 await Promise.all( 
 node.getRangeAllFontNames(0, node.characters.length) 
 .map(figma.loadFontAsync) 
 )

`Отсутствующие шрифты`

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

`Незагруженные шрифты и отсутствующие шрифты`

Важно отметить, что незагруженные шрифты не связаны с отсутствующими шрифтами. Все шрифты выгружаются до тех пор, пока ваш плагин не загрузит их, вызвав loadFontAsync 9.0016 . Отсутствующие шрифты — это шрифты, недоступные пользователю. Например, кто-то создал текстовый узел, а у этого пользователя на компьютере не установлен шрифт, используемый в этом текстовом узле.

`Текст в Figma — онлайн-документация`

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

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

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

`Текст на панели свойств`

Примените и настройте свойства текста в разделе Текст панели свойств.

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

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

`Семейство шрифтов`

Есть несколько терминов, связанных со шрифтом:

Гарнитура – это набор букв и глифов с похожими конструктивными особенностями.
Шрифт – это файл, содержащий визуальные детали, составляющие дизайн каждого глифа или буквы в этом шрифте.
Семейство шрифтов — это набор стилей, составляющих гарнитуру. Например: Helvetica, Times New Roman и Roboto — это семейства шрифтов.

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

`Толщина шрифта`

Гарнитура может иметь любое количество стилей и насыщенностей. Каждое семейство шрифтов будет иметь собственный набор стилей. Вот некоторые стили семейства шрифтов Roboto: тонкий, легкий, обычный и средний.

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

Щелкните стрелку, чтобы просмотреть стили для выбранного шрифта.
Используйте сочетания клавиш для увеличения и уменьшения веса шрифта. Mac: Удерживайте нажатой ⌥ Опция ⌘ Команда и < для увеличения или > для уменьшения. Windows: Удерживать Ctrl Alt и < для увеличения или > для уменьшения.

`Размер шрифта`

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

Отрегулируйте размер шрифта, используя поле рядом со стилем шрифта. Существует несколько способов настроить размер шрифта:

Щелкните стрелку, чтобы выбрать размер шрифта по умолчанию.
Введите свой номер в поле.
Используйте сочетания клавиш: Mac: Удерживайте Shift ⌘ Command и < для увеличения или > для уменьшения. Windows: Удерживайте нажатой Ctrl Shift и < для увеличения или > для уменьшения.

`Высота строки`

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

Небольшая высота строки может затруднить чтение текста. Большая высота строки может сделать текст беспорядочным и бессвязным.

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

MAC: Удерживает ⇧ Shift ⌥ Опция и <, чтобы увеличить или > и <, или > до <, или > до <, или > до <, или > до < или > до < или > до <. .
Windows: Удерживать Alt Shift и < для увеличения или > для уменьшения.

Figma позволяет установить фиксированную высоту строки в пикселях (px) или высоту строки, которая составляет процентов от размера шрифта (%) .

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

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

`Интервал между буквами`

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

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

Настройка межбуквенного интервала для всего текстового слоя или выделенного текста. Чтобы воспроизвести кернинг, поместите курсор между двумя буквами и отрегулируйте расстояние между буквами.

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

Mac : удерживайте нажатой ⌥ Option и < для увеличения или > на уменьшение.
Windows : Удерживайте Alt и < для увеличения или > для уменьшения.

Если вы выберете текст с разными значениями межбуквенного интервала, Figma пропорционально изменит межбуквенный интервал.

Совет! Отслеживание описывает процесс межбуквенного интервала в доцифровых системах и обычно представляется в пикселях (px). Используйте эту формулу, чтобы преобразовать отслеживание в высоту строки: 1000 пикселей отслеживание = 100% интервал между буквами = 1em интервал между буквами (CSS)

`Интервал между абзацами`

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

Figma представляет абзац размером пикселей (px) . Введите значение в пикселях в поле «Интервал абзаца». Или наведите указатель мыши на значок и перетащите на уменьшение (слева) или увеличение (справа) значение.

Примечание. Figma создаст новый абзац при использовании клавиш Enter или Return . Это нужно иметь в виду, если для изменения размера текста установлено значение Auto Width .

`Изменение размера`

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

Автоматическая ширина : ширина текстового слоя будет увеличиваться, чтобы все содержимое соответствовало границам слоя. Figma создаст новые строки текста, когда вы используете клавишу «Ввод» или «Ввод».
Автоматическая высота : высота текстового слоя будет увеличиваться в соответствии с его содержимым. Figma перенесет все строки, выходящие за пределы исходной ширины текстового слоя, в новую строку.
Фиксированный размер: И ширина и высота текстового слоя останутся неизменными, независимо от содержимого слоя. Figma перенесет любой дополнительный текст, выходящий за горизонтальные границы слоя. Текст по-прежнему может выходить за вертикальные границы текстового слоя без обрезки. Это может затруднить выравнивание с другими слоями.

Примечание. Когда вы щелкаете на холсте, чтобы создать текстовый слой, Figma использует Auto Width . Если вы щелкнете и перетащите на холсте, Figma будет использовать Fixed Size . Если вы отрегулируете размер текстового слоя после его создания, Figma обновит изменение размера до Fixed Size .

`Горизонтальное выравнивание`

Выравнивание определяет, как мы распределяем текст внутри его ограничивающей рамки. Горизонтальное выравнивание определяет, как вы выравниваете текст вдоль ось x (горизонтальная) .

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

Используйте значки для выбора горизонтального выравнивания. Выберите один из следующих вариантов:

Слева
По центру
Справа
По ширине*

По ширине выравнивает первое слово в каждой строке текста по крайнему левому краю, а последнее слово в каждой строке текста выравнивает по крайнему левому краю. Figma равномерно размещает каждое слово в строке выравниваемого текста.

`Выравнивание по вертикали`

Выравнивание определяет, как мы распределяем текст внутри его ограничивающей рамки. Выравнивание по вертикали выравнивает текст по оси Y (по вертикали) .

Используйте значки выравнивания для выбора вертикального выравнивания. Выберите один из следующих вариантов:

Верхний
Средний
Нижний

Слои, у которых для изменения размера задана автоматическая ширина или автоматическая высота, выравнивание игнорируется.

`Панель «Сведения о типе»`

Панель « Сведения о типе» предоставляет доступ к некоторым дополнительным свойствам текста. Вы также можете получить доступ к любым функциям OpenType с этой панели.

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

Предварительный просмотр любых свойств текста
Настройка горизонтального выравнивания текста
Применение оформления к тексту, в том числе: Подчеркивание Зачеркнутый
Смещение первой строки текста с отступом абзаца
Настройка регистра букв. Выберите прописные, строчные, заглавные и маленькие заглавные буквы.
Примените любые настройки чисел, в том числе: стиль, положение, дроби и любые связанные функции OpenType.
Доступ к любым функциям OpenType.
Нажмите, чтобы закрыть панель сведений о типе.

`Предварительный просмотр`

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

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

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

`Оформление`

Применение оформления текста ко всему текстовому слою или к выделенному тексту. Вам доступно два вида украшения:

`Зачеркнутый`

Зачеркивание добавляет горизонтальную линию через центр вашего текста.

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

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

`Подчеркивание`

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

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

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

Совет! Применить подставку для выбранного текста с использованием сочетания клавиатуры:

Mac: Опция U
Windows: CTRL U

11112

9

Отступ абзаца смещает текст в первой строке вправо. Вы можете применить отступ абзаца только к тексту, который использует Text-Align Left .

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

Figma представляет отступ абзаца как значение пикселей (px) . Используйте отступ 9 абзаца 0018 для настройки отступа абзаца.

Совет! Отступ абзаца применяется ко всем абзацам текстового слоя. Если вы хотите сделать отступ для одного абзаца, вам нужно будет создать для него отдельный текстовый слой.

`Регистр букв`

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

Верхний регистр : преобразует текст в ВЕРХНИЙ РЕГИСТР
Нижний регистр : преобразует текст в нижний регистр
Заглавные буквы : преобразует первый символ каждого слова в верхний регистр. Вы можете знать это как Title case
Small Caps : преобразование текста в Small Caps . Это отображает прописные буквы в строчных буквах. Хотя это выглядит как преобразование ВЕРХНЕГО РЕГИСТРА, оно немного отличается. Маленькие заглавные буквы обычно имеют разные пропорции (например, вес, соотношение сторон).

`Число`

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

Изменить фигуру Стиль варианты, включая: пропорциональную или табличную подкладку; и пропорциональный или табличный старый стиль.
Смещение чисел в виде нижнего индекса или верхнего индекса
Создание дробей из чисел. Введите дробь X/X

`Возможности OpenType`

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

Figma поддерживает функции OpenType для всех шрифтов. Не все шрифты поддерживают одни и те же функции OpenType.

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

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

Вместо этого мы покажем вам, как использовать панель сведений о типе. Это позволит вам исследовать и интерпретировать доступные функции OpenType шрифта.

Совет Узнайте больше об OpenType и Figma в нашем блоге: Ода OpenType

Изучите возможности OpenType на панели Сведения о типе .

Мы отображаем все функции OpenType, поддерживаемые шрифтом, ниже Числа настройка.
Функция OpenType будет неактивна, если шрифт ее не поддерживает.
Наведите указатель мыши на кнопку функции, чтобы просмотреть предварительный просмотр функции.
Мы группируем функции OpenType Соответственно:

Letterforms , включая: Лигатуры Редкие лигатуры Контекстуальные альтернаты 9006
СТИЛИКСКИЕ СТИЛИКСКИЕ СТИЛИКСКИЕ СТИЛИКСКИЕ СТАТИЧЕСКИЕ . между шрифтами. Шрифт может поддерживать до 20 стилистических наборов. Вот некоторые примеры: Стилистические альтернативы Альтернативные цифры Устранение неоднозначности Нижний регистр R изгибается в закругленные соседи
Варианты символов Это на усмотрение создателя шрифта. Они могут включать следующие типы вариаций: Открытая четверка Закрытая строчная G Закрытая строчная A
Горизонтальный интервал например: кернинг.
Дополнительные функции например: знаменатели дробей и числители.

`Другие свойства на панели свойств`

Вы также можете применять другие свойства к текстовым слоям.

`Заливка`

Используйте свойство Заливка , чтобы применить краски к тексту.

Найдите раздел Заливка на панели свойств.
Щелкните миниатюру заливки, чтобы открыть палитру цветов.
Затем вы можете: Выбрать цвет на холсте с помощью пипетки Исследовать цвета и прозрачность с помощью ползунков Выбрать цвет из доступных стилей или из цветов документа Ввести определенный HEX или цветовой профиль код в соответствующем поле

`Обводка`

Применение свойств обводки к тексту. Это применит обводку вокруг каждого символа в вашем выборе.

Заполнение
Вес
Распределение
Крышка
Соединение
Штрихи
Угол под углом

`Эффекты`

Текстовые слои также поддерживают эффекты тени и размытия.

Щелкните на рядом со свойством Эффекты , чтобы добавить эффект.
Figma применит Drop Shadow по умолчанию. Нажмите , чтобы выбрать другой эффект: Тень Внутренняя тень Размытие слоя Размытие фона
Отрегулируйте любые настройки по желанию.

Стили позволяют определить набор свойств, которые можно повторно использовать в проектах вашей команды.

Стиль текста можно применить ко всему блоку текста, например. заголовки (h2, h3 и т. д.). Или для текстовых строк внутри текстового слоя, например, ссылок.

Я хочу:

Создать стиль текста
Применить стиль к тексту
Редактировать существующий стиль текста

`Создать стиль текста`

Вы можете создать стиль из существующего текстового слоя.

Выберите текстовый слой со свойствами, которые вы хотите использовать повторно.