Skip to content

Code2Des — How to Use

Summary

Code2Des turns a public web page into editable native Figma layers. It captures the rendered page, preserves its visible layout, text, colors, images, and supported vectors, then builds the result in the current Figma file. The conversion is deterministic and does not use an LLM.

Prerequisites

Before starting:

  • Set up the Guinness Figma plugin and sign in with your Guinness user account.
  • Confirm the account's organization and select the project that should own the import. Use a user account assigned to that project, not an administrator login.
  • Open the Figma page where the generated design should be placed.
  • Use a public http:// or https:// URL that works without signing in.
  • If exact typography matters, install or activate the page's fonts in Figma before generation.

Note

Discovery finds page URLs; import captures the pages you select; generation creates their designs. Discovering a website does not automatically import or generate every page. Imports do not sign in, reuse your browser session, or access pages available only on a private network.

Import a page

For locally captured pages, follow the Page Import script guide. In the updated plugin, select Existing imports, refresh, select completed captures from the same environment and project, and choose Generate. The saved capture is reused without requesting its URL again. Desktop/mobile captures of the same URL remain separate choices.

Use the same flow for one or multiple pages in the code2des panel:

To find URLs first, expand Discover pages:

  1. Enter a URL in Homepage or sitemap, then select Discover pages. A homepage crawls same-origin links; an XML sitemap lists its URLs without rendering each page. Both run on the server and can wait in a queue.
  2. Expand the nested URL-path groups. Select individual URLs or use the checkbox at the right of a group heading to select that group. Grouping is based on paths, not visual similarity; select one representative page yourself when several pages use the same layout.
  3. Select Use selected pages (N) to fill the URL list below. This only selects URLs: you must still select Import pages.

Discovery defaults to 500 pages for a homepage and up to 1,000 URLs for a sitemap. You can select at most 500 URLs for one import batch. If Discovery reached a limit appears, the list may not include every page.

  1. Paste up to 500 public URLs, one per line, and select Import pages. Alternatively, enter a homepage or sitemap in Discover pages, select URLs from the nested path groups, and use the selected pages. A sitemap lists URLs without crawling those pages.
  2. Follow progress in Batch history. Backend processing continues if the plugin is closed.
  3. Completed imports appear automatically under Ready to generate. Select the pages to generate.
  4. Select Generate selected pages. Enable Generate all captured variations if needed; each variation counts toward the 500-item limit.
  5. Frames are added automatically, one at a time. Completed placements are skipped when resuming in the same Figma file.

Pause after current frame pauses Figma placement. Cancel unstarted cancels requests the dispatcher has not claimed. Retry failed creates a new batch for failed requests only. Codebase upload failures require re-uploading under new Page Import IDs.

Missing fonts pause placement: install the fonts and select Check again, or select Use fallbacks. Resume remaining frames appears only after interrupted or failed placement. Backend generation can finish while the plugin is closed; adding frames requires the plugin to be open. The running count includes messages waiting for an available worker.

For a single page, enter one URL in the same list. Leave Capture interactive variations off for the initial rendered page, or enable it to capture supported interactive states.

For example, to generate three pages, enter three URLs, import them, then select those three entries under Ready to generate and select Generate selected pages. With variations off, expect three separate root frames, not one combined frame.

While the selected import batch is active, the import button shows Importing N/total pages… and is disabled. Waiting to start means the batch was accepted; Capturing pages means jobs have been dispatched. Do not submit the same URLs again just because capture has not started immediately.

The importer opens the page in a fresh browser, waits for it to render, and captures the visible DOM, computed styles, geometry, text, fonts, images, and supported SVG content. A completed import is saved to the selected project and can be reused for more than one generation.

When to include variations

Enable Capture interactive variations when the page contains useful states such as tabs, accordions, radio buttons, checkboxes, or select menus. The importer explores a bounded set of safe, replayable checks, selections, and clicks without submitting forms.

Interactive exploration is intentionally limited. If the plugin says the state or depth limit was reached, the listed variations are still safe to generate, but they may not represent every possible state on the page.

Select what to generate

After an import completes:

  1. Select pages under Ready to generate.
  2. Leave Generate all captured variations off for the initial state only.
  3. Enable it only when every captured state is needed. The total must not exceed 500 variations.

Static imports normally contain one initial variation. Interactive imports may contain the initial page plus several captured states.

Each selected variation becomes a separate Figma frame. Selecting fewer variations makes generation faster and keeps the canvas easier to review.

Choose where the result appears

Before selecting Generate, optionally select one canvas node in the current Figma page. The first generated frame is placed 160 px to the right of that node, and additional variations are placed beside the preceding result.

If there is no single valid selection, the result is placed at the center of the current viewport. The plugin selects and zooms to each completed result automatically.

Generate the design

Select Generate selected pages. The plugin then:

  1. Converts each selected capture into a native-Figma specification.
  2. Retrieves the captured images securely.
  3. Checks whether the required fonts are available in the current Figma editor.
  4. Creates editable frames, text, images, vectors, fills, borders, radii, and supported effects.
  5. Records the created root frame in Guinness.

Generation and Figma materialization can take several minutes for a long or complex page. Progress is shown while layers are being created.

The selected batch shows Waiting to start, then Generating frames. In dev, scheduled dispatch runs once per minute, so a newly accepted batch can wait until the next dispatch. Batch history shows queued, running, succeeded, failed, and cancelled counts. A succeeded job has a result on the server; it does not by itself confirm that a frame has been added to Figma. Keep the plugin open and resolve any font prompt so automatic placement can finish.

Resolve missing fonts

Code2Des checks fonts before writing layers. If required font styles are unavailable, the panel lists the requested font and the fallback Figma will use.

  • Install or activate the missing fonts, then select Check again for the closest visual result.
  • Select Use fallbacks to continue immediately with editable text using the listed substitutes.

Font substitution can change text width, wrapping, and frame height. Review typography carefully when fallbacks were used.

Review the result

The completed frame is named with the code2des prefix and a generation timestamp. Check:

  • Overall frame dimensions, section order, and spacing.
  • Text wrapping and typography, especially when fonts were substituted.
  • Images, gradients, SVGs, borders, corner radii, opacity, and shadows.
  • Yellow or specially named unmatched layers, which indicate a source construct that could not be represented directly.
  • The final plugin message for the number of created layers, warnings, or failed variations.

The output consists of native Figma nodes and can be edited normally. Generating the same imported page again creates another result rather than deleting an earlier generation.

Warnings do not necessarily block generation. asset_not_persisted means an image was not saved with the capture; unsupported_background_image means a background could not be converted. A successful job can therefore have missing images or backgrounds. Review these areas against the source page. Videos and images larger than 3 MB are skipped during import.

If something goes wrong

No completed pages Import a public URL first. If an earlier import is still processing, wait for it to finish and reopen the plugin if the list does not refresh.

Page URL must use http or https Enter the complete public URL, including https://. Local files and other URL schemes are not supported.

Page import failed Open the URL in a private browser window. Confirm that it loads without login, CAPTCHA, VPN, browser extension, or access to a private network. A page can also fail when it never becomes stable or exceeds the capture limits.

The imported page looks incomplete The site may lazy-load content, require interaction, block automated browsers, or depend on an authenticated session. Try Capture interactive variations for supported interactive controls, but note that Code2Des cannot bypass access controls or manually operate the site.

Required fonts are unavailable Install or activate the fonts and select Check again, or continue with the displayed fallbacks.

Discovery stays queued Wait for scheduled dispatch. If it remains queued, ask the environment maintainer to check the Page Discovery worker, FIFO queue, and backend queue configuration. Page import and Code2Des can work even when discovery has not been deployed. Enter URLs manually to use those features meanwhile.

Generation succeeded but no frames appeared Open the same Figma file and project, expand Batch history, and select the generation batch. Check for Missing fonts or a placement error. If Resume remaining frames appears, use it to continue placement rather than generating another batch. Closing the plugin pauses canvas work, not backend processing.

Some layers are missing or marked unmatched Unsupported browser effects and inaccessible assets are reported instead of being silently invented. Use the original page as the reference when correcting these layers manually.

One variation failed but others succeeded Successful variations remain on the canvas. Read the failure message, correct the source or font issue, then generate only the failed variation again.

What it does not do

  • It does not generate reusable design-system components or component variants.
  • It does not create prototype links or infer navigation to other pages.
  • It does not reproduce video, animation, hover timing, or every browser-only visual effect.
  • It does not capture authenticated, private-network, or non-public content.
  • It does not guarantee pixel-identical typography when the original fonts are unavailable in Figma.
  • It does not replace design review; the source page remains the visual reference.

For the implementation contract, see AI Code2Des.