Figma：跨平台UI设计工具设计经验

Figma是一个基于浏览器的协作式UI设计工具，Figma从推出至今越来越受到UI设计师的青睐，如今也有很多的设计团队投入了Figma的怀抱，接下来会聊聊为什么我们应该选择Figma而不是Sketch。

基于原生OS开发的软件自然能更好的使用硬件资源，但Figma在速度上完胜Sketch，即使在处理大文件时也是如此。

#但Figma有插件么，Sketch上我依赖很多插件完成工作

Figma原生支持很多Sketch需要插件甚至依靠其它应用才能完成的功能，当然，Figma也支持插件开发。

Figma是为UI设计而生的设计工具，除了有和Sketch一样基本的操作和功能，还有许多专为UI设计而生的强大功能。

你可以在Figma里面无缝完成从设计到原型演示的切换，不需要反复同步设计图到第三方平台，我们同样可以利用FigmaMirror在手机上预览效果。

工程师可以在设计图上量取位置、并且可以导出所需任何资源（包括CSS、iOS、Android样式）

同一个锚点连接多个锚点

自动填充闭合区间

直接拖动锚点间的线条

我们可以跨项目共享和更新Component、Style，需要注意的是免费版不能跨文件共享Component。

Figma原生支持Googlefonts和FontAwesome。

可以快速轻松地对内部公司工作流程进行脚本改进，或将Figma与其他工具集成

Uber员工通过Figma的API查看反馈到电视上的实时设计文件

GitHubOcticon在Figma和Github仓库中，未来可以通过WriteAPI可以做到双向同步

设计文件现在是一个链接，这意味着：

在Figma中，我们更容易的以前端的思维方式进行设计。首先，Figma使用Frames而不是画板，有什么区别呢？

把一个较小的Frame拖到另一个较大的Frame上时会自动成为它的子元素。

我们可以使用Frames将屏幕划分为不同的内容区域，然后在这些部分内嵌套组件。这种方法与自动分组，相对定位和约束相结合，可以轻松快速构建一致且响应式设计。

因为Figma中的Frames类似于HTML中的容器（div）。工程师能够看到嵌套在各自容器中的UI元素，这意味着他们在写代码时会对布局有更好的了解。

Sketch有Symbol，Figma有Component。不同之处在于Component比Symbol更灵活，我们可以用更少的组件做更多的事情

在Sketch中，我们可以使用SymbolOverrides来编辑文本或交换嵌套Symbols。但是，如果想要更改其他属性（字体大小，边框粗细或背景颜色等），则必须创建一个新的Symbol。要解决这个问题，你可以将每个属性单独做一个Symbol然后把他们嵌套在一起，但数量会越来越多，对于大型项目和复杂的UI，维护会越来越复杂和难以使用使用Figma，我们可以访问和修改component中任何层的属性，而无需将其从mastercomponent中分离。

创建一个component，然后将其复制以创建两个instances

对mastercomponent的更改会立即同步到其所有instances

除非更改了mastercomponent的属性，否则任何属性都将被覆盖。

在侧边栏的面板中浏览所有的components

Component更方便的一点是，在Figma中，可以在较大视图的上下文中编辑component，而不必转到单独的页面进行编辑。

Figma的好处是你不需要在计算机上保存任何东西。所有文件都存储在云中，并可在任何地方访问。作为Sketch或甚至是AdobeXD用户，您可能已经习惯了50GB+的设计文件夹。Figma不再是这种情况。

如此处所示，文件可以追溯到五个月，并且仍然可以立即访问。无论您需要从另一个设计中获得什么样的最小元素，您都可以在几秒钟内访问它并在当前项目中使用它。

基于浏览器的UI可实现无缝协作，该工具迅速成为该领域类似解决方案的臭名昭着的竞争对手。来自Twitter，微软，GitHub和Dropbox等品牌的设计师发誓Figma作为终极UI设计工具。那么，Figma是否也是你的终极UI设计工具？

软件使用、安装、下载等任何问题，欢迎加入「素材集市」设计交流群，一起探讨学习。