告别静态设计稿Grida Assistant 的 Slots 参数化组件与 Meta 编辑器实战指南【免费下载链接】assistant Bring your Figma design development pipeline to the next level - with design to code, in-design-content-management, component management, tools for faster design项目地址: https://gitcode.com/gh_mirrors/as/assistantGrida Assistant 是一款强大的 Figma 插件主打 Figma 设计稿转代码design to code、设计内容管理与组件管理。它支持 Slots 参数化组件与 Meta 编辑器两大核心能力前者让组件摆脱写死的静态内容变成可传参的活组件后者为每个设计组件挂上可版本化的元数据文档链接、Storybook、Git 地址等让设计与代码真正联动起来。无论你是设计师还是前端工程师都能用它把静态设计稿升级为可维护、可复用、可追踪的工程化资产。本文是一份面向新手的完整实战指南。Grida Assistant 是什么设计到代码的一站式 Figma 插件Grida Assistant 的核心价值在于选一块设计稿生成人类可读的高质量代码并提供实时预览。它不是简单地把图层翻译成rect和text而是具备上下文检测能力——识别出这是按钮就生成按钮代码。主要特性一览✅ 人类可读的代码生成输出为函数、变量等模块化结构✅ Slots 支持组件带参数拒绝静态内容✅ 设计 Lint让视觉与结构同时讲得通✅ 云资源秒级拷贝无需手动下载图片塞进res/✅ 控制台实时预览几秒内让设计稿变成可运行的应用Slots 参数化组件让设计稿开口说话为什么需要 Slots传统设计稿里组件内的文案、图片是写死的。开发拿到后要么硬编码要么手动替换。Slots 的思路来自 React / Flutter 等框架组件只定义结构内容通过参数注入。Slot 命名约定3 个默认变量在 Grida Assistant 中开发模式下 Slot 有一套简单约定见figma-core/tool-box/slot/README.md约定说明命名前缀图层名必须以slot:开头如slot:slot-nametext文本型插槽对应参数text: stringimage图形上的图片插槽对应参数src: stringany任意类型插槽对应参数visible: boolean也就是说你只需要把 Figma 图层命名为slot:username、slot:avatar等助手就会在生成代码时把它们替换为可传入的参数而不是写死的字符串或图片。实际效果左侧是选中的设计稿右侧是生成的 Flutter 代码——静态内容变成了参数占位组件真正做到Design once, Run everywhere。Meta 编辑器实战给组件挂上身份证Meta 编辑器能做什么Meta 编辑器源码位于packages/app-meta-editor/meta-editor/index.tsx让你为选中的组件定义并编辑一套结构化元数据 Schema核心能力包括Add Schema / Update Schema为组件添加或更新元数据结构JSON SchemaAdd Seed注入种子数据模板适配 Material Design、Ant Design 等主流设计体系Export Data将数据导出为 JSON 文件Update Data更新与图层 / 场景关联的数据Versioning对 Schema 与数据做版本管理默认组件元数据字段打开 Meta 编辑器默认 Schema 已内置 5 个实用字段见packages/app-meta-editor/meta-editor/index.tsx中的DefaultComponentMetaDataSchemaname— 组件名称storybook— Storybook 故事链接docsUrl— 文档地址URL 类型点击即可在浏览器打开gitUrl— 该组件在 Git 仓库中的文件 / 目录位置codeSnippet— 代码片段 这意味着在设计稿里选中一个按钮组件你就能看到它对应的前端组件长什么样、代码在哪里、文档在哪一份。设计评审时再也不用问这个组件的实现在哪。批量元数据一次标记整个设计库packages/app-meta-editor/batch-meta-editor/index.tsx提供了批量能力向目标节点批量写入 / 清除全局元数据。它最初的设计场景就是设计库种子化——给远程设计库里的所有组件打上元数据后助手就能自动识别这个实例来自 Ant Design / Material Design并据此生成更准确的代码。⚠️ 当前限制批量元数据操作仅支持在根文档节点root document node上添加。快速上手从零到本地运行的完整步骤前置条件Node.js Figma 桌面版。1. 克隆仓库项目使用 yarn workspace git submodules 管理git clone --recurse-submodules https://gitcode.com/gh_mirrors/as/assistant cd assistant2. 安装依赖并构建各子包yarn3. 以开发模式启动 Figma 插件yarn figma启动后在 Figma 中打开 Assistant即可体验 Code / Design / Lint / Preview 等视图浏览器开发模式可运行yarn web后访问localhost:3303/init-webdev。新手避坑清单坑点正确做法选中组件实例后元数据没保存Meta 编辑器只识别主组件Master需手动选中 Master 或 Variant 再添加元数据Slot 没被识别为参数图层名必须以slot:前缀开头如slot:title批量写入元数据不生效目前仅支持在根文档节点上批量操作子节点暂不支持线上插件功能比仓库旧已发布的插件落后仓库若干功能想尝鲜请从本地源码构建小结Grida Assistant 通过Slots 参数化组件解决了设计稿内容写死的痛点通过Meta 编辑器建立了设计与代码之间的双向索引。两者结合你的 Figma 文件不再是一堆静态图片而是一份带参数、带文档、带 Git 溯源的活设计资产——设计一次到处运行维护零成本。 相关模块路径速查Slots 约定文档figma-core/tool-box/slot/README.mdMeta 编辑器屏幕packages/app-meta-editor/meta-editor/index.tsx批量元数据编辑packages/app-meta-editor/batch-meta-editor/index.tsx元数据仓储层Figma 平台读写实现packages/app-meta-editor/repository/index.ts完整更新日志CHANGELOG.md【免费下载链接】assistant Bring your Figma design development pipeline to the next level - with design to code, in-design-content-management, component management, tools for faster design项目地址: https://gitcode.com/gh_mirrors/as/assistant创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考