Figma / Sketch / Adobe XD 设计插件终极指南按工作流选对每一款工具【免费下载链接】Awesome-Design-ToolsThe best design tools and plugins for everything 项目地址: https://gitcode.com/gh_mirrors/aw/Awesome-Design-Tools设计稿里塞满了 Lorem Ipsum前端拿到手还得自己换数据改一个按钮文字背景宽度就要手动拖交付时设计师量尺寸、开发追问圆角来回拉扯一下午——这些场景几乎每个 UI 设计师都经历过。开源项目 Awesome Design Plugins 正是为此而生的设计插件精选清单它把 Sketch、Adobe XD、Figma 三大生态里的数百款插件按「解决什么工作流问题」组织成 40 多个场景分组并标注了每个插件所属的平台你可以直接按任务检索而不是按工具名字瞎逛。工作流阶段典型任务对应清单分类原文档目录起步搭建画板整理、批量命名、像素对齐Align Arrange、Guides Grids、Rename Helper视觉创作色彩、图表、文字排版Color Management、Charts、Typeface内容填充真实数据、头像、地图Data Generation、Map Generation评审协作可访问性、演示、用户流Accessibility、Presentation Preview、User Flows开发交付标注、CSS / Swift / React 代码Developers Handoff、Code Export归档治理组件库、版本控制、文档组织Symbols Components、Version Control完整清单见插件列表源文件 Awesome-Design-Plugins.md。设计插件精选横幅起步搭建让画板、命名和选择先「自动化」新建文档后的第一件正事是把画板收拾整齐。清单里这一环节的工具可以分成四个小问题来选批量命名Rename It支持三端批量重命名图层与画板EnumeratorSketch / Figma能按画板的 x,y 坐标自动编号Regexp Rename用正则表达式改图层名适合大批量规范化namespacesFigma可以自动格式化页面、组件与图层的命名层级。画板整理Auto Arrange Artboards按画布位置重排图层面板顺序SizeArtboard围绕当前选区生成新画板XD 侧的Artboard Plus支持网格重排、按名排序、选区建画板三合一。聪明地选中DeepSelect按图层类型过滤选区比如「只要文本」Figma 的Find Focus输入关键词就能定位图层并自动缩放XD 的Selection支持按名称、类、组件实例、位置批量选中。收尾清理File CleanerMonzo 出品保持文件整洁Pixel Perfecter揪出非整数像素的图层Figma 的Delete Hidden Layers一键清掉隐藏与锁定图层。新手建议先装上命名 清理两类各一个文件大了以后你会感谢自己。内容填充让设计稿告别 Lorem Ipsum「设计稿里全是假数据」是评审被挑战的头号原因。清单里的数据生成插件按素材类型分成四组素材类型代表插件平台一句话差异占位文本Sketch IpsumSketch填充随机拉丁占位文本本地化文本stuffing、Seoul、BRDataSketch分别提供中文、韩国人名、巴西语境的真实感数据结构化数据CSV Mail Merge、Airtable to FigmaSketch / Figma前者用{}占位符从 CSV 批量导入后者直接拉取 Airtable 的文本与图片头像与图片TinyFaces、UnsplashSketch / Figma前者随机头像后者直接插入 Unsplash 图库照片品牌 LogoBrandfetch、LogodropFigma / Sketch按公司名检索并插入真实品牌标识地图Maps generator、Map MakerXD / Figma前者输入地名或经纬度即可生成可调缩放与样式如果你的项目是本地化产品Foreign Ipsum这类多语言占位文本、以及后文翻译环节里的TranslateFigma值得搭配使用先用真名真句填充再批量换成目标语言检查布局是否撑爆。布局与像素把「手动拖」变成「一键批处理」对齐、分布与内边距按钮文字一改背景就要跟着变Dynamic buttonSketch锁定固定内边距自适应文本Figma 侧的Button Resizer做同样的事需要等距排列时Distribute ByFigma按像素精确分布SketchDistributor则在 Sketch 里按指定间距水平/垂直分布网格控首选Grid Master修复并扩展 Sketch 网格能力XD 用户可用Grids Plus生成不带小数的可用网格Figma 的Guide Mate负责复杂参考线。响应式与尺寸Figma 生态在响应式上选择最多Viewports一键把画板改成主流机型尺寸Responsify用于多设备快速测试AutoLayout在子层尺寸变化时自动重排Stacks提供间距、方向、对齐的半自动控制。Sketch 侧对应的是Auto LayoutAnima 出品单画板设计多屏与Sketch Flex LayoutCSS Flexbox 思维。像素完美XD 的Remove Decimal Numbers批量抹掉宽高、旋转、坐标里的小数Figma 的Pixel Perfect把忘开「吸附像素网格」的图层重新取整——两者都是交付前最后一道保险。文字与字体批量改字、换字体、做本地化查找替换Find and ReplaceFigma像文本编辑器一样跨图层搜索替换Retextifier不逐个点选就能批量改文案Simple Find and ReplaceXD区分大小写大小写规范Case ConverterSketch批量转大小写changeTextCaseXD支持 snake_case、kebab-case 等命名风格Proper Title CaseFigma按 APA 与芝加哥手册规范标题字体治理FontilySketch查找替换字体Global Font ReplaceXD整文档换字体Figma 的Missing Font Selector能圈出所有缺失字体的图层Font ScaleFigma可生成和谐的字号层级本地化Crowdin for Sketch / Figma在写代码之前就把页面翻成多语言并生成语言资源World ReadyXD先检查本地化就绪度再自动生成多语言画板Pseudo LocalizationXD做伪本地化测试。评审协作从可访问性检查到 3D 演示交付前的「体检」可访问性不是上线前才补的课Stark同时支持 Sketch 与 Figma可模拟各类色盲视角CluseSketch免费开源边测对比度边调色Figma 的Contrast让你在画稿时顺手看比值A11y - Focus Orderer则负责标注 Tab 焦点顺序。想验证视觉注意力Visualeyes几秒生成热力图UseberryXD提供热图、录屏与用户流记录。让稿子动起来Figmotion是 Figma 内的动画工具AnimateMate对应 SketchSketch Browser Preview按 CmdShift. 就能把当前画板推到浏览器里预览3D 展示环节Angle按分辨率自动给屏幕稿套透视RotoFigma做 3D 挤出旋转RotatoXD把设计放进照片级 3D 设备里用户流图Flow Exporter把 Sketch 原型流导出成 HTMLAutoflowFigma快速连线Overflow专注画给用户看的故事线。开发交付CSS / Swift / React 代码的 5 条路线路线适用场景代表插件平台标注平台同步团队长期协作Zeplin、Avocode、Lanhu App蓝湖Sketch / Figma本地标注页离线自测Sketch Measure一键生成含 CSS 的 HTML 标注页Sketch复制样式片段单点取用StyleClip复制 CSS/SCSSCopy Swift Code生成 UIColor 初始化代码Sketch框架组件生成交付组件SVG to React Component、Icon2CodeReact/Angular/Vue 图标 JSONSketch / Figma整页出码快速原型Sketch2Web、HtmlGenerator选择即生成 HTML/CSS 等价代码Sketch / FigmaiOS / Android 方向还有iosViews生成视图代码、sketch2vd导出 VectorDrawable、Android Res ExportPNG、应用图标、nine-patch 一条龙。XD 用户可以用Copy CSS to Clipboard开源快速复制文本样式、颜色、阴影的 CSS或用Advanced Export一次拿到 Android/CSS/LESS/SCSS/Xaml 多套代码。归档治理设计系统、版本控制与生态工具组件与样式Instance FinderFigma定位组件全部实例Symbol-Merger、Merge Duplicate Symbols合并重复符号restore-overrides在库更新前后保存并恢复覆盖值Sketch Style Master批量重命名共享样式Fix Styles去重。版本控制Git Sketch Plugin免费开源把带 diff 的 Git 客户端做进了 SketchAbstract是文件管理与版本控制工具Figma 侧可用Time Machine存档历史版本。插件生态写插件的可以看Sketch DevToolsskpm 官方与InspectorFigma管插件的用Sketch Plugin ManagerGit 保活Utility Belt、KitchenAnt Design 出品这类合集适合一次装一批常用小工具。把新插件提交回社区发现好插件后按 Contribution_Guidelines.md 提交 Pull Request 即可规则并不复杂先搜索既有条目避免重复提交链接格式为Plugin — description描述以句号结尾、不留行尾空格必须添加平台标签Sketch / Adobe XD / Figma完全免费的工具还可加 free 标签开源的加 open-source 标签新分类至少要有 2 个插件才成一个插件只进一个分类若它能解决别的任务在别的分类末尾提一句即可。从构建配置 docs/modules/config/plugins.js 可以看到这份 Markdown 清单会被 index.js 的渲染流水线转换成带搜索、目录滚动高亮、按平台过滤sortByApplication的 Web 页面也就是说它既是可静态阅读的列表也是可交互检索的插件站。一句话总结别按平台找插件按「现在卡在哪一步」找插件——起步搭建选命名与清理评审前做可访问性体检交付走标注或出码路线归档交给版本控制。清单里每个分类都是这么组织的。【免费下载链接】Awesome-Design-ToolsThe best design tools and plugins for everything 项目地址: https://gitcode.com/gh_mirrors/aw/Awesome-Design-Tools创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/10/26 1:37:14 · 阅读 1.2k Figma / Sketch / Adobe XD 设计插件终极指南：按工作流选对每一款工具
Figma / Sketch / Adobe XD 设计插件终极指南按工作流选对每一款工具【免费下载链接】Awesome-Design-ToolsThe best design tools and plugins for everything 项目地址: https://gitcode.com/gh_mirrors/aw/Awesome-Design-Tools设计稿里塞满了 Lorem Ipsum前端拿到手还得自己换数据改一个按钮文字背景宽度就要手动拖交付时设计师量尺寸、开发追问圆角来回拉扯一下午——这些场景几乎每个 UI 设计师都经历过。开源项目 Awesome Design Plugins 正是为此而生的设计插件精选清单它把 Sketch、Adobe XD、Figma 三大生态里的数百款插件按「解决什么工作流问题」组织成 40 多个场景分组并标注了每个插件所属的平台你可以直接按任务检索而不是按工具名字瞎逛。工作流阶段典型任务对应清单分类原文档目录起步搭建画板整理、批量命名、像素对齐Align Arrange、Guides Grids、Rename Helper视觉创作色彩、图表、文字排版Color Management、Charts、Typeface内容填充真实数据、头像、地图Data Generation、Map Generation评审协作可访问性、演示、用户流Accessibility、Presentation Preview、User Flows开发交付标注、CSS / Swift / React 代码Developers Handoff、Code Export归档治理组件库、版本控制、文档组织Symbols Components、Version Control完整清单见插件列表源文件 Awesome-Design-Plugins.md。设计插件精选横幅起步搭建让画板、命名和选择先「自动化」新建文档后的第一件正事是把画板收拾整齐。清单里这一环节的工具可以分成四个小问题来选批量命名Rename It支持三端批量重命名图层与画板EnumeratorSketch / Figma能按画板的 x,y 坐标自动编号Regexp Rename用正则表达式改图层名适合大批量规范化namespacesFigma可以自动格式化页面、组件与图层的命名层级。画板整理Auto Arrange Artboards按画布位置重排图层面板顺序SizeArtboard围绕当前选区生成新画板XD 侧的Artboard Plus支持网格重排、按名排序、选区建画板三合一。聪明地选中DeepSelect按图层类型过滤选区比如「只要文本」Figma 的Find Focus输入关键词就能定位图层并自动缩放XD 的Selection支持按名称、类、组件实例、位置批量选中。收尾清理File CleanerMonzo 出品保持文件整洁Pixel Perfecter揪出非整数像素的图层Figma 的Delete Hidden Layers一键清掉隐藏与锁定图层。新手建议先装上命名 清理两类各一个文件大了以后你会感谢自己。内容填充让设计稿告别 Lorem Ipsum「设计稿里全是假数据」是评审被挑战的头号原因。清单里的数据生成插件按素材类型分成四组素材类型代表插件平台一句话差异占位文本Sketch IpsumSketch填充随机拉丁占位文本本地化文本stuffing、Seoul、BRDataSketch分别提供中文、韩国人名、巴西语境的真实感数据结构化数据CSV Mail Merge、Airtable to FigmaSketch / Figma前者用{}占位符从 CSV 批量导入后者直接拉取 Airtable 的文本与图片头像与图片TinyFaces、UnsplashSketch / Figma前者随机头像后者直接插入 Unsplash 图库照片品牌 LogoBrandfetch、LogodropFigma / Sketch按公司名检索并插入真实品牌标识地图Maps generator、Map MakerXD / Figma前者输入地名或经纬度即可生成可调缩放与样式如果你的项目是本地化产品Foreign Ipsum这类多语言占位文本、以及后文翻译环节里的TranslateFigma值得搭配使用先用真名真句填充再批量换成目标语言检查布局是否撑爆。布局与像素把「手动拖」变成「一键批处理」对齐、分布与内边距按钮文字一改背景就要跟着变Dynamic buttonSketch锁定固定内边距自适应文本Figma 侧的Button Resizer做同样的事需要等距排列时Distribute ByFigma按像素精确分布SketchDistributor则在 Sketch 里按指定间距水平/垂直分布网格控首选Grid Master修复并扩展 Sketch 网格能力XD 用户可用Grids Plus生成不带小数的可用网格Figma 的Guide Mate负责复杂参考线。响应式与尺寸Figma 生态在响应式上选择最多Viewports一键把画板改成主流机型尺寸Responsify用于多设备快速测试AutoLayout在子层尺寸变化时自动重排Stacks提供间距、方向、对齐的半自动控制。Sketch 侧对应的是Auto LayoutAnima 出品单画板设计多屏与Sketch Flex LayoutCSS Flexbox 思维。像素完美XD 的Remove Decimal Numbers批量抹掉宽高、旋转、坐标里的小数Figma 的Pixel Perfect把忘开「吸附像素网格」的图层重新取整——两者都是交付前最后一道保险。文字与字体批量改字、换字体、做本地化查找替换Find and ReplaceFigma像文本编辑器一样跨图层搜索替换Retextifier不逐个点选就能批量改文案Simple Find and ReplaceXD区分大小写大小写规范Case ConverterSketch批量转大小写changeTextCaseXD支持 snake_case、kebab-case 等命名风格Proper Title CaseFigma按 APA 与芝加哥手册规范标题字体治理FontilySketch查找替换字体Global Font ReplaceXD整文档换字体Figma 的Missing Font Selector能圈出所有缺失字体的图层Font ScaleFigma可生成和谐的字号层级本地化Crowdin for Sketch / Figma在写代码之前就把页面翻成多语言并生成语言资源World ReadyXD先检查本地化就绪度再自动生成多语言画板Pseudo LocalizationXD做伪本地化测试。评审协作从可访问性检查到 3D 演示交付前的「体检」可访问性不是上线前才补的课Stark同时支持 Sketch 与 Figma可模拟各类色盲视角CluseSketch免费开源边测对比度边调色Figma 的Contrast让你在画稿时顺手看比值A11y - Focus Orderer则负责标注 Tab 焦点顺序。想验证视觉注意力Visualeyes几秒生成热力图UseberryXD提供热图、录屏与用户流记录。让稿子动起来Figmotion是 Figma 内的动画工具AnimateMate对应 SketchSketch Browser Preview按 CmdShift. 就能把当前画板推到浏览器里预览3D 展示环节Angle按分辨率自动给屏幕稿套透视RotoFigma做 3D 挤出旋转RotatoXD把设计放进照片级 3D 设备里用户流图Flow Exporter把 Sketch 原型流导出成 HTMLAutoflowFigma快速连线Overflow专注画给用户看的故事线。开发交付CSS / Swift / React 代码的 5 条路线路线适用场景代表插件平台标注平台同步团队长期协作Zeplin、Avocode、Lanhu App蓝湖Sketch / Figma本地标注页离线自测Sketch Measure一键生成含 CSS 的 HTML 标注页Sketch复制样式片段单点取用StyleClip复制 CSS/SCSSCopy Swift Code生成 UIColor 初始化代码Sketch框架组件生成交付组件SVG to React Component、Icon2CodeReact/Angular/Vue 图标 JSONSketch / Figma整页出码快速原型Sketch2Web、HtmlGenerator选择即生成 HTML/CSS 等价代码Sketch / FigmaiOS / Android 方向还有iosViews生成视图代码、sketch2vd导出 VectorDrawable、Android Res ExportPNG、应用图标、nine-patch 一条龙。XD 用户可以用Copy CSS to Clipboard开源快速复制文本样式、颜色、阴影的 CSS或用Advanced Export一次拿到 Android/CSS/LESS/SCSS/Xaml 多套代码。归档治理设计系统、版本控制与生态工具组件与样式Instance FinderFigma定位组件全部实例Symbol-Merger、Merge Duplicate Symbols合并重复符号restore-overrides在库更新前后保存并恢复覆盖值Sketch Style Master批量重命名共享样式Fix Styles去重。版本控制Git Sketch Plugin免费开源把带 diff 的 Git 客户端做进了 SketchAbstract是文件管理与版本控制工具Figma 侧可用Time Machine存档历史版本。插件生态写插件的可以看Sketch DevToolsskpm 官方与InspectorFigma管插件的用Sketch Plugin ManagerGit 保活Utility Belt、KitchenAnt Design 出品这类合集适合一次装一批常用小工具。把新插件提交回社区发现好插件后按 Contribution_Guidelines.md 提交 Pull Request 即可规则并不复杂先搜索既有条目避免重复提交链接格式为Plugin — description描述以句号结尾、不留行尾空格必须添加平台标签Sketch / Adobe XD / Figma完全免费的工具还可加 free 标签开源的加 open-source 标签新分类至少要有 2 个插件才成一个插件只进一个分类若它能解决别的任务在别的分类末尾提一句即可。从构建配置 docs/modules/config/plugins.js 可以看到这份 Markdown 清单会被 index.js 的渲染流水线转换成带搜索、目录滚动高亮、按平台过滤sortByApplication的 Web 页面也就是说它既是可静态阅读的列表也是可交互检索的插件站。一句话总结别按平台找插件按「现在卡在哪一步」找插件——起步搭建选命名与清理评审前做可访问性体检交付走标注或出码路线归档交给版本控制。清单里每个分类都是这么组织的。【免费下载链接】Awesome-Design-ToolsThe best design tools and plugins for everything 项目地址: https://gitcode.com/gh_mirrors/aw/Awesome-Design-Tools创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考