Variable Importer
Import and rename CSS variables into Webflow variable Collections—fast.
Import and rename CSS variables into Webflow variable Collections—fast.
What this app does
Bring your design system into Webflow in minutes. CSS Variable Importer transforms pasted or uploaded CSS into native Webflow variables — preview, standardize naming, rename inline, pick a Collection, and import with confidence.
Why it’s useful
- Accelerate building your design system in Webflow.
- Standardize naming across projects with automatic case conversion.
- Eliminate error‑prone manual entry by previewing and batch‑importing variables.
- Save hours migrating design tokens and styles into Webflow.
How it works
1. Paste CSS containing variables or upload a CSS file.
2. The App parses and lists all detected CSS variables (name and value).
3. Choose a naming convention (camelCase, PascalCase, snakecase, kebab-case).
4. Optionally rename any variable inline before import.
5. Select the destination Webflow variable Collection.
6. Review the final preview and import all variables at once.
Key capabilities
- Flexible input: paste text or upload a file.
- Smart parsing of CSS custom properties.
- Case conversion for consistent naming across teams.
- Inline rename to fix edge cases before import.
- Collection selection to keep variables organized.
- Batch import to accelerate onboarding of a full token set.
- Preview step to validate names and values before committing.
Common use cases
- Migrating an existing design system’s tokens into Webflow.
- Importing color palettes, spacing scales, typography variables, and more.
- Normalizing variable names across legacy and new projects.
- Rapidly iterating on variable naming conventions without manual rework.
Input and variable support
- Accepts standard CSS custom properties defined with the --var-name: value; syntax.
- Works with common value types such as colors, numbers with units, and strings - anything that Webflow supports.
Naming conventions
- camelCase
- PascalCase
- snakecase
- kebab-case
Built for Webflow Designer Extensions
- Designed for use directly inside the Webflow Designer.
- Integrates with variable Collections to keep tokens structured and discoverable.
Benefits for teams
- Faster onboarding of new or external style libraries.
- Reduced risk of typos and inconsistencies.
- Repeatable workflow you can apply across multiple Webflow projects.
What this app does
Bring your design system into Webflow in minutes. CSS Variable Importer transforms pasted or uploaded CSS into native Webflow variables — preview, standardize naming, rename inline, pick a Collection, and import with confidence.
Why it’s useful
- Accelerate building your design system in Webflow.
- Standardize naming across projects with automatic case conversion.
- Eliminate error‑prone manual entry by previewing and batch‑importing variables.
- Save hours migrating design tokens and styles into Webflow.
How it works
1. Paste CSS containing variables or upload a CSS file.
2. The App parses and lists all detected CSS variables (name and value).
3. Choose a naming convention (camelCase, PascalCase, snakecase, kebab-case).
4. Optionally rename any variable inline before import.
5. Select the destination Webflow variable Collection.
6. Review the final preview and import all variables at once.
Key capabilities
- Flexible input: paste text or upload a file.
- Smart parsing of CSS custom properties.
- Case conversion for consistent naming across teams.
- Inline rename to fix edge cases before import.
- Collection selection to keep variables organized.
- Batch import to accelerate onboarding of a full token set.
- Preview step to validate names and values before committing.
Common use cases
- Migrating an existing design system’s tokens into Webflow.
- Importing color palettes, spacing scales, typography variables, and more.
- Normalizing variable names across legacy and new projects.
- Rapidly iterating on variable naming conventions without manual rework.
Input and variable support
- Accepts standard CSS custom properties defined with the --var-name: value; syntax.
- Works with common value types such as colors, numbers with units, and strings - anything that Webflow supports.
Naming conventions
- camelCase
- PascalCase
- snakecase
- kebab-case
Built for Webflow Designer Extensions
- Designed for use directly inside the Webflow Designer.
- Integrates with variable Collections to keep tokens structured and discoverable.
Benefits for teams
- Faster onboarding of new or external style libraries.
- Reduced risk of typos and inconsistencies.
- Repeatable workflow you can apply across multiple Webflow projects.
- Paste or Upload CSS: Import variables from text or file.Paste or Upload CSS: Import variables from text or file.
- Smart Parsing: Automatically detect CSS custom properties.Smart Parsing: Automatically detect CSS custom properties.
- Case Conversion: camel, Pascal, snake, kebab.Case Conversion: camel, Pascal, snake, kebab.
- Inline Rename: Edit variable names before import.Inline Rename: Edit variable names before import.
- Import to Collections: Create variables in your chosen collection.Import to Collections: Create variables in your chosen collection.