mcpField
F
figma-swiftui

figma-swiftui

github.com/figma设计与 UI2.1k1.3k 次安装今天更新
代码仓库

关于 figma-swiftui

此路由技能支持 Figma 设计与 SwiftUI 代码的双向转换，并根据任务方向选择相应参考指南。它还提供读取 Figma 上下文和映射 iOS 设计模式的通用说明。

主要功能

  1. 01路由设计转代码与代码转设计任务
  2. 02确认方向不明确的转换请求
  3. 03通过 `get_design_context` 读取 Figma 结构
  4. 04映射 iOS 语义颜色与 SF Symbols
  5. 05识别常见 iOS 界面模式

适用场景

  1. 01根据 Figma 画板构建 SwiftUI 界面
  2. 02将 SwiftUI 视图或设计令牌发送到 Figma
  3. 03处理同时涉及 Figma 和 Swift 文件的模糊请求

MCP 相关

使用 Figma MCP 的 `get_design_context` 读取设计结构，并指定 Swift 和 SwiftUI 作为客户端语言及框架。代码转设计时，要求先加载相关技能，再使用 `use_figma`。

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/figma/mcp-server-guide --skill figma-swiftui

安装后在 Claude Code 中输入/figma-swiftui确认已加载。

附带文件references/code-to-design.mdreferences/design-to-code.md

详细介绍

Figma ↔ SwiftUI

在 Figma 设计与 SwiftUI 代码之间进行双向转换。本文件是路由入口——实际指南见下方的参考文档。

选择方向

方向触发条件参考文档
设计 → 代码用户希望根据 Figma 文件/画板，在其 iOS 项目中生成 SwiftUIreferences/design-to-code.md
代码 → 设计用户希望将 SwiftUI 视图 / 屏幕 / 令牌推送到 Figma 文件references/code-to-design.md

如果请求含义不明确——既有 Figma URL，又有 .swift 文件，且没有明确动词说明方向——请先询问用户要采用哪个方向，再加载参考文档。

共享上下文（适用于两个方向）

无论方向如何，以下要点都适用；特定方向的参考文档均以此为前提。

  1. **get_design_context 是读取 Figma 的工具。**传入 clientLanguages: "swift" 和 clientFrameworks: "swiftui"，让响应以 Swift 为背景。URL → 工具参数：figma.com/design/:fileKey/:fileName?node-id=:nodeId → 使用 fileKey，并将 nodeId 中的 - 替换为 :。对于 figma.com/design/:fileKey/branch/:branchKey/:fileName，将 branchKey 用作 fileKey。
  2. **get_design_context 输出中的 React+Tailwind 是结构参考，并非可直接使用的源代码。**它只是对视觉效果的近似表达。切勿将 position: absolute / 像素尺寸的框架 / mix-blend-mode 图层堆叠直接转换为 SwiftUI 或 Figma——在两个方向上，截图都是真实依据。
  3. iOS HIG 语义颜色是令牌，不是十六进制颜色。var(--backgrounds/primary, …)、var(--labels/secondary, …)、var(--separators/non-opaque, …) 等，在 SwiftUI 中映射为 Color(.systemBackground)、Color.secondary、Color(.separator)，在 Figma 中则映射为语义集合中的变量。保留映射关系；舍弃具体的 RGBA 值。
  4. **SF Symbols 在两个方向往返转换时都按名称处理，切勿使用代码点。**设计 → 代码：get_design_context 会在响应中将 Figma 的 SF Symbol 字形序列替换回 <SFSymbol>{Image(systemName: "...")}</SFSymbol> 封装。请原样使用这些名称。代码 → 设计：在 use_figma 中调用 figma.util.getSfSymbolCharacter(name)，将符号名称转换为对应字符——切勿手动查找代码点。
  5. **识别底层的 iOS 模式，而非节点 / 视图的字面名称。**两个方向都会反复出现相同模式：大标题 + 返回箭头 + 尾随操作 = NavigationStack 装饰栏；底部的图标+标签对 = TabView；重复的等高行，带有前导 / 尾随装饰 = List。应匹配这些系统模式，而不是用基础元素重新搭建。
  6. **代码 → 设计时，use_figma 是 API。**在调用任何 use_figma 之前，务必先加载 figma-use。如果任务涉及构建完整屏幕，还需加载 figma-generate-design；如果涉及构建组件或设计系统，还需加载 figma-generate-library。

参考文档

文档加载时机
references/design-to-code.md将 Figma 设计 / 画板转换为 SwiftUI 时
references/code-to-design.md将 SwiftUI 视图 / 屏幕 / 令牌推送到 Figma 时

评论

支持 Markdown