Back to Plugins
Material Design -> Styles to Variables

Material Design -> Styles to Variables

Automatically converts Material color styles into the correct Material Design variables.

Plugin Preview

Material Design -> Styles to Variables preview

About this plugin

This plugin helps teams adopt Google’s updated Material Design system by converting existing color styles into the appropriate Material variables.

Instead of manually remapping fills, strokes, and component tokens, the plugin processes the selected page and automatically rewrites all color style references to use the correct variable counterparts.


Designed for teams migrating large files or maintaining legacy Material files — this tool ensures consistency, future-proofing, and zero manual cleanup.


  1. Converts all Material color styles → Material variables
  2. Processes entire pages or selected frames
  3. Maps fills, strokes, blends, and nested layers
  4. Handles large files with tens of thousands of nodes
  5. Future-proofs your design system by aligning to Google’s variable-based architecture

Plugin Details

Version1
CreatedNovember 26, 2025
Last UpdatedNovember 26, 2025
Categorylibraries-other
CreatorKyle Aikens
Stats1 installs, 0 likes
PricingFree

Technical Details

  • API:1.0.0
  • main:code.js
  • Document Access:dynamic-page
  • Editor Types:
    figma
  • Allowed Domains:
    • none