Figma文字行自动编号技巧详解

在Figma中为多行文本图层实现精准、高效的按行自动编号，是提升设计系统可维护性与团队协作效率的关键技巧——本文系统梳理了四种实用方案：从开箱即用的“Rename It”插件一键拆分命名，到轻量级的“Auto Layout Renamer”动态标注总行数；从支持高度定制的Figma API脚本批量生成带序号的独立文本图层，再到无需插件、依赖“转轮廓”的纯手动兜底方案。无论你追求自动化、兼容性还是完全可控的本地执行，都能找到匹配工作流的解决方案，让每一行文本都拥有清晰、结构化且可追溯的命名标识。

如果您在Figma中创建了多行文本图层，但希望为每一行自动赋予唯一且可读的名称（例如“标题-1”“正文-2”“备注-3”），而非默认的“Text”或重复的“Text 1”，则需借助Figma的命名逻辑与插件能力实现按行编号。以下是实现该目标的多种方法：

一、使用插件“Rename It”批量按行拆分并重命名

该插件支持将多行文本图层按换行符分割为独立图层，并为每个新图层赋予基于原始图层名与行序号的结构化名称。

1、选中包含多行文本的图层（确保其为单个文本节点，非多个独立文本框）。

2、点击右上角“Plugins” → 搜索并运行“Rename It”。若未安装，需先从Figma Community安装该插件。

3、在插件面板中选择“Split text by lines”选项，并设置前缀（如标题-）和编号起始值（如1）。

4、点击“Apply”，插件将自动将原图层解构为多个独立文本图层，每层名称形如“标题-1”“标题-2”等，且保持原有垂直排列顺序。

二、使用插件“Auto Layout Renamer”结合手动换行检测

该插件不直接拆分图层，而是扫描当前选中文本图层内的换行符数量，并依据行数动态重命名图层本身（适用于需保留单图层结构但需标识行数的场景）。

1、确保文本图层处于编辑状态外（即已退出文字输入，仅被选中）。

2、运行“Auto Layout Renamer”插件，在命名模板栏输入格式字符串，例如：正文-{lineCount}。

3、插件会自动统计该文本中的换行符（\n）数量，并将总行数加1作为{lineCount}值（如含2个换行符，则共3行）。

4、点击“Rename”，图层名称立即更新为类似“正文-3”的形式。

三、通过Figma API + 简易脚本（仅限本地开发环境）实现逐行命名

对于熟悉JavaScript且使用Figma Desktop的用户，可通过开发者模式执行脚本，遍历文本字符范围，识别换行位置后为每行生成带编号的独立文本图层并重命名。

1、在Figma文件中右键目标文本图层 → 选择“Show layers”以确认其type为“TEXT”。

2、按下Ctrl+Shift+I（Windows）或Cmd+Option+I（macOS）打开开发者工具。

3、粘贴并执行以下脚本片段（需替换变量prefix为所需前缀）：
const prefix = "条目";
const textNode = figma.currentPage.selection[0];
if (textNode.type === "TEXT") {
  const lines = textNode.characters.split("\n");
  lines.forEach((line, i) => {
    const newNode = figma.createText();
    newNode.characters = line;
    newNode.name = `${prefix}-${i + 1}`;
    figma.currentPage.appendChild(newNode);
  });
}

4、执行后，每行内容将以独立图层形式添加至画布顶层，名称严格按顺序编号，如“条目-1”“条目-2”。

四、手动配合“文本转轮廓”与图层重命名（无插件方案）

当无法使用插件时，可利用Figma内置功能将文本按视觉行分离，再逐层命名。该方法依赖换行符存在且每行宽度一致，适用于静态排版。

1、选中文本图层，右键选择“Convert to outline”。此时文本变为矢量路径，但每行仍保持独立子组结构（前提是原始文本含硬回车）。

2、在图层面板中展开该轮廓组，可见多个名为“Text”或“Group”的子项，其堆叠顺序与原文本行序一致。

3、依次点击各子项，在右侧属性面板顶部名称栏中手动输入编号名称，例如：说明-1、说明-2、说明-3。

4、完成命名后，所有行均具备唯一标识，且保留原始视觉位置与样式（因已转为轮廓，不可再编辑文字内容）。

到这里，我们也就讲完了《Figma文字行自动编号技巧详解》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！