TokenKebab Converter

About this plugin

PurposeThis 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 FunctionalityTypography 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.