Как задать межбуквенное расстояние в процентах, как в Figma?
В макетах в Figma дизайнеры часто задают межбуквенное расстояние (Letter Spacing) в процентах. Но в CSS не используются проценты для этого свойства. Поэтому при верстке возникает вопрос — как перенести такой дизайн в редактор Taptop.
Рассказываем, как решить проблему, используя вместо процентов другую единицу измерения — em.
Смотрите видео:
https://vk.com/video-219751701_456239218
Как перевести проценты в Figma в em в Taptop
Шаг 1
В макете в Figma находим заданное межбуквенное расстояние: у нас –7%.
Шаг 2
В Taptop выбираем на холсте текст, а в его стилях → межбуквенное расстояние переключаем в em.
Шаг 3
- Рассчитываем значение межбуквенного расстояния по формуле:
Значение в em = Значение в процентах / 100
В нашем случае:–7% / 100 = –0.07em. Другой пример: если значение будет 3%, то получится –0.03.
- Записываем полученное значение межбуквенного расстояния в поле свойства.
Готово! Теперь межбуквенное расстояние в проекте Taptop точно такое же, как в макете в Figma — только оно записано не в процентах, а в em.
Проверяем результат
В проекте в Figma у нас есть два совпадающих по размерам текста — у одного межбуквенное расстояние задано в пикселях: –9.8px, а у другого в процентах: –7%.
Встроенный калькулятор в Taptop поможет сконвертировать пиксели в em. Переводим значение –9.8px и получаем –0.07em— то же самое, что мы получили при расчете по формуле. Значит все правильно.
Вы также можете получить нужное значение межбуквенного расстояния через Dev Mode в Figma. В правой панели CSS найдите это свойство — хотя оно задано в процентах, там оно будет показано в пикселях. Можно скопировать значение свойства, вставить в Taptop и перевести em.
Резюме
Межбуквенное расстояние в процентах в Figma → Конвертация в em в Taptop (делим на 100)
–7% → –0.07em
Эта техника поможет точно воспроизвести дизайн из Figma в вашем проекте Taptop.