Install the plugin
Open the CodeRender plugin from Figma Community and add it to your Figma workspace.
Figma Community
CodeRender
Install plugin Figma plugin workflow
HTML to Figma plugin
Convert inside Figma
Use the CodeRender Figma plugin when you want HTML-to-Figma conversion from inside Figma, with the same account and conversion engine as the standalone web app.
Install the plugin from Figma Community, create an access key in CodeRender, then convert HTML into editable Figma layers without leaving the design canvas.
Plugin Setup
Install once.
Convert in Figma.
The plugin is best for users who live in Figma and want the conversion workflow close to the canvas.
Connect your account
Create an access key from your CodeRender dashboard and paste it into the plugin.
Dashboard -> Access key
Plugin -> ConnectConvert HTML
Run the plugin, paste HTML, convert, and place editable layers into the current Figma file.
HTML input
Convert
Editable layers Plugin Inputs
Good plugin workflows
Use the plugin when Figma is already open and the design file is where review and cleanup will happen.
Design review
Import coded sections into the same Figma file where the design team is commenting and iterating.
Quick snippets
Paste static HTML snippets into the plugin and place the result directly near related frames.
Component references
Convert live component examples into reference frames beside your design system pages.
Best plugin setup
Keep a CodeRender access key ready in the plugin, convert focused snippets or sections, and clean up the pasted layers in the same Figma file.
Use Cases
Why use the plugin
The web app is fastest for quick conversions. The plugin is better when the rest of the workflow already happens inside Figma.
Same canvas
Bring converted HTML into the current Figma file without switching workflow context.
Account keys
Use your CodeRender account key so plugin usage maps to your quota and account.
Team review
Place converted frames beside comments, variants, and design system references.
Same engine
The plugin uses the same conversion approach as the web product.
Sandboxed processing
Editable layers
Free to use
HTML to Figma plugin FAQ
Is the plugin required?
No. CodeRender works as a standalone web app. The plugin is optional for users who prefer working directly inside Figma.
Where do I get the access key?
Sign in to CodeRender, open the dashboard, and create or copy your access key for the plugin.
Does the plugin use a different converter?
No. It uses the same CodeRender account and conversion workflow, packaged for Figma users.
Can I still use the web app?
Yes. The web app and plugin are complementary. Use whichever fits the current workflow.
Install the CodeRender Figma plugin
Connect your account and convert HTML where your design review already happens.
Open Figma Community