Best Practices for Exporting Components
The ThemeBuilder plugin for Figma allows you to transfer your component designs to the ThemeBuilder application as custom HTML components. If small style tweaks are needed to adapt a design component to the web ecosystem, you can apply them through ThemeBuilder's advanced customizations interface.
To boost your productivity and minimize any additional styling, review and incorporate the following best practices in your design workflow.
Use Meaningful Component and Node Names
ThemeBuilder uses class names to apply the desired styles to a component-specific element. During a Figma component export, the ThemeBuilder plugin uses the node name to generate a class name for the corresponding HTML element.
To ensure the consistency and clarity of the generated class names, adhere to the following principles:
- Give your Figma components unique names that will apply exported styles scoped specifically to them.
- Give your Figma nodes short and meaningful names.
- Give your Figma nodes unique names when they serve a unique purpose in your design. For example, if you have a Form component with several
TEXTnodes serving different purposes, give these nodes unique names that describe their usage (title, description, label, and so on).
Use Auto Layout
Use Auto Layout in Figma instead of absolutely positioned nodes. Auto Layout creates responsive designs that automatically grow, shrink, and manage reflow when content changes. In web applications, Auto Layout is translated to flex that gives your custom HTML components the responsiveness to fit various form factors.
Keep Figma Components Lean
Build your Figma components with only the required elements to achieve your design and no unnecessary nodes. This will produce smaller and more manageable custom HTML components with no redundant elements that will pollute the DOM tree.
Enable Reusability through Composition
Component composition, both in Figma and web development, enhances reusability and enables faster, more efficient management and change propagation.
To ensure the good composition of your components:
- Extract repetitive designs to components.
- Reuse existing simple components in more complex ones.
- Export your simple components first.
- Export your complex components using the Figma plugin mapping feature to leverage reusability.
Use Figma Styles and Variables
Use Figma styles and variables instead of plain values to easily propagate changes in colors, typography, effects, and metrics across all instances with a single click. The styles and variables are exported to ThemeBuilder and used in your custom HTML components. When design tokens (styles and variables) are updated, the ThemeBuilder plugin can transfer and apply these updates to your project.