Как задать межбуквенное расстояние в процентах, как в Figma?

В макетах в Figma дизайнеры часто задают межбуквенное расстояние (Letter Spacing) в процентах. Но в CSS не используются проценты для этого свойства. Поэтому при верстке возникает вопрос — как перенести такой дизайн в редактор Taptop.

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

Смотрите видео:

Kinescope
VK Video
RuTube
YouTube
Vimeo

Как перевести проценты в Figma в em в Taptop

Шаг 1

В макете в Figma находим заданное межбуквенное расстояние: у нас–7%.

Макет в Figma

Межбуквенное расстояние в Figma

Шаг 2

В Taptop выбираем на холсте текст, а в его стилях → межбуквенное расстояние переключаем в em.

Проект в Taptop

Переключаем межбуквенное расстояние в em

Шаг 3

Рассчитываем значение межбуквенного расстояния по формуле:

Значение в em = Значение в процентах / 100

В нашем случае:–7% / 100 = –0.07em. Другой пример: если значение будет 3%, то получится–0.03.

Записываем полученное значение межбуквенного расстояния в поле свойства.

В поле межбуквенного расстояние записываем нужное значение в em

Готово! Теперь межбуквенное расстояние в проекте Taptop точно такое же, как в макете в Figma — только оно записано не в процентах, а в em.

Проверяем результат

В проекте в Figma у нас есть два совпадающих по размерам текста — у одного межбуквенное расстояние задано в пикселях: –9.8px, а у другого в процентах: –7%.

Два текста с разными единицами измерения

Межбуквенное расстояние в пикселях

Встроенный калькулятор в Taptop поможет сконвертировать пиксели в em. Переводим значение –9.8px и получаем –0.07em — то же самое, что мы получили при расчете по формуле. Значит все правильно.

Конвертируем в Taptop значение из пикселей в em

Вы также можете получить нужное значение межбуквенного расстояния через Dev Mode в Figma. В правой панели CSS найдите это свойство — хотя оно задано в процентах, там оно будет показано в пикселях. Можно скопировать значение свойства, вставить в Taptop и перевести em.

Резюме

Межбуквенное расстояние в процентах в Figma → Конвертация в em в Taptop (делим на 100)

–7% → –0.07em

Эта техника поможет точно воспроизвести дизайн из Figma в вашем проекте Taptop.