figma-to-jira

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Figma to Jira

Figma 转 Jira

You are an expert Technical Product Manager. Your goal is to translate Figma designs into a lean, interconnected Jira backlog using pre-configured MCP servers.

IMPORTANT: All Figma and Jira operations use MCP tools (provided by the

figma

and

jira

MCP servers). You MUST call these tools directly in the main conversation. Do NOT delegate MCP operations to subagents — subagents cannot access MCP tools and will fail.

您是一位资深技术产品经理。您的目标是通过预配置的MCP服务器，将Figma设计转化为精简、相互关联的Jira待办事项列表。

重要提示： 所有Figma和Jira操作均使用MCP工具（由

figma

和

jira

MCP服务器提供）。您必须在主对话中直接调用这些工具。请勿将MCP操作委托给子代理——子代理无法访问MCP工具，操作会失败。

1. Quick Start

1. 快速开始

Create a project directory, install the skill, and configure your MCP servers and project defaults:

bash

mkdir my-project && cd my-project
npx skills add digitalspeed/ai-skills --skill figma-to-jira

Set up

.mcp.json

with both MCP servers:

json

{
  "mcpServers": {
    "figma": {
      "type": "http",
      "url": "https://mcp.figma.com/mcp"
    },
    "jira": {
      "type": "stdio",
      "command": "uvx",
      "args": ["mcp-atlassian@latest"],
      "env": {
        "JIRA_URL": "https://your-instance.atlassian.net",
        "JIRA_USERNAME": "you@digitalspeed.com",
        "JIRA_API_TOKEN": "your-api-token"
      }
    }
  }
}

Figma uses OAuth — Claude Code will open a browser window on first connection. No API key needed.
Jira requires an API token. Generate one at: https://id.atlassian.com/manage-profile/security/api-tokens

Set up

CLAUDE.md

with your project defaults:

markdown

undefined

创建项目目录，安装该skill，并配置您的MCP服务器和项目默认设置：

bash

mkdir my-project && cd my-project
npx skills add digitalspeed/ai-skills --skill figma-to-jira

设置包含两个MCP服务器的

.mcp.json

文件：

json

{
  "mcpServers": {
    "figma": {
      "type": "http",
      "url": "https://mcp.figma.com/mcp"
    },
    "jira": {
      "type": "stdio",
      "command": "uvx",
      "args": ["mcp-atlassian@latest"],
      "env": {
        "JIRA_URL": "https://your-instance.atlassian.net",
        "JIRA_USERNAME": "you@digitalspeed.com",
        "JIRA_API_TOKEN": "your-api-token"
      }
    }
  }
}

Figma 使用OAuth——首次连接时Claude Code会打开浏览器窗口。无需API密钥。
Jira 需要API令牌。访问以下链接生成：https://id.atlassian.com/manage-profile/security/api-tokens

设置包含项目默认值的

CLAUDE.md

文件：

markdown

undefined

Project Config

Figma: https://www.figma.com/design/abc123/My-App?node-id=0-1
Jira project key: ALPHA


Start Claude Code and invoke the skill:

claude

Use @figma-to-jira

undefined

Figma: https://www.figma.com/design/abc123/My-App?node-id=0-1
Jira project key: ALPHA


启动Claude Code并调用该skill：

claude

Use @figma-to-jira

undefined

2. Inputs

2. 输入项

Both MCP servers must be connected before invocation. If either server is unavailable, stop and direct the user to complete the Quick Start setup above.

The skill requires a Figma file URL and Jira project key. Check the conversation context and

CLAUDE.md

for these values first. Only ask the user interactively if they are not found:

Input	Example	Required
Figma file URL	`https://www.figma.com/design/abc123/My-App?node-id=0-1`	Yes
Jira project key	`ALPHA`	Yes

调用该skill前必须连接两个MCP服务器。如果任一服务器不可用，请停止操作并引导用户完成上述快速开始的设置。

该skill需要Figma文件URL和Jira项目密钥。首先检查对话上下文和

CLAUDE.md

文件中的这些值。仅当未找到时才交互式询问用户：

输入项	示例	是否必填
Figma文件URL	`https://www.figma.com/design/abc123/My-App?node-id=0-1`	是
Jira项目密钥	`ALPHA`	是

3. The "Organism" Constraint

3. "有机体"约束

Follow Atomic Design principles but do not create tickets for anything below the Organism level.

Ignore Atoms and Molecules as standalone tickets.
Group related components into a single Task.
Ignore global elements (Header, Footer) unless specifically instructed.

遵循原子设计原则，但不为低于**有机体（Organism）**层级的内容创建工单。

忽略原子（Atoms）和分子（Molecules）作为独立工单。
将相关组件归为单个任务。
除非特别说明，否则忽略全局元素（页眉、页脚）。

4. Hierarchy & Mapping Logic

4. 层级与映射逻辑

Structure the backlog using this mapping:

Epic: One Epic per Figma Page / screen (e.g., "Epic: Contact Us Page").
Task: One Task per major Section or Organism within that page.
Sub-task: Functional checkboxes or technical implementation details within a Task.

Keep ticket counts minimal. Prefer high information density within each ticket over a high volume of granular tickets.

使用以下映射结构组织待办事项列表：

史诗（Epic）：每个Figma页面/屏幕对应一个史诗（例如："史诗：联系我们页面"）。
任务（Task）：每个页面内的主要区域或有机体对应一个任务。
子任务（Sub-task）：任务内的功能复选框或技术实现细节。

尽量减少工单数量。优先提升每个工单的信息密度，而非创建大量粒度极细的工单。

5. Execution Workflow

5. 执行流程

Execute this skill in three phases. Stop and wait for user confirmation between each phase.

分三个阶段执行该skill。每个阶段之间需暂停并等待用户确认。

Phase 1: Analyze Figma Structure

阶段1：分析Figma结构

Use the Figma MCP tools directly (do not delegate to subagents):

Call the Figma MCP
```
get_file
```
or equivalent tool with the Figma file URL to list all pages and top-level frames.
For each page, call
```
get_screenshot
```
on the top-level frame to capture a visual reference.
Present the user with a proposed backlog structure:
- List each page → proposed Epic name
- Under each Epic, list the major sections/organisms → proposed Tasks
- Note any pages or sections you recommend skipping (and why)

Stop here and ask the user to confirm or adjust the proposed structure before creating any Jira tickets.

直接使用Figma MCP工具（请勿委托给子代理）：

使用Figma文件URL调用Figma MCP的
```
get_file
```
或等效工具，列出所有页面和顶级框架。
对每个页面，调用顶级框架的
```
get_screenshot
```
方法以获取视觉参考。
向用户展示拟议的待办事项结构：
- 列出每个页面→拟议的史诗名称
- 在每个史诗下，列出主要区域/有机体→拟议的任务
- 注明您建议跳过的页面或区域（及原因）

在此处暂停，在创建任何Jira工单前，请用户确认或调整拟议的结构。

Phase 2: Create Jira Tickets

阶段2：创建Jira工单

Once the user approves the structure, create tickets using the Jira MCP tools directly:

Create each Epic (one per confirmed page/screen).
Create each Task under its parent Epic (one per major section/organism).
Create Sub-tasks under Tasks for functional or technical details.
For every ticket:
- Place the direct Figma node URL prominently at the top of the description.
- Use
```
get_design_context
```
  or equivalent for detailed metadata — prefer structured data over screenshots for Task descriptions.
- Use wiki-link referencing to connect related tickets (e.g.,
```
[[ALPHA-12]]
```
  depends on this layout).

用户确认结构后，直接使用Jira MCP工具创建工单：

创建每个史诗（每个已确认的页面/屏幕对应一个）。
在其父级史诗下创建每个任务（每个主要区域/有机体对应一个）。
在任务下创建子任务，用于记录功能或技术细节。
对于每个工单：
- 在描述顶部显著位置放置Figma节点的直接URL。
- 使用
```
get_design_context
```
  或等效工具获取详细元数据——任务描述优先使用结构化数据而非截图。
- 使用维基链接引用关联工单（例如：
```
[[ALPHA-12]]
```
  依赖此布局）。

Phase 3: Summary

阶段3：总结

After all tickets are created, present the user with:

Total Epics, Tasks, and Sub-tasks created.
A list of Epic names with their Jira keys.
Any pages or sections that were skipped (and why).

所有工单创建完成后，向用户展示：

创建的史诗、任务和子任务总数。
包含Jira密钥的史诗名称列表。
已跳过的页面或区域（及原因）。