Code Options
Nested Components (Detect Instances)
Enabling the detection and conversion of instances extends the generation process to include all instances within your selection, resulting in a more structured code closer to the production setup. However, be cautious, as complex overrides may lead to visual bugs. It's advisable to experiment with this feature to find the optimal balance for your needs.
By default, the plugin treats variants as unique components, suffixing each variant with its properties (e.g.,
<ButtonVariantPrimary>). To avoid this, you can enable combining variants into a single component. Ensure that variants within a set share the same layout structure to prevent the generation of numerous conditionals, which can quickly become unreadable. This feature is (currently) not compatible with Tailwind & inline Styles.
TypeScript
For React, you have the option to choose TypeScript. Upon selecting a Figma component, the plugin generates an interface with typings for your component properties, enhancing type safety and developer experience.
Figma does not handle variants using "true" and "false" as booleans; they are treated as strings, even though they appear as toggles in Figma's component playground. Keep this in mind while working with TypeScript and variants.