接続
Sunnyside Figma Context icon

Sunnyside Figma Context

bytercumantanumut
•
1
開発者ツール
生産性とワークフロー
デザインツール

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.