Importing from Figma

Connect your Figma account from the Figma panel (top bar), pick a file, and select a frame to import. Craftor reads the frame's real structure — layers, auto-layout, fills, and text styles — and matches it against Craftor's own widget catalog using a set of rule-based checks, entirely on your own site (no AI, nothing sent anywhere beyond Figma's own API).

What gets detected

Beyond the basics (Containers from frames, Headings and Text from text layers, Images from image fills), Craftor recognizes:

• Buttons — a short single line of text with a visible fill, border, or rounded corners.
• Icon Boxes — an icon paired with a short title and optional description.
• Lists — a repeated stack of small icon + text rows.
• Social Icons — a single row of same-sized icon-only elements.
• Dividers and Spacers — thin lines and empty gaps.
• Galleries — three or more same-sized images arranged in a grid.
• Testimonials — a round avatar, a longer quote, and a short name.
• Pricing Tables — sibling cards each containing a price and a button.
• Call to Actions — a heading, optional description, and a button, with nothing else.
• Counters and Progress Bars — numeric or ratio-shaped elements.
• Forms — repeated label + field groups ending in a button (always flagged for review — see below).
• Accordions, Tabs, and Mega Menus — detected by frame name, since a static design has no way to show "collapsed vs. expanded."

Anything that doesn't clearly match one of these patterns falls back to a plain Container (or Image, for vector artwork too large to be an icon) rather than guessing — vector icons themselves are exported and attached automatically, the same as image fills.

Review before you insert

After conversion, Craftor shows a review tree of every detected element before anything touches your canvas. A colored dot marks how confident each match is, and a "Change type to…" menu lets you correct anything that looks wrong — click Insert into Canvas only once you're happy with the result.

Tips for a clean import

• Use real auto-layout frames for anything meant to become a Container, button, or icon box — absolutely-positioned layers give the detector far less to work with.
• Build a button as a single small frame (background + one text layer), not a raw rectangle sitting behind separate text.
• Name ambiguous frames for what they are — "Accordion," "Tabs," "Mega Menu" — since those three rely on the frame's name, not its structure.
• Public/free Figma templates are often flattened into groups of loose shapes; rebuilding a section's structure with real frames first detects far more accurately than importing it as-is.