Tooling Overview
Styleframe provides powerful tooling to streamline your development and design workflow. These tools connect your Styleframe design system to your build pipeline and design tools, ensuring a seamless experience from code to production.
Utility Scanner
Automatically detect utility class names in your source files and generate the corresponding CSS at build time — no manual value definitions needed. Similar to Tailwind CSS JIT mode, you write classes in your templates and the scanner handles CSS generation.
Key features:
- Zero manual registration — use utility classes directly in your markup
- Automatic CSS generation — only the CSS you use gets generated
- Arbitrary value support — bracket syntax like
_padding:[2.5rem]for one-off values - HMR support — template changes trigger incremental rescans during development
- Framework-agnostic — built-in extractors for HTML, Vue, React, Svelte, Solid, Astro, MDX, and more
Learn more about the Scanner →
Figma Plugin
Sync your Styleframe design tokens with Figma using the plugin and CLI commands for bidirectional token synchronization.
Key features:
- Code-first architecture — your Styleframe config is the single source of truth
- Bidirectional sync — import tokens into Figma or export Figma variables to code
- Multi-mode support — light, dark, and custom themes are preserved as Figma modes
- Free and open source — no subscriptions or seat limits
Imports
Understand how Styleframe's single-instance architecture works — from the global config, through extension files, to consuming styles and exports in your application code.
Utility Scanner
Automatically detect utility class names in your source files and generate the corresponding CSS at build time — no manual value definitions needed.