Guides

Practical walkthroughs for getting designs and web pages into Figma as editable layers.

How to bring Pencil (.pen) designs into Figma as editable layers

Pencil keeps your design in the repo as a .pen file, but sooner or later someone outside your editor needs to see it. Export the node as HTML and CSS, then import it with html2figma. No screenshots, no rebuilding.

1 September 2026 · 6 min read

Read the guide →