Vigma

Плагин Vigma — генератор проектов Vue для Figma.

Инструкции

Используйте служебные классы, чтобы убедиться, что Vigma точно отображает дизайн, эти классы можно применять, включив их в имена слоев Figma.

Flex-свойства

• row: применить display: flex; на группу;
• h-center: центрировать дочерние элементы по горизонтали;
• v-center: центрировать дочерние элементы по вертикали.

Столбцы

• col: чтобы пометить группу как столбец;
• value: свойство col принимает значение, чтобы применить ширину для столбца, значения 1-12.

Кнопки

• button: чтобы пометить группу как кнопку;
• ButtonText: внутри группы кнопок должен быть текст Figma, он будет преобразован в элемент абзаца;
• ButtonBackground: внутри группы кнопок должен быть прямоугольник Figma, сгенерированный элемент кнопки будет брать свой стиль из этого прямоугольника.

Пример: Ниже приведен пример того, как мы можем использовать эти классы со слоями Figma.

• GroupName: row, v-center, h-center;
• SubGroupName: cols-6;
• ButtonName: button;
• ButtonText;
• ButtonBackground;
• SubGroupName: cols-6;
• Text.

Затем приведенное выше дерево будет преобразовано в этот код: