1. 项目概述当设计工具“活”了过来如果你和我一样常年泡在Figma里从线框图一路画到高保真那你一定对那种“重复劳动”的疲惫感深有体会。调整一个组件的间距得手动框选几十个实例想尝试一个新的布局方案就得从头拖拽排列甚至只是想把一段占位文案换成更符合语境的真实内容也得在画布和文案稿之间来回切换。设计尤其是UI/UX设计其核心价值在于创造性的思考和决策但实际工作中大量时间却被消耗在了执行层面的、机械式的“像素搬运”上。这就是为什么当我第一次听说Figwright时感觉像是有人给Figma这个已经非常强大的工具装上了一颗“会思考的大脑”。简单来说Figwright是一个双向桥梁它让以Claude Code、Cursor为代表的AI编程助手能够直接“看到”并“操作”你的Figma画布。这不再是简单的“用AI生成一张设计图”的玩具而是一个真正意义上的AI驱动的工作流。AI不再是旁观者或内容生成器它成为了你的数字协作者能理解你画布上的元素这是哪些组件它们的层级关系如何并能根据你的自然语言指令直接对它们进行编辑把这个按钮向右移动20像素把那个列表的间距调成8px用更专业的文案替换所有占位文本。想象一下这个场景你正在评审一个移动端列表页的设计觉得卡片之间的留白有点局促。传统做法是你告诉设计师“这里间距调大一点。”设计师需要手动框选所有卡片在右侧面板找到间距属性输入一个新值。而有了Figwright你只需要在聊天框里输入“把所有卡片的垂直间距从16px增加到24px。”AI理解指令精准定位元素并执行修改整个过程可能只需要几秒钟。这节省的不仅是操作时间更是沟通成本和上下文切换的损耗。它把设计师从繁琐的“操作工”角色中解放出来让我们能更专注于布局、体验、情感化设计这些真正需要人类智慧的部分。2. 核心原理拆解AI如何“看见”并“操控”Figma要让AI驱动Figma听起来很科幻但其背后的技术路径在当下已经相当清晰。Figwright的本质是构建了一个双向、实时、结构化的通信管道一端连接着具备强大代码与逻辑理解能力的AI模型如Claude Code另一端则深度接入Figma的设计文档。这个管道的搭建主要依赖于几个关键的技术层。2.1 基石Figma Plugin API 与 REST APIFigma本身提供了极其开放和强大的开发者接口这是所有第三方工具能与它交互的基础。Plugin API这是最直接、能力最丰富的接口。通过开发一个Figma插件你可以获得几乎与用户手动操作同等的权限。插件可以读取当前文档的所有信息页面、画板、框架、组、矢量图形、文本等等并且能获取到它们的详细属性如位置x, y、尺寸width, height、填充色、描边、字体、字号甚至是复杂的自动布局Auto Layout约束条件。更重要的是插件可以修改这些属性。这意味着AI可以通过插件执行“选中某个节点”、“更改其颜色”、“调整其位置”等原子操作。Plugin API运行在Figma客户端内部响应速度快交互体验流畅。REST API这是面向服务器端的接口。它允许外部程序通过HTTP请求来获取文件信息、评论、版本历史等。虽然对于实时操作画布元素不如Plugin API直接但它对于需要离线分析、批量处理或与外部系统如设计管理系统、项目管理系统集成的场景非常有用。Figwright可能会结合使用两者用Plugin API处理实时交互用REST API进行文件级的元数据管理或异步任务。为什么选择这个组合因为单纯靠REST API无法实现低延迟的实时操控而单纯靠Plugin API则受限于必须在Figma客户端内运行。一个双向工具需要既能在“外部”AI侧进行复杂推理又能在“内部”Figma侧高效执行。Figwright很可能采用了一个“桥接”架构一个常驻的Figma插件负责与画布通信一个外部的AI Agent服务负责处理自然语言和生成操作指令两者通过WebSocket或类似的实时协议连接。2.2 核心翻译层结构化数据与操作指令这是Figwright最精妙的部分。AI模型如Claude Code擅长处理自然语言和代码但它并不原生理解Figma的“帧”、“矩形”、“文本”这些概念以及它们之间复杂的父子级关系。因此需要一个翻译层。序列化Serialization当AI需要“看”画布时Figma插件会将当前画布的状态或选中的部分转换成一个结构化的数据格式比如JSON。这个JSON不是一张图片而是一棵完整的“节点树”Node Tree。每个节点都包含其类型、ID、名称、属性、子节点列表等信息。例如{ “id”: “1:2”, “name”: “Sign Up Button”, “type”: “RECTANGLE”, “x”: 100, “y”: 200, “width”: 120, “height”: 48, “fills”: [{“type”: “SOLID”, “color”: {“r”: 0.2, “g”: 0.4, “b”: 0.8}}], “cornerRadius”: 8, “children”: [ { “id”: “1:3”, “type”: “TEXT”, “characters”: “Sign Up”, “fontSize”: 16 } ] }这相当于把视觉化的设计翻译成了AI能“读懂”的“代码式”描述。指令生成Command Generation当用户给出指令如“让这个按钮变成红色”时AI需要做的是理解意图识别“这个按钮”在节点树中对应哪个节点可能通过名称、位置或上下文。规划操作将“变成红色”转化为Figma API能执行的具体操作。这通常是一系列API调用例如figma.getNodeById(‘1:2’).fills [{type: ‘SOLID’, color: {r: 1, g: 0, b: 0}}]。生成指令AI特别是经过代码训练的Claude Code可以非常自然地生成这样一段“操作脚本”。执行与反馈生成的指令被发送回Figma插件插件解析并执行这些API调用从而改变画布。执行成功后画布的新状态可以再次被序列化并发送给AI形成一个“感知-思考-行动-反馈”的闭环。这使得AI能进行多轮、复杂的操作比如先调整布局再根据新布局优化文案。这里的一个关键挑战是“指代消解”。当用户说“把这个标题放大”时AI如何准确知道“这个标题”是哪一个Figwright可能需要结合多种线索当前用户的选择Selection、元素的语义化命名鼓励用户为图层和组件起好名字、以及在节点树中的上下文位置。成熟的实现会引导用户培养良好的命名习惯或者利用AI的上下文理解能力进行智能匹配。2.3 AI代理Agent的工作流Figwright不是一个简单的“命令-执行”工具它体现的是一个AI代理的典型工作流。一个完整的AI代理通常包含以下循环目标理解解析用户的自然语言指令确定最终要达成的设计目标。环境感知通过上述序列化过程获取当前Figma画布的完整状态。规划与决策基于目标和当前状态拆解任务步骤。例如“将整个登录页面向右对齐”可能被拆解为a) 识别所有顶层画板b) 计算当前总宽度和画布宽度c) 为每个画板计算新的X坐标d) 按顺序执行移动操作。行动执行生成并执行Figma API指令。观察结果检查执行后的画布状态判断是否达到目标或是否需要调整。在这个过程中像Claude Code这样的模型其价值在于它不仅能生成代码指令还能进行逻辑推理和任务分解。它理解“对齐”、“分布”、“风格一致”这些设计概念的代码实现方式从而能完成比单一步骤更复杂的复合任务。3. 环境搭建与工具链配置实操要让Figwright或类似工具跑起来你需要搭建一个连接AI和Figma的环境。下面我以目前社区中较为活跃的技术栈为例手把手带你走通整个配置流程。请注意Figwright本身可能是一个商业产品或开源项目这里的配置思路是通用的适用于你想基于Claude Code和Figma API自建类似能力的情况。3.1 核心组件准备你需要准备三个核心部分Figma端一个自定义插件作为与画布交互的“手”和“眼睛”。AI端一个能够运行Claude Code或其他代码模型的环境作为“大脑”。这里我们选择Cursor作为IDE因为它深度集成了AI能力非常适合这种代理式开发。通信桥梁一个连接插件和AI的服务器或本地服务负责传递消息。为了简化我们可以使用本地WebSocket服务器。3.2 第一步创建Figma插件“桥梁”首先我们需要创建一个Figma插件它负责监听AI的指令并操作画布同时也能将画布状态发送出去。在Figma中新建插件打开Figma桌面端进入菜单Menu Plugins Development Create new plugin...。选择“With UI”模板给它起个名字比如Figwright Bridge。这会在你指定的目录下生成一个插件项目。编写插件核心代码code.ts 插件的主要逻辑在code.ts中。我们需要让它启动一个WebSocket客户端连接我们的AI服务并处理消息。// code.ts figma.showUI(__html__, { width: 400, height: 600 }); // 连接到本地WebSocket服务器假设运行在3001端口 const socket new WebSocket(‘ws://localhost:3001’); socket.addEventListener(‘open’, () { console.log(‘Connected to AI server’); // 连接成功后可以发送当前文档信息或一个就绪信号 figma.ui.postMessage({ type: ‘CONNECTION_STATUS’, status: ‘connected’ }); }); socket.addEventListener(‘message’, async (event) { // 接收来自AI服务器的指令 const message JSON.parse(event.data); console.log(‘Instruction from AI:’, message); try { // 根据指令类型执行操作 switch (message.command) { case ‘GET_SELECTION’: const selection figma.currentPage.selection; const serializedSelection selection.map(node serializeNode(node)); socket.send(JSON.stringify({ type: ‘SELECTION_DATA’, data: serializedSelection })); break; case ‘UPDATE_NODE’: const node figma.getNodeById(message.nodeId); if (node ‘resize’ in node) { // 示例更新节点宽度 await (node as any).resize(message.width, node.height); } break; case ‘CHANGE_COLOR’: const targetNode figma.getNodeById(message.nodeId); if (targetNode ‘fills’ in targetNode) { const fills JSON.parse(JSON.stringify(targetNode.fills)); fills[0].color message.color; // 简化处理假设是单色填充 targetNode.fills fills; } break; // 可以添加更多命令如移动位置、修改文本、调整布局等 default: console.warn(‘Unknown command:’, message.command); } // 操作完成后可以发送更新后的状态回AI socket.send(JSON.stringify({ type: ‘OPERATION_COMPLETE’, success: true })); } catch (error) { console.error(‘Execution error:’, error); socket.send(JSON.stringify({ type: ‘ERROR’, error: error.message })); } }); // 辅助函数将Figma节点序列化为可传输的JSON function serializeNode(node: SceneNode): any { return { id: node.id, name: node.name, type: node.type, x: ‘absoluteTransform’ in node ? node.absoluteTransform[0][2] : 0, y: ‘absoluteTransform’ in node ? node.absoluteTransform[1][2] : 0, width: ‘width’ in node ? node.width : 0, height: ‘height’ in node ? node.height : 0, // 可以根据需要添加更多属性如color, fontSize等 }; } // 同时插件UI也可以发送用户指令到AI可选 figma.ui.onmessage (msg) { if (msg.type ‘USER_COMMAND’) { socket.send(JSON.stringify({ type: ‘USER_INSTRUCTION’, command: msg.command })); } };编译与加载插件在插件目录下运行npm install安装依赖。运行npm run build或npm run watch进行编译和监听。在Figma的插件开发面板点击“重新加载插件”你的Figwright Bridge插件就会出现在列表中。注意这是一个极度简化的示例。真实的插件需要更完善的错误处理、更全面的节点属性序列化、以及对Figma API更复杂的操作封装。安全方面务必验证所有传入的指令防止恶意操作。3.3 第二步配置AI端环境Cursor Claude CodeAI端是我们的“大脑”负责理解指令并生成操作代码。我们使用Cursor IDE因为它能方便地集成Claude Code并运行本地服务。安装与设置Cursor从Cursor官网下载并安装。在Cursor的设置中关联你的Claude API密钥如果你有Claude Code的访问权限。或者Cursor内置的AI模型已经足够强大可以用于此实验。为了方便可以在Cursor的设置中将界面语言调整为中文cursor设置中文但代码部分不受影响。创建AI服务端脚本 在Cursor中新建一个Node.js项目创建server.js文件。这个脚本将作为一个本地WebSocket服务器同时调用AI模型。// server.js const WebSocket require(‘ws’); const { Anthropic } require(‘anthropic-ai/sdk’); // 假设使用Anthropic官方SDK // 初始化WebSocket服务器和AI客户端 const wss new WebSocket.Server({ port: 3001 }); const anthropic new Anthropic({ apiKey: process.env.ANTHROPIC_API_KEY }); console.log(‘AI-Figma Bridge Server running on ws://localhost:3001’); wss.on(‘connection’, (ws) { console.log(‘Figma Plugin connected’); ws.on(‘message’, async (message) { const data JSON.parse(message); console.log(‘Received from Figma:’, data.type); if (data.type ‘USER_INSTRUCTION’) { // 收到用户指令调用AI进行处理 const userCommand data.command; const currentSelection await getCurrentSelectionFromFigma(ws); // 需要先向插件请求当前选择 const prompt 你是一个Figma操作AI。当前画布选中的元素信息如下JSON格式 ${JSON.stringify(currentSelection, null, 2)} 用户指令是“${userCommand}” 请根据用户指令和当前元素信息生成一个或多个Figma插件API调用命令。 你的回复必须是纯粹的JSON数组每个对象是一个命令格式如 [ {“command”: “CHANGE_COLOR”, “nodeId”: “1:2”, “color”: {“r”: 1, “g”: 0, “b”: 0}}, {“command”: “UPDATE_NODE”, “nodeId”: “1:3”, “width”: 200} ] 只输出JSON不要有任何其他解释。 ; try { const aiResponse await anthropic.messages.create({ model: ‘claude-3-5-sonnet-20241022’, max_tokens: 1000, messages: [{ role: ‘user’, content: prompt }], }); const commands JSON.parse(aiResponse.content[0].text); // 将AI生成的命令发送回Figma插件执行 commands.forEach(cmd ws.send(JSON.stringify(cmd))); console.log(‘Sent commands to Figma:’, commands); } catch (error) { console.error(‘AI processing error:’, error); ws.send(JSON.stringify({ type: ‘ERROR’, error: ‘AI failed to process command’ })); } } // 处理其他类型的消息如SELECTION_DATA }); }); // 辅助函数向插件请求当前选中的数据 function getCurrentSelectionFromFigma(ws) { return new Promise((resolve) { ws.send(JSON.stringify({ command: ‘GET_SELECTION’ })); // 这里需要实现一个简单的等待回应的机制为简化示例省略了超时和错误处理 const listener (msg) { const data JSON.parse(msg); if (data.type ‘SELECTION_DATA’) { resolve(data.data); } }; ws.once(‘message’, listener); }); }运行AI服务在项目目录下运行npm init -y然后安装依赖npm install ws anthropic-ai/sdk。设置环境变量ANTHROPIC_API_KEY。运行node server.js。你的本地WebSocket服务器就启动了。3.4 第三步串联与测试启动服务确保node server.js在运行监听3001端口。加载插件在Figma中打开一个设计文件运行你的Figwright Bridge插件。插件UI会出现并在后台尝试连接ws://localhost:3001。进行测试在Figma画布上选中一个矩形。然后你可以通过插件UI上的输入框如果实现了的话发送指令比如“把这个矩形变成蓝色”。或者更直接地你可以在Cursor的终端里模拟向WebSocket服务器发送一个USER_INSTRUCTION消息。观察结果指令被发送到AI服务器AI生成对应的CHANGE_COLOR命令并传回插件插件执行画布上的矩形颜色随之改变。至此一个最基础的、AI驱动Figma画布的双向通道就搭建完成了。你可以在此基础上不断扩展支持的命令集优化AI的提示词Prompt增加对复杂操作如自动布局调整、组件实例替换的支持从而让它变得越来越实用。4. 核心应用场景与价值深度剖析Figwright这类工具的价值远不止于执行几个简单的变色或移动命令。它真正改变的是设计工作的流程、团队协作的方式以及设计系统的维护模式。下面我们来深入探讨几个高价值的应用场景。4.1 场景一设计稿的批量维护与一致性检查这是最直接、最能体现效率提升的场景。在大型项目中一个设计文件可能有几十个页面、数百个画板。当设计规范更新时——比如品牌主色从蓝色调整为深蓝色——手动查找并修改每一个使用旧蓝色的元素是一场噩梦。传统流程设计师需要凭借记忆或搜索逐个页面检查手动选择元素并更改颜色。耗时、枯燥且极易遗漏。AI驱动流程设计师只需对AI说“将整个文件中所有使用#007AFF的颜色替换为#0056CC。” AI可以遍历整个文档的节点树精准定位所有使用该颜色的填充、描边、文字并一次性完成替换。这不仅速度极快而且保证100%无遗漏。更深层的价值设计令牌Design Tokens的联动。现代设计系统普遍使用Design Tokens来管理颜色、字体、间距等原子属性。Figwright可以与这些Token系统连接。当你在代码库中更新了一个Token的值如--color-primaryAI可以自动同步更新所有Figma文件中引用了该Token的样式实现设计与代码的“单一信源”闭环极大降低了同步成本。4.2 场景二动态内容填充与本地化适配UI设计中充斥着大量占位文本Lorem Ipsum和虚假数据。为了展示真实感设计师往往需要从产品经理那里获取文案或从数据库中复制真实数据再手动粘贴到每一个文本框中。AI驱动流程设计师选中一个用户评论列表的组件对AI说“用10条真实的中文用户评论填充这些卡片评论内容关于一款健身App。” AI可以调用其语言模型能力生成符合语境、风格各异的真实评论并自动填充到对应的文本图层中。对于本地化可以说“将当前页面的所有文案翻译成西班牙语并保持原有的字体样式和布局。” AI能理解上下文进行高质量的翻译并保持UI的完整性。实操心得在这个场景中AI的“理解”能力至关重要。它需要识别出哪些文本是标题、正文、按钮标签因为它们的翻译风格和长度限制不同。一个好的实践是在设计初期就为文本图层做好语义化命名如heading/title,body/description,button/cta这样AI在操作时能有更明确的依据。4.3 场景三智能布局调整与响应式适配响应式设计要求同一个组件在不同屏幕尺寸下都能良好呈现。手动调整每个断点的布局非常繁琐。AI驱动流程设计师可以命令AI“将这个卡片列表的布局从目前的垂直排列在宽度小于768px时改为水平滚动排列。” AI需要理解“垂直排列”和“水平滚动”对应的Auto Layout属性方向、内间距、溢出行为并计算出如何修改约束条件来实现这一转换。更进一步可以基于一个基础画板让AI自动生成其他常见尺寸如平板、手机的适配视图自动调整栅格、间距和字体大小。注意事项布局调整是复杂操作涉及多个属性的联动。初期AI可能无法一次做到完美。最佳实践是采用“渐进式修正”的工作流AI先执行一个大致正确的操作设计师进行微调然后将这个微调过程反馈给AI例如通过“刚才那样改很好但间距再大8px”这样的指令让AI学习设计师的偏好后续操作会越来越精准。4.4 场景四设计评审与自动化修改收集设计评审会上产品经理、开发、运营可能会提出大量零散的修改意见“这个图标再大一点”、“那个表单的标题不够醒目”、“这两块内容间距太近了”。传统流程设计师需要一边听会议一边疯狂记笔记会后花大量时间对照笔记逐一修改还可能有理解偏差。AI驱动流程在共享的Figma评审会话中评审者可以直接在评论中AI助手并给出自然语言指令。AI可以实时或在会后解析这些评论并直接生成修改建议甚至执行修改。例如产品经理评论“AI把这个提交按钮的颜色改成更醒目的绿色。” AI可以立即尝试修改设计师只需点击确认或调整即可。这极大地压缩了从反馈到修改的循环周期。价值延伸所有这些修改指令和对应的画布变更都可以被AI自动记录并生成一份结构化的修改日志Changelog同步到项目管理系统如Jira, Linear实现设计变更的可追溯性。5. 潜在挑战、局限性与应对策略尽管前景诱人但将AI深度集成到Figma这样的专业工具中仍面临不少挑战。清醒地认识这些局限才能更好地利用这项技术。5.1 挑战一意图理解的模糊性与精确控制自然语言天生具有模糊性。“把这个弄好看点”这样的指令对AI来说是无法执行的。即使是指令“放大标题”也可能产生歧义是放大字体还是放大整个标题所在的文本框放大多少应对策略培养精准指令的习惯作为使用者我们需要学习如何与AI更有效地“对话”。指令应尽可能具体、可操作包含明确的属性、数值和对象。例如“将名为‘Main Title’的文本图层的字体大小从24px增加到32px。”结合可视化选择最好的方式是“选择指令”。先用鼠标在画布上精确选中目标元素再给出指令。这样AI的指代对象是明确的可以专注于“做什么”。支持多轮对话与修正工具应允许用户在看到AI的初步操作结果后进行补充或修正。“再往右一点”、“颜色再淡一些”通过迭代逼近最终效果。5.2 挑战二复杂设计逻辑与上下文的缺失Figma设计不仅仅是视觉元素的堆砌背后有复杂的逻辑组件Component和变体Variant体系、自动布局Auto Layout的嵌套约束、响应式规则、与设计系统Tokens的关联等。AI如果只“看到”表面的像素和属性而无法理解这些底层逻辑就很容易做出破坏性的修改。应对策略增强上下文输入在序列化画布数据时不仅要提供节点的视觉属性还要提供其结构化和语义化信息。例如标明某个元素是某个主组件的实例Instance它继承了哪些属性哪些属性可以被覆盖。提供自动布局的约束方向、对齐方式和间距规则。分层次、分权限的操作工具可以设定不同的操作模式。例如“安全模式”下AI只能修改可覆盖的样式属性不能破坏组件结构或主组件定义。“专家模式”下才允许进行更深层的重构。这需要AI能识别操作的“风险等级”。5.3 挑战三性能与实时性瓶颈对于非常复杂的大型文件序列化整个节点树会产生巨大的JSON数据传输和处理都可能成为瓶颈。实时操作要求低延迟如果AI思考加上网络传输的时间超过1-2秒体验就会大打折扣。应对策略增量更新与局部序列化不要每次都传输整个文件。只传输当前可见画板或选中区域的数据。AI的操作也尽量是增量的只回传需要更改的节点ID和属性。边缘计算与模型优化将一些简单、高频的操作如简单的颜色、文字替换下沉到在Figma插件内部运行的轻量级模型或规则引擎。只有复杂的逻辑推理和生成任务才交给云端大模型。同时模型本身需要针对Figma API操作进行专项优化和微调提高指令生成的准确性和速度。5.4 挑战四版本控制与责任归属当AI能够直接修改设计文件时一个现实的问题是如何管理版本如果AI执行了一个错误操作覆盖了重要设计如何快速回滚修改的责任归属于谁——是发出指令的设计师还是AI工具应对策略强制快照与操作日志工具在执行任何AI驱动的修改前应自动为当前页面或文件创建一个版本快照类似于Git的commit。所有AI执行的操作都必须被详细记录谁、何时、基于什么指令、修改了哪些属性。这为回滚和责任追溯提供了基础。确认与审查机制重要的、大范围的修改可以设置为“建议模式”。AI生成修改方案后需要设计师手动点击“应用”才能生效。或者AI的修改以“建议”Suggestion的形式呈现像代码评审一样需要其他设计师审核通过后才能合并。清晰的权责界定在团队内建立使用规范AI是执行工具指令发出者是第一责任人。鼓励在小范围或副本文件上测试复杂指令确认无误后再应用到主文件。6. 未来展望从“操作助手”到“设计伙伴”目前Figwright所代表的工具形态主要还是“听令行事”的操作助手。它的价值在于提升执行效率。但它的进化路径非常清晰下一步是成为真正的设计伙伴。从执行到建议未来的AI设计伙伴不仅能执行指令还能主动提出建议。例如它分析画布后可能会说“检测到这三个按钮的样式不一致是否要统一为Primary Button的样式”或者“这个页面的视觉层次不够分明建议将标题字号加大一档并增加卡片投影。”从界面到逻辑更深度的集成是连接设计稿与产品逻辑。AI可以理解一个“购物车”组件并关联起背后的业务流添加商品、显示价格、结算。设计师可以要求AI“基于当前的商品列表和用户流程生成一个完整的结算页面草图。”AI能调用设计系统组件并按照业务逻辑进行排布。从单点到生态Figwright不会是一个孤立的工具。它会与设计系统管理工具如Supernova, Zeroheight、产品文档工具、甚至前端低代码平台深度集成。形成一个从设计意图AI生成或辅助到设计稿FigmaAI驱动再到可交互原型或部分前端代码的自动化流水线。我个人在实际操作中的体会是这类工具最大的意义不在于替代设计师而在于重新定义设计师的工作边界。它将我们从业已纯熟的“软件操作”中解放出来那些重复、繁琐、基于规则的任务将越来越多地交给AI。而设计师的核心价值——同理心、审美判断、创意构思、复杂问题解决和跨领域沟通——将变得前所未有的重要。我们的角色将从“画图的”逐渐转向“定义体验规则的导演”和“训练、指导AI协同创作的教练”。学习如何与AI有效协作用精准的指令表达设计意图并对其输出进行批判性审校将成为下一代设计师的关键技能。这个过程已经开始而像Figwright这样的工具正是我们踏入这个新世界的第一个台阶。