Nathan Curtis recently published a thoughtful article on a pattern he calls “code-only props” in Figma.
You can read it here:
The core idea is simple but important: design systems need a place to store non-visual metadata directly alongside components. Accessibility labels, semantic roles, behavioral flags. Things that matter in production but rarely show up in the design file in a structured way.
After reading Nathan’s piece, I wanted to see how this pattern would hold up when implemented programmatically rather than manually.
I put together a short prototype using the Figma Console MCP to apply the idea at the component level.
In practice, that meant:
• Creating a small, hidden container inside the component to hold metadata
• Adding human-readable fields like “Accessibility label”
• Binding those fields to component properties
• Extracting the data in a way that could be used downstream for code generation
What stood out wasn’t the mechanics, but the implications.
Once metadata lives inside components in a consistent structure, you can reason about it at the system level. You can scan a library to see what’s missing, generate best practices specs (ideally using the Design Systems Assistant MCP 😉) that describe what should exist, and apply updates across large sets of components without touching each one by hand.
This experiment was less about inventing something new and more about pressure-testing a solid idea in a real-life workflow. So cool to see these things come together!!
If you want to explore the tooling mentioned here, the repositories are public and free to use:
Figma Console MCP: https://github.com/southleft/figma-console-mcp
Design Systems Assistant MCP: https://github.com/southleft/design-systems-mcp
