Skill Store 33

Figma Code Workflows

Import or upload local HTML or project files into Figma, choose editable Design frames, runnable…

by figma

The skill

Import or upload local HTML or project files into Figma, choose editable Design frames, runnable Code Layers or standalone Code (also known as Make), and repair imported previews. Use only when the user explicitly names editable Design layers, a runnable Code Layer, or a standalone Code/Make file, or supplies a Figma file key/link as the import destination. Generic code or code-component requests need output clarification before using this workflow.

This skill's licence does not allow redistribution, so the store does not show its text. Read it at the source.

Use this skill

Connect your agent to the Skill Store MCP server and ask for it by ref: figma/figma-code-workflows-45485567677.

Markdown version

Details

Publisher
figma
Category
Software Development › Frontend & UI
Updated
2026-10-19

References

More from figma

  • Figma Code Connect Creates and maintains Figma Code Connect template files that map Figma components to code snippets.
  • Figma Create New File Always use this skill when the user wants to create a new Figma Design, FigJam, or Slides file.
  • Figma Design To Code **MANDATORY prerequisite** — you MUST invoke this skill BEFORE calling the `get_design_context` F…
  • Figma Generate Design Use this skill alongside figma-use when the task involves translating an application page, view,…

Related skills

  • Figma Figma design-to-code workflow.
  • Figma Build Build a Figma design from code or a description — the reverse of figma-codegen.
  • Figma Codegen Generate framework-aware code from a Figma design.
  • Figma Implement Design Translates Figma designs into production-ready application code with 1:1 visual fidelity.
  • Figma Generate Design Use this skill alongside figma-use when the task involves translating an application page, view,…