如何提高我们在网站设计、UI设计中的工作效率？

好的工具和技巧设计师而言无疑是非常重要的，提升我们在网站设计、UI设计的工作效率。提升效率既有技巧，也可以借助工具，我们先来看一波素质不错的效率工具和技巧：

在 UI/UX 设计领域，很多工作已经不用真的从0开始做了。用好插件，往往能让设计工作事半功倍。在 Figma 和 Sketch 这样的设计工具当中，插件赋予了设计更多的可能性，更快的执行效率，更快捷的流程，以及更完善的体系。这次，我们梳理一波 Figma 当中超级好用、提升效率的 10 个插件：

1，Renameit

这是一款传奇级别的插件，使用过 Sketch 的同学可能会知道它。在 Figma 当中它同样好用，最重要的是，它能够根据规则快速将所有的组件进行规范化的命名，且不会影响文本图层的内容，并且特别的快。

2，Styler

如果你在进行新的设计项目的时候，不打算使用现成的 UI 工具包，那么就意味着你需要为自己的设计系统构建秩序良好的样式、命名规则，而 Styler 这个工具可以帮你搞定这部分体力活儿！

3，Component Cloner

很多同学在使用 Figma 设计 UI 的过程中，会发现 Figma 的缺点之一，是没有快速克隆组件的功能，而这个名为 Component Cloner 的插件可以帮你搞定这件事情。

4，Component Replacer

构建复杂的组件的时候，经常需要使用各种 UI 元素来替换它们，有了这个组件替换器，可以帮你更快完成这个过程。

5，Stark

UI 组件的可访问性是一个重要的指标，Stark 是做 UI 可访问性优化和规范化的著名解决方案，如今它也有 Figma 版本，可以帮你确保 UI 的合理性和可访问性。

6，Palette

如果你需要从零开始制定配色方案，有很多配色工具可以帮到你，但是最好用的，始终是 Palette 。

7，Find and Replace

在复杂的设计系统当中，针对图层进行命名和修改是一个麻烦事儿，Find and Replace 可以帮你快速修改图层和相关的内容，非常好用。

8，Iconify

这是一个包含大量图标和表情符的插件服务，其中的素材大都是可供编辑的格式，比如 SVG，可以直接复制相关代码应用到项目当中。

9，Wireframe

这是一个快速绘制线框图的工具，它帮设计师更快完成线框图的绘制和调整，其中包含大量基础的组件与模块能够让设计师专注于更重要的事情，而不是重复基础的工作。

10，Figmotion

Figmotion 是一个超强的动画效果设计工具，能够让设计师在 Figma 当中创造更加顺滑舒适的动效，它的运作机制类似于 AE。对于开发者而言，Figmotion 更容易管理。虽然上手可能没那么快，毕竟做动画还是稍微有点复杂的，但是总体上依然好用且便捷，特别出效果。

提高设计工作效率可以分拆为很多个部分来攻克，例如沟通对接，设计流程，思考创作，技能熟练度等等，但是我们最简单且最容易出效果的是大部分人都经常会忽略的日常资料素材整理，往往是这些不起眼的细节才是每天浪费你大量时间的地方，如果可以将这些浪费的时间利用起来的话，工作效率能提升 30%-35%：