Variant Craft

About this plugin

What is Variant Craft?Variant Craft is a Figma plugin that instantly generates structured variant tables from your component sets and instances. Whether you need a comprehensive grid of every state and size, or a clean list for documentation, Variant Craft maps your variant properties to rows, columns, and sections — complete with live component previews.Your original components are never modified. Tables are created alongside them, fully customizable, and stay in sync when your components evolve.---Key featuresGenerate variant tablesCreate grid or list layout tables from any component set or instanceAutomatic property detection — rows, columns, and section grouping for 3+ propertiesLive component previews inside every cellWorks with both component sets and standalone instances with variant propertiesSmart syncSelect a previously generated table and update it in-place with one click3 style modes: Settings (apply your current plugin settings), Original (use the table's saved configuration), or Canvas (read styles directly from what's on the canvas)Source component linking — the table always knows which component it came fromOrganize component setsReorganize variants inside a component set into a clean grid layoutExternal labels frame placed behind the component set with row/column headers and property descriptionsHandles multi-dimensional variants with automatic sub-grid positioningProperty mappingControl which property maps to rows and which to columnsAdditional properties automatically create labeled sections with dividersAuto-detection with manual override for full controlFull customization4 independent color controls: table background, label background, label text, and table textAdjustable spacing and label sizeToggle component previews on/offIgnore empty property combinations to keep tables cleanAll settings persist across sessions---Use CasesComponent documentation: Generate a complete visual reference of every variant in your design system. Share with developers, QA, and stakeholders so everyone sees the full picture.Design reviews: Quickly produce a grid of all states (default, hover, disabled, error...) and sizes (small, medium, large) for efficient review sessions.Design system maintenance: Use Smart sync to keep variant tables up-to-date as your components evolve. One click to refresh after adding new variants.Component set cleanup: Use Organize Set to restructure messy component sets into a clean, labeled grid — making your source files easier to navigate.Handoff & specs: Generate list-view tables that pair each variant with its property values, giving developers a clear mapping of what each combination looks like.---How to UseSelect a component set or instance in your Figma fileChoose a layout — Grid for matrix view, List for detailed rowsMap properties (optional) — pick which property is rows vs. columnsClick "Craft Variant Table" and your table appears next to the sourceYour original components remain untouchedUpdating tables:Select a previously generated tableAdjust settings or layout as neededClick "Update variant table" — Smart Sync refreshes it in-placeOrganizing component sets:Select a component setSwitch to "Organize set" modeMap row/column properties and click "Organize set"A labels frame is created behind the set with property headersPro tips:Use "Ignore empty properties" to skip combinations that don't have matching componentsFor 3+ properties, the first two become rows/columns and the rest become labeled sectionsSmart sync's "Canvas" mode reads colors directly from your table — great if you've manually tweaked stylesSettings persist across sessions, so configure once and generate consistently---SettingsDimensions: Spacing (10–100px), Label size (8–24px)Colors: Table background, Label background, Label text, Table text — each with color picker and hex inputGenerate table: Include component previews, Ignore empty propertiesSmart sync: Use styles from settings / Use original table styles / Use current canvas stylesOrganize set: Add row/column labels, Add property descriptionsReset: One-click restore to defaults---Support my workIf you find Variant Craft useful, consider supporting my work by buying me a coffee. Your support helps maintain and improve the tools that benefit the design community.