MD-figma
MD-figma 是什么?
Markdown 适合整理内容和表达结构,Figma 适合继续讨论版式、信息层级与界面关系。两者之间通常隔着一次手动复制:标题需要重新设置层级,列表需要重新排版,表格还要重新搭建。
MD-figma 是一个把 Markdown 内容转换为 Figma 原生可编辑节点的插件原型。导入后的内容由 Frame、Text 等 Figma 节点组成,仍然可以在画布中继续编辑,不需要先导出成图片。
用户痛点
把文档带入设计画布时,真正需要保留的是结构。
复制文本会丢失层级关系
标题、正文和列表在 Markdown 中已经有清晰的语义,但直接复制到 Figma 后,内容会变成一段需要重新整理的文字。设计讨论从内容本身转移到格式修正。
导出图片会失去编辑能力
把 Markdown 渲染成图片可以保留当下的版式,却无法继续修改文字、调整层级或拆开表格。只要文档发生变化,就需要重新导出和替换。
表格需要同时满足阅读和讨论
列数较少的表格适合保持横向关系,列数较多或文本较长时,卡片结构更容易阅读。单一的渲染方式无法覆盖这两种场景。
设计目标
- 保留 Markdown 的内容结构,让标题、段落、列表和表格进入画布后仍有清晰层级。
- 输出 Figma 原生节点,保证文字、容器和表格可以继续编辑。
- 将 Markdown 解析与 Figma 渲染拆开,后续可以在不改动解析流程的情况下扩展渲染方式。
- 为表格提供
Table和Cards两种模式,按照内容密度选择更合适的呈现方式。
设计方案
先解析内容结构,再根据结构创建可以继续编辑的 Figma 节点。
先解析结构,再渲染节点
插件使用 remark-parse 解析 Markdown,并通过 remark-gfm 增加 GFM 表格支持。解析结果先被整理成标题、段落、列表和表格四类内容块,再交给渲染器创建 Figma 节点。
这样处理的重点是保留内容关系。Markdown 的标题层级不需要被转换成一张截图,列表的顺序和表格的列关系也不需要在画布里重新推断。
Markdown 内容块与 Figma 输出
| Markdown 结构 | Figma 输出 | 保留内容 |
|---|---|---|
| 标题 | Text 节点 | 标题层级与文字内容 |
| 段落 | Text 节点 | 连续文本与段落间距 |
| 无序或有序列表 | Text 节点 | 项目符号、编号与条目顺序 |
| GFM 表格 | Frame 与 Text 节点 | 表头、行、列、对齐方式与文本格式 |
段内的粗体和斜体会被转换为对应的文字样式,链接保留可读文字。连续段落和相同类型的列表会在渲染前合并,减少画布上不必要的碎片节点。
表格的两种密度
Table 模式保留表格的横向列关系,适合列数较少、需要快速比较的信息。Cards 模式将每一行变成一张内容卡片,适合列数较多或单元格文本较长的情况。
两种模式共享同一套 Markdown 表格解析结果。切换呈现方式只改变渲染器,不改变原始内容结构。
从输入到画布
插件界面保持一条直接的导入路径:粘贴 Markdown,选择表格模式,点击 Insert into Canvas。内容会被创建为一个垂直排列的 Markdown Content Frame,并在插入后自动选中和定位到当前视口。