Import HTML/CSS code

Last updated

In the Editor tab, you can directly type or paste your HTML and CSS code to convert it into editable Figma designs.

For example, you may have code generated by an AI tool that you want to bring into Figma. Simply paste it in the Editor tab and click “Create” to transform your code into Figma layers.

The html.to.design plugin's Editor tab with empty HTML and CSS fields and the Create button.

How to import your own code in Figma

  1. Launch the plugin

  2. Go to the Editor tab

  3. Paste or type your HTML and CSS code (optional) into the space provided

  4. Hit “Create”!

HTML and CSS for a pricing card in html.to.design's Editor tab, and the card it created on the Figma canvas.
  1. Your code is converted into Figma layers that you can edit as usual

ℹ️ Select the imported section, edit its code in the Editor tab and click Update to see how it changes your design in Figma.