Figma Import Notes

If you want an editable Figma version of this page for client deliverables or design iteration, two routes:

Option 1: html.to.design plugin (recommended)

1. Install the html.to.design plugin from the Figma Community.

2. Open a new Figma file.

3. Run the plugin → paste the URL of a locally served version of landing-page.html, or use the plugin's "paste HTML" mode and drop in the raw file contents.

4. The plugin converts DOM elements to Figma layers: text nodes become text layers, divs become frames, colors and fonts come through. Inline CSS translates reasonably well.

5. After import, manually group sections and rename layers for clarity. The terminal/code block styling won't render interactively but will import as a styled rectangle + text.

Limitation: html.to.design works best with a live URL. To serve locally: python3 -m http.server 8080 in the drafts folder, then point the plugin at http://localhost:8080/landing-page.html.

Option 2: Screenshot + import

Take a full-page screenshot (browser DevTools → capture full page, or use a tool like shot-scraper), import the PNG into Figma as a reference frame, then rebuild components on top. Slower, but gives you full control from the start.

The HTML file is the source of truth. Design tokens (colors, type sizes, spacing) are all in the :root block at the top of the <style> tag — easy to extract and turn into Figma variables.