MD-figma

Tag

product-design、design-engineering、figma-plugin、markdown

状态

Prototype

技术栈

Figma Plugin API、TypeScript、remark、remark-gfm、unified

Repository

EY2ENN/MD-Figma

MD-figma 是什么?

Markdown 适合整理内容和表达结构,Figma 适合继续讨论版式、信息层级与界面关系。两者之间通常隔着一次手动复制:标题需要重新设置层级,列表需要重新排版,表格还要重新搭建。

MD-figma 是一个把 Markdown 内容转换为 Figma 原生可编辑节点的插件原型。导入后的内容由 FrameText 等 Figma 节点组成,仍然可以在画布中继续编辑,不需要先导出成图片。

MD-Figma 插件界面与实时阅读预览
MD-Figma 插件界面与实时阅读预览

用户痛点

把文档带入设计画布时,真正需要保留的是结构。

复制文本会丢失层级关系

标题、正文和列表在 Markdown 中已经有清晰的语义,但直接复制到 Figma 后,内容会变成一段需要重新整理的文字。设计讨论从内容本身转移到格式修正。

导出图片会失去编辑能力

把 Markdown 渲染成图片可以保留当下的版式,却无法继续修改文字、调整层级或拆开表格。只要文档发生变化,就需要重新导出和替换。

表格需要同时满足阅读和讨论

列数较少的表格适合保持横向关系,列数较多或文本较长时,卡片结构更容易阅读。单一的渲染方式无法覆盖这两种场景。

设计目标

  1. 保留 Markdown 的内容结构,让标题、段落、列表和表格进入画布后仍有清晰层级。
  2. 输出 Figma 原生节点,保证文字、容器和表格可以继续编辑。
  3. 将 Markdown 解析与 Figma 渲染拆开,后续可以在不改动解析流程的情况下扩展渲染方式。
  4. 为表格提供 TableCards 两种模式,按照内容密度选择更合适的呈现方式。

设计方案

先解析内容结构,再根据结构创建可以继续编辑的 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,并在插入后自动选中和定位到当前视口。