Figma
The official Figma Dev Mode MCP server exposes design context — layout, variables, styles, components, and Code Connect mappings — directly to AI agents so they can generate code that matches your designs. It can extract selection metadata, screenshots, and motion data, and generate new Figma files and diagrams.
Tools
add_code_connect_map
Add a mapping between a Figma node and a code component.
create_new_file
Create a blank Figma Design, FigJam, or Slides file in drafts.
download_assets
Download rendered exports and original source images from a file.
generate_diagram
Turn Mermaid or natural language into an interactive FigJam diagram.
generate_figma_design
Send live UI as design layers into a Figma file or clipboard.
get_code_connect_map
Map selected Figma node IDs to their Code Connect components.
get_code_connect_suggestions
Suggest mappings of Figma components to code components.
get_design_context
Get design context for a layer or selection in a chosen framework.
get_figjam
Convert a FigJam diagram, such as a workflow, into XML.
get_libraries
Return the subscribed and available design libraries for a file.
get_metadata
Return a sparse XML representation of the selection's properties.
get_motion_context
Return keyframe animation data so agents can recreate motion.
get_screenshot
Capture a visual screenshot of the selection for layout fidelity.
get_variable_defs
Return the variables and styles used in the current selection.
search_design_system
Search connected libraries for components, variables, and styles.