When working with Make in your local codebase, users can copy React components from their Figma Make to Figma Design. This feature will automatically convert the code from Make into design layers for Figma Design. Figma is able to automatically detect code that has corresponding design components and create instances of these components when pasting into Figma Design using Code Connect.
Prerequisites
For Figma to match your React components to components in Figma Design, the following prerequisites must be met for components to be detected and converted correctly:
- The components in your design library are connected to your codebase using Code Connect. Learn more about Code Connect
- The library file needs to be connected to the GitHub repository containing the components. We currently only support GitHub as code hosting provider. Learn more about connecting to GitHub
-
If the code in Figma Make is consuming components from an npm package (e.g.
import { Button } from "@acme/ui";), the name of the npm package needs to be specified in the Code Connect settings of the design library.
Using the feature
First, ensure you meet the prerequisites. Then, to copy your code components to Figma Design:
- In the upper-right corner of Figma Make, click Copy design.
- Choose whether to copy to a Figma Design file or to your clipboard.
- If you choose to copy to your clipboard, paste onto the canvas in a Figma Design file.
The code components are pasted as instances of the corresponding design components.
Troubleshooting
My components are not detected
First, make sure that the design library your components are defined in is added to your Make. You can do that by selecting it from the Components section in Make's editing panel.
Next, select the code component that is not detected correctly and check its provenance, displayed below the component name:
- The file path of the component shown here should match the one you have set up in Code Connect (e.g.
src/components/Button.tsx) - If the component comes from an npm package, you should see the package name here. This should match the name of the package you added in the Code Connect settings.
My components are detected, but don't look right
Some states of your code components may not be able to be represented with your design components. Start by checking if the properties for the resulting component instance are what you expect.
Figma Design uses the properties from your React component to decide which variant of your corresponding Figma component to use. If your React component changes based on other factors like internal state or CSS media queries, that won't be reflected by the inserted Figma component instance.