Render the component
Use a page, Storybook example, static export, or server-rendered output that shows the state you want.
Component state: default
Viewport: 1440px
Output: HTML React output workflow
React to Figma
Use rendered HTML
Convert rendered React component output into editable Figma layers. Use CodeRender when React UI exists first and the design team needs a real Figma frame to edit.
CodeRender converts HTML, not raw JSX. Render or export the React component to static HTML first, then paste that output into the converter.
React Handoff
Render React.
Convert output.
React components are easiest to convert once they are rendered into HTML for the state and viewport you want to capture.
Paste the HTML
Copy the rendered markup and its CSS into CodeRender so the browser can resolve the final layout.
<article class="settings-card">
<button>Save changes</button>
</article>Paste editable layers
Move the result into Figma for review, variant cleanup, or design system documentation.
Frame: settings card
Text: Notifications
Button: Save changes React Inputs
Rendered states convert best
Treat each React state as a visual artifact: render it, convert it, then refine it in Figma.
Component previews
Cards, modals, navs, forms, tables, and empty states rendered from a component library.
Storybook states
Default, loading, error, empty, and success states captured as separate static outputs.
Rendered pages
React route output, server-rendered pages, or static exports for the viewport you want.
Best React input pattern
Do not paste raw JSX. Render the component state to HTML, include the CSS needed for styling, then convert one state and viewport at a time.
Use Cases
When React is ahead of Figma
CodeRender helps teams pull implemented UI back into the design file when product work starts in code.
Reverse handoff
Give designers editable frames from implemented React components.
Variant review
Convert multiple component states into side-by-side Figma frames.
Docs assets
Create design system documentation frames from real component output.
Implementation QA
Compare actual rendered React UI with intended design direction.
Sandboxed processing
Editable layers
Free to use
React to Figma FAQ
Can I paste JSX directly?
No. CodeRender converts HTML/CSS. Render or export the React component to static HTML first, then paste that output.
Can I convert Storybook components?
Yes. Use the rendered HTML for the Storybook state you want to capture, with the CSS available during conversion.
Can I convert different React states?
Yes. Render each state separately, such as loading, empty, error, and success, then paste each into Figma.
Does it preserve component code?
No. The output is editable Figma layers based on the rendered visual result, not React source code.
Convert rendered React UI into Figma
Use the HTML output from your component, convert it, and paste editable layers into the design file.
Start converting free