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

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

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

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

https://vk.com/video-219751701_456239218

VK Видео | YouTube

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

Шаг 1

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

Макет в Figma

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

Шаг 2

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

Проект в Taptop

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

Шаг 3

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


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


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

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

В поле межбуквенного расстояние записываем нужное значение в 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.