Как перенести стили из Figma в Taptop

Если вам нужно максимально быстро перенести все стили из Figma в Taptop, можно использовать Пользовательские свойства (Custom Properties). В этом случае вам не нужно вручную добавлять каждый параметр — можно просто скопировать готовые CSS-строки и вставить их в класс. Это работает буквально «Ctrl C → Ctrl V».

Это может быть очень полезно, когда вы верстаете UI Kit — типовые заголовки, тексты, кнопки и т.д.

Что понадобится

макет в Figma

Dev Mode или плагин Inspect Styles в Figma

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

Kinescope
VK Video
RuTube
YouTube
Vimeo

Пошаговая инструкция

Шаг 1: Скопируйте стили из Figma

В Figma включите Dev Mode или запустите плагин Inspect Styles.

Кликните на нужный элемент — свойства CSS появятся в правой панели (для Dev Mode) или в отдельном блоке (для Inspect Styles).

Скопируйте нужные строки. Например, для текста — font-weight, font-size, line-height, letter-spacing.

В Figma в Inspect Styles выделены нужные строки кода

Шаг 2: Вставьте стили в класс в Taptop

В редакторе Taptop кликните на нужный элемент и выберите у него класс на правой панели в поле Источники стилей.

В Taptop выбран элемент и его класс

Прокрутите до раздела Пользовательские свойства.

Блок Пользовательские свойства

Нажмите на «+» и вставьте скопированный фрагмент целиком, нажав Ctrl + V. Все свойства будут добавлены в класс.

Свойства добавлены в класс

Готово! Теперь текст выглядит точно так же, как в Figma.

Далее повторите эти шаги для остальных элементов UI Kit. Набор свойств, которые нужно скопировать, могут отличаться для разных элементов. Например, для кнопки можно перенести border-radius, padding, width, background.

Свойства можно редактировать на каждом брейкпоинте.

Когда использовать этот метод

Этот метод идеально подходит для переноса UI Kit. Он позволяет буквально за пару минут собрать рабочий UI Kit в Taptop.

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

Резюме

Если нужно быстро собрать UI Kit в Taptop, просто копируйте готовые CSS-свойства из Figma и вставляйте их в пользовательские свойства класса. Это самый быстрый и точный способ переноса стилей.