TokenKebab Converter

About this plugin

Purpose

This Figma plugin is designed to facilitate a smoother transition between design and development stages, particularly for those utilizing the Tokens Studio and EightShapes in their design system workflow.

Key Functionality

• Typography Token Transformation:
• Converts typography tokens defined in dot notation (e.g., typography.Body.Bold) into an appropriate Sass mixin structure (e.g., @include fontStyle(body-bold);).
• Kebab-Case Conversion:
• Transforms tokens, including those related to spacing (e.g., spacing.150), into a kebab-case format, ensuring consistency and CSS-friendly naming conventions (e.g., spacing-150).
• Theme Prefixing:
• Automatically prefixes theme-related tokens with "light-", changing, for instance, theme.input.border.default to light-theme-input-border-default.

In essence, the plugin programmatically refactors design tokens, enhancing their usability and implementability in CSS/Sass codebases, and ensuring a coherent and systematic naming convention throughout the design-to-development handoff process.