Try And Learn Figma MCP Server Book

“尝试学习Figma MCP服务器―活用AI的产品开发”样品代码&设计文件集

本资料库是书籍 “尝试学习Figma MCP服务器―利用AI的产品开发” 中描述的场景，使用以下步骤创建明细表，以便在概念设计中分析体量的体积。

通过与书籍一起使用，可以一边实际动手一边学习利用Figma MCP的开发流程。

存储库配置

try-and-learn-figma-mcp-server-book
├ chapter2
│ ├ section02
│ │ └ mcp.json
│ ├ section03
│ │ └ example-html/
│ │   ├ index.html
│ │   └ style.css
│ └ section04
│   ├ sds/                  # https://github.com/figma/sds をベースに書籍の手順に沿って追加
│   │ ├ src/examples/
│   │ │ └ MyLandingPage.tsx # 既存コンポーネントを使ったランディングページ
│   │ └ src/ui/primitives/
│   │   └ Alert/            # 「Alert」コンポーネント
│   └ sds.fig               # Simple Design System に Alert を追加した Figma ファイル
└ chapter3
  └ section05
    └ design.fig

各Chapter的内容

Chapter2:Figma MCP服务器活用工作流

第02节环境构建和设置

是用于使用Figma MCP服务器的基本设定文件。

• mcp.json

从第03节设计生成HTML和CSS页面

是根据Figma设计生成静态HTML/CSS的练习用样品。

• example-html/

第04部分生成React组件并扩展现有项目

• sds.fig（在Simple Design System中添加Alert的Figma文件）

利用现有项目的Figma MCP，生成并扩展组件的实践示例。

Chapter3:Figma MCP的设计师能做的事

第05节同步理解

AI作为上下文进行了容易处理的构造·命名·整理的设计例子。

• design.fig

注意事项

• Figma社区上的文件可能会更新。
• 本资料库的内容基于书籍执笔时的规格。