search
Ctrlk

Import from Figma

Turn your Figma designs into production-ready web apps by sharing a frame link and describing what you want.

For teams that design in Figma, CodeWords helps you move from static design to working app much faster. Share a Figma frame, explain the goal, and Cody generates a deployable web app.

hashtag
How it works

Instead of manually translating designs into code, Cody reads your Figma frame, extracts visual and structural data, and builds a matching app.

hashtag
The process

  1. Connect Figma: Connect your Figma account through OAuth in CodeWords.

  2. Share a frame link: Paste a Figma link to a specific frame or component, for example: https://www.figma.com/design/XYZ/File?node-id=123:456

  3. Describe what to build: Tell Cody what you want, such as: “Build a functional web app from this design. Match layout, colors, and typography.”

  4. Cody extracts design data Cody analyzes both the rendered frame and the design structure, including:

    • Layout and component hierarchy

    • Colors, typography, and spacing

    • Text content, assets, and design tokens

    • Responsive hints from auto-layout and constraints

  5. Cody builds and deploys Cody generates a Next.js app with Tailwind CSS, shows a preview, and deploys to *.codewords.run after confirmation.

hashtag
What gets extracted

  • Layout and structure

  • Colors, typography, and spacing

  • Components, text, and assets

  • Auto-layout, constraints, and design tokens (when available)

hashtag
Tips for best results

  • Share a specific frame link.

  • Use auto-layout in Figma.

  • Name layers clearly.

  • Share multiple frames for multi-page flows.

  • Describe interactions like hover, click, and navigation.

hashtag
Example prompt

My Figma is connected. Please build an exact web app from this frame: https://www.figma.com/design/XYZ/My-App?node-id=123:456 Match colors, typography, and layout closely.Deploy it when ready.

hashtag
Limitations

  • Figma variables may require additional scope support; if unavailable, Cody uses fallback extraction.

  • Prototype transitions and overlays are not imported automatically.

  • External paid fonts may need substitutions.

  • Smart Animate does not transfer directly; describe desired animations in your prompt.

PreviousGithub Integration

Last updated

Was this helpful?