Hey all - I am running into a bit of a issue with how component properties are working today - specifically in the context of Figma-to-code workflows. It’s not so much of a “blocker” but I think it would be a huge unlock if we were able to attach “meta” or “pass-through” properties on Figma components.
Currently any properties added to a component need to be “used” in your component. A variant, boolean, etc. needs to affect something structural or decorative in your component or you’ll see an error icon and a message “Not used within component”. Instances of the component will not contain these unused props. This is reasonable since you don’t want to have extra props on your component that are effectively no-ops.
However, as Figma designs and components are increasingly the input for many design-to-code workflows, many of the things we might want to associate with a given component do not necessarily have a visible presentation impact on the Figma side, but are used in downstream coded components for behavioral or feature props. So, the Figma component already contains all of the presentation-level properties, variants, variables, etc, but we might want to add additional pass-through props to use in the code.
As an example, maybe you have a table component and want to pass in behaviors on the table or columns. e.g., Resizable Columns (boolean) Frozen Column (boolean) Sort Mode (single, multiple) - these might not have have a discernible difference from a visual point-of-view, but are likely part of the design / UX, and you are likely to configure them differently based on context. It would be really great if you could add these in your component and configure those just like you would other properties per instance. When the design is ingested into your code pipeline, those could be mapped to the right flags on the code side resulting in a more complete design-to-code translation.
Perhaps it would be confusing to some users (e.g., I just added this property, but it doesn’t “do” anything in Figma) but maybe there is a way to mitigate that by making it slightly more difficult to add a meta or pass-through prop
Adding component props exclusively as pass-throughs for design-to-code workflows
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.
