Figma 推荐插件

🌟代表我常用的插件 ❤️代表跺脚推荐;基础插件对建立 Design System 非常有帮助,Juuust Handoff 是对接开发的设计交付插件非常推荐。

😋基础插件

  1. Juuust Handoff 设计交付插件,自动标注可离线交付给开发❤️
  2. SmoothShadow 平滑投影 🌟
  3. Find and Replace 文本替换 ❤️
  4. Mixfonts 定义常用中西文字体 🌟
  5. Chroma Colors 批量创建 Color Styles ❤️
  6. Text Styles Generator 批量生成文字样式 ❤️
  7. Rename It 图层批量重命名、替换文字、图层排序、西文大小写等 ❤️
  8. Design System Organizer 快速对 Masters&Styles 重命名/复制/分组 ❤️
  9. Content Reel 填充内容(人名、头像、地址等)🌟
  10. Autoflow 自动绘制流程图箭头🌟
  11. Similayer figma 全选(Select All...)增强,全选指定相同 XX 属性的图形、component instances、文本等 ❤️
  12. Smart Cloner 复制多份 component instances 快速迭代组件 🌟
  13. Component Cloner 同上,一次只能复制一个 component 有闪烁 bug
  14. Figma Chinese Rename 帮助中国用户合理命名图层的插件 🌟
  15. Redlines 手动标注(如果和开发聊不明白那就...)🌟
  16. Instance Swap 快速搜索替换实例或插入实例

🖋矢量图形处理插件

  1. Chart 快速生成各种图表适合 Dashboard 设计高级功能需付费🌟
  2. SkewDat 斜切形状和文本 🌟
  3. Geometric 制作数学图形多边形和曲线 配合 looper 很好玩🌟🌟
  4. Looper 用于生成迷幻的重复图形,适用于任何矢量形状或文字🌟
  5. Confetti 快速生成五彩纸屑 🌟
  6. Mockup & Angle Mockups 都是把画板界面应用到透视的 Mockup (更推荐Mockup比较简洁)🌟
  7. To Path 可以将任何图形或文字放在矢量路径上(比如:圆环字)
  8. Arc 把文本处理成弯曲的文本(类似 To Path 功能比较单一)
  9. Blobs SVG 随机椭圆斑点生成器
  10. Get Waves SVG 波浪随机生成器
  11. Wave & Сurve 轻松创建各种波浪和有趣的图案
  12. Hero Patterns for Figma 生成重复的条纹背景图案
  13. Roto 创建 3D 和旋转图形(不太会用也不太好用)
  14. Snap to Grid 自定义网格吸附 (比如:4X4网格做图标)

🌁图片处理插件

  1. Image tracer “单色”位图转矢量图(配合 Dither 非常好用)🌟
  2. Noise 噪点生成器 🌟
  3. Pixels 把图片矢量像素化🌟❤️
  4. Duotones 在图像上应用双色滤镜(比如:红黑)🌟
  5. Dither 在 Figma 中为图像添加(RGB)抖动效果
  6. BeatFlyer Lite 处理图片动态特效,模糊、闪烁等
  7. Halftones 色彩半调(黑&彩色)
  8. Insert Big Image 导入大图片(原理是宽高超过 4096 px 分割)
  9. Movie Posters 随机添加一个流行电影或电视剧的海报(我从未加载出图来可能是代理问题)

📝文本插件

  1. Better Font Picker 快速字体选择器(figma 的字体选择器不好用)🌟
  2. Google Sheets Sync 将Google表格中的内容同步到 Figma 文件中 🌟
  3. Retextifier 批量修改文本 🌟
  4. zebra 轻量级的色彩对比检查器 🌟
  5. A11y - Color Contrast Checker 遵守WCAG(Web内容可访问性准则)标准检查色彩对比度,确保用户可以正常查看你的文本
  6. Font Fascia 列出文档中使用的所有字体字族和样式并且能定位到图层
  7. Add numbers to texts 轻松添加文字编号/数字/罗马数字等列表

🥳图标库&插画类插件

  1. Iconify Material Icons, FontAwesome, Jam Icons, EmojiOne, Twitter Emoji 图标库(已经很全了) ❤️
  2. Feather Icons 图标库
  3. Material Design Icons 图标库
  4. Humaaans for Figma Humaaans 免费插画库

💠布局&网格类型

  1. Dot Grid 网格工具 (figma 按理说原生就有的)❤️
  2. Mansory Grid Layout Organizer 快速组织网格图层,整理 (Feed流) 图片方便
  3. Spacing Manager 实现 Auto layout 不通间距 Spacings 控件
  4. Ratio 快速调整元素比例 (做图片比例设计时很方便)🌟

🎈Color 插件

  1. Match fills to local styles 匹配近似样式填充到本地样式(举例:本地里有正红色,选择粉红色图层运行插件就会填充为本地样式里的正红色)
  2. Color Kit 生成一组指定颜色的深浅色阶
  3. CoolHue - Gradient Color Palette 渐变色板
  4. Color import 用代码色值轻松导入多种颜色

📤导出图片插件

  1. Android Resources Export 以安卓文件夹结构快速输出 点9图 / PNG
  2. PWA Icon App Exports 快速导出不同尺寸的 PWA 应用图标
  3. icns/ico Generator 导出 icns&ico 格式的图片
  4. TinyImage Compressor 导出时压缩 JPG, PNG, SVG, WebP, GIF, PDF 使用教程 ❤️

🛵快捷插件

  1. Copy waste more 复制样式粘贴宽、高、位置、大小、图层名字其中某一项属性 🌟
  2. Viewports “桌面端”或”移动端“显示尺寸的市场份额 ❤️
  3. Clean Document 自动组织和清理您的 Figma 文档 -删除隐藏层-取消单层分组-智能排序-智能重命名图层-页面排序
  4. Time Machine 自动备份当前选中的画板(frame)到新的 page
  5. QR Code Generator “QR码生成器” 帮助您快速创建矢量QR码
  6. Todo 协作类型的插件,可以编辑同步 To do list 用不用看习惯吧
  7. Responsify ⚡️生成所选 frame 的各个屏幕尺寸大小的效果以便快速测试各个屏幕大小下设计是否合理
  8. Component Page 自动添加单独的页面存放 Component 类似 sketch 的symbol 逻辑
  9. Status Annotations 进度标签,含有设计-审核-通过-开发-完成-存档
  10. figma-icon-automation 它可以帮助您将图标的SVG代码转换为React组件代码并发布到NPM (找开发协助一起协同搞很方便)

部分插件参考 @tovi & Figma 群内分享

鸣谢

figmacn 有许多视频教程和知识点值得学习

@tovi** 我建立插件文档之初的参考作者

juuun Juuust Handoff 设计交付插件开发者

最后更新时间 2020年4月18日 11:16 AM

Follow instagarm dribbble twitter