Sunnyside Figma Context icon

Sunnyside Figma Context

Integrates Figma designs with AI development workflows to extract pixel-perfect code, assets, and component structures.

关于

This Model Context Protocol (MCP) server seamlessly connects Figma designs to AI development workflows, providing 14 specialized tools to extract pixel-perfect code, assets, and component structures. It empowers developers to transform design concepts into production-ready code with AI-powered precision, offering real-time extraction via a custom Figma plugin, integration with Figma Dev Mode, and direct Figma API access for comprehensive design data retrieval.

主要功能

  • Provides tools for complete project scaffolding and component analysis.
  • Generates custom components in various styles (e.g., Tailwind, styled-components).
  • Extracts pixel-perfect code (CSS, React, TypeScript) directly from Figma designs.
  • 1 GitHub stars
  • Enables batch extraction and download of design assets (images, icons).
  • Seamless integration with Figma via custom plugin, Dev Mode, and direct API.

使用案例

  • Automating the conversion of Figma designs into production-ready code (CSS, React, TypeScript).
  • Extracting and managing design assets like images and icons from Figma files for development.
  • Accelerating AI agent development by providing structured, real-time design context.
Sunnyside Figma Context: AI Figma Design to Code Automation