Claude drew it.
Now edit it.

Run the same file in a Design file instead and you get frames, one per section. Where you open tofig decides the output; there is no mode to pick.

1. Get the source, not a picture

   An artifact is a real HTML document. Two ways to get at it.

   • Copy or download the source. Raw HTML, not an image, not a PDF.
   • Or ask for it in the conversation. One message slower, and much better: you get to specify the shape of the file. That is the next step.

   Save it as .html. tofig takes a pasted string or a dropped file.

2. Ask for a file that converts

   An artifact is built for a browser tab with the whole internet available. tofig runs in a plugin with none of it. Say so up front and you get a file the plugin can read.

   export prompt Copy

   Give me this design as a single self-contained HTML file.
   
   - All CSS inline, in one <style> tag. No external stylesheets, no CDN links.
   - No JavaScript. The finished layout must exist in the HTML itself, not be
     built at runtime.
   - Images as data: URIs, or drawn as inline SVG. No remote image URLs.
   - Use a font family that exists in Figma, or a plain system stack, and tell
     me which one you used.
   - Set an explicit pixel width on the outermost element so the artboard has a
     fixed size.
   - No iframes, no <link> tags, no icon fonts.

   Send it after the design is already on screen. As a follow-up it re-emits the design rather than regenerating it.

   Every line earns its place.

   inline <style> only

   The plugin declares networkAccess: none, so a <link> resolves to nothing and you convert a column of unstyled black text.

   no CDN scripts

   The plugin UI runs from a data: URL, an opaque origin. unpkg, esm.sh, a Tailwind CDN build: none of them resolve.

   no runtime rendering

   tofig measures computed geometry. An empty root that a framework fills in later gives it nothing to measure.

   fonts Figma has

   A missing face falls back to the nearest match, then Inter. tofig reports every substitution, but a face you did not choose is still a face you did not choose.

   data: images, inline SVG

   Remote images are never fetched, so <img src="https://…"> lands as an empty frame. Inline SVG becomes editable vector paths.

   an explicit width

   The artboard is measured, not guessed. Fixed width is the difference between the 1440 frame you wanted and whatever the default viewport was.

3. handoff the file leaves the conversation and lands on a canvas

4. Run tofig and convert

   Open a Design or Slides file, run tofig, paste the markup or drop the .html, press Convert.

   Not installed yet? It is one click from the Figma Community page: Open in…, pick your file, and it runs there. No account, nothing to download.

   No mode to pick: tofig reads figma.editorType and targets the right output. Frames in a Design file, real slides in a Slides file, one frame per section for a multi-section page.

   Nothing leaves your machine. The render happens in a hidden iframe on your computer, with the network switched off.

5. What lands on the canvas

   Real nodes with real properties. Text you can retype. Inline SVG as vector paths with their control points intact. Fills, gradients, strokes, radii and opacity as native paints, not baked into pixels.

   FrameTextVectorImage fill GradientStrokeRadiusOpacity

   Layout is absolutely positioned: a deliberate trade for pixel-accurate placement over auto-layout constraints. Auto-layout is on the roadmap.