figma

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Figma → HyperFrames

Bring the user's Figma work into a composition. MCP-first: you (the agent) call the Figma MCP tools, then hand their output to the pure helpers in

@hyperframes/core/figma

, freezing every asset locally so renders stay deterministic.

将用户的Figma作品导入合成项目中。优先使用MCP：你（Agent）调用Figma MCP工具，然后将输出结果交给

@hyperframes/core/figma

中的纯辅助工具，将所有资源本地固化，确保渲染结果的确定性。

Auth

授权

Requires the Figma MCP connector (one-click OAuth). If tools error unauthenticated, tell the user to connect Figma and stop.

需要Figma MCP连接器（一键式OAuth）。如果工具因未授权报错，请告知用户连接Figma并停止操作。

Routing

路由

Parse the user's figma link with

parseFigmaRef

. Then by intent:

"use this layer / logo / image" → Asset import
"import this animation / motion" → Motion import
brand tokens / components → not in this skill version (see the design spec roadmap).

使用

parseFigmaRef

解析用户的Figma链接。然后根据意图处理：

"使用此图层/标志/图片" → 资源导入
"导入此动画/动效" → 动效导入
品牌令牌/组件 → 当前技能版本不支持（请查看设计规范路线图）。

Asset import

资源导入

```
get_metadata(fileKey, nodeId)
```
→ confirm the node, capture width/height.
Export it:
```
download_assets
```
(or node image export) for PNG; prefer SVG for vectors.

Freeze: write the bytes with

freezeBytes(bytes, join(typeDirPath(projectDir,"image"), id + ext))

where

id = nextId(projectDir,"image")

Ledger:

appendRecord(projectDir, { id, type:"image", path, source:"figma", width, height, provenance:{ source:"figma", fileKey, nodeId, format } })

Emit
```
buildAssetSnippet(record).html
```
into the composition. Re-import guard:
```
findByFigmaNode
```
before re-fetching.

```
get_metadata(fileKey, nodeId)
```
→ 确认节点，获取宽/高。
导出资源：使用
```
download_assets
```
（或节点图片导出）获取PNG；矢量图优先选择SVG格式。

固化：使用

freezeBytes(bytes, join(typeDirPath(projectDir,"image"), id + ext))

写入字节数据，其中

id = nextId(projectDir,"image")

。

台账：

appendRecord(projectDir, { id, type:"image", path, source:"figma", width, height, provenance:{ source:"figma", fileKey, nodeId, format } })

。

将
```
buildAssetSnippet(record).html
```
输出到合成项目中。重复导入防护：重新获取前先调用
```
findByFigmaNode
```
。

Motion import

动效导入

get_motion_context(fileKey, nodeId)

→ read the

codeSnippets.motionDev

(and

.css

Normalize it into a
```
MotionDoc
```
: for each animated property build a
```
MotionTrack
```
{ property (motion.dev name), values, times (0..1), ease[] (named strings or
```
[x1,y1,x2,y2]
```
bezier arrays), duration, repeat }. Selector = the target element's stable id (
```
#<id>
```
from the component's
```
data-figma-id
```
/
```
id
```
).
```
const spec = motionToGsap(doc);
```
```
const script = emitTimelineScript(spec);
```
→ inject as a
```
<script>
```
in the composition (after the GSAP + CustomEase CDN tags). The timeline is paused, finite, registered on
```
window.__timelines
```
.
If a track uses shader/spring/effect props with no GSAP mapping, bake instead:
```
export_video
```
→ freeze MP4 → embed as
```
<video class="clip">
```
. Say which path you used.

get_motion_context(fileKey, nodeId)

→ 读取

codeSnippets.motionDev

（以及

.css

）。

将其标准化为
```
MotionDoc
```
：为每个动画属性构建一个
```
MotionTrack
```
{ property（motion.dev中的名称）, values, times（0..1）, ease[]（命名字符串或
```
[x1,y1,x2,y2]
```
贝塞尔数组）, duration, repeat }。选择器为目标元素的稳定ID（来自组件
```
data-figma-id
```
/
```
id
```
的
```
#<id>
```
）。
```
const spec = motionToGsap(doc);
```
```
const script = emitTimelineScript(spec);
```
→ 将其作为
```
<script>
```
注入合成项目中（位于GSAP + CustomEase CDN标签之后）。时间轴处于暂停状态，为有限时长，已注册到
```
window.__timelines
```
。
如果轨道使用了无GSAP映射的着色器/弹簧/特效属性，则改为烘焙：
```
export_video
```
→ 固化MP4 → 嵌入为
```
<video class="clip">
```
。说明你使用的路径。

Determinism

确定性

Never leave a Figma URL in the composition — freeze first. Never emit

repeat: -1

. Timelines paused.

切勿在合成项目中保留Figma URL——先固化。切勿输出

repeat: -1

。时间轴需处于暂停状态。