Figma 是一个 基于浏览器 的协作式 UI 设计工具,从推出至今越来越受到 UI 设计师的青睐,也有很多的设计团队投入了Figma 的怀抱,接下来我会带大家深入了解 Figma,以及我们为什么要使用 Figma。 Show 基于浏览器有什么好处呢
但我觉得文件存在本地更安全
那它有 Sketch 快么我们知道基于原生 OS 开发的应用自然能更好的利用硬件资源,但 Figma 在 速度上完胜 Sketch,即使在处理大文件时也是如此。 Figma VS Sketchhttps://www.zhihu.com/video/1124805162849660928Figma 有插件么,Sketch 上我依赖很多插件完成工作Figma 原生支持 很多 Sketch 需要插件甚至依靠其它应用才能完成的功能,当然,Figma 也 支持插件开发。 通过 Figma API 也可以与第三方工具集成:
哇,那它都有些什么功能Figma = Sketch(UI 设计)+ InVision(原型设计) + Zeplin(标注)+ Dropbox(云端同步)+ Abstract(版本历史)+ Craft-Freehand(实时讨论) + Liveshare(实时分享)+ Team Library (团队组件库)+ Web API(第三方接入)+ … 下面我们来一起了解下 Figma 的一些功能和特性 - UI 设计 Figma 是为 UI 设计而生的设计工具,除了有和 Sketch 一样基本的操作和功能,还有许多专为 UI 设计而生的强大功能。 - 原型设计 你可以在 Figma 里面无缝完成从设计到原型演示的切换,不需要反复同步设计图到第三方平台,我们同样可以利用 Figma Mirror 在手机上预览效果。 - 前端协作 工程师可以在设计图上获取标注、并且可以导出所需任何资源(包括 CSS、iOS、Android 样式) - 实时协作 + 内置评论 在 Figma 里,设计和协作可以是同时进行的,任何人都可以在设计图的任何地方添加评论, 你可以在评论中 @其他人 或将评论标记为已解决。 - 矢量网络(Vector Network) - 团队 Library 我们可以跨项目共享和更新 Component、Style,但需要注意的是免费版不能跨文件共享 Component。 - 原生支持 Web Font & Font Icon Figma 原生支持 Google Fonts 和 Font Awesome。 Google FontsFont Awesome- 已经推出的 Web API 和即将推出的 Write API 通过 API可以快速轻松地对内部公司工作流程进行脚本改进,或将 Figma 与其他工具集成 Uber 和 GitHub 如何使用 Figma APIUber 员工通过 Figma的 API 查看反馈到电视上的实时设计文件 GitHub Octicon 在 Figma 和 Github 仓库中,未来可以通过 Write API 可以做到双向同步 - 官方示例:使用 Figma API 同步网页上的展示图片内容 啊,那上手会不会很难?
可能不算问题的问题
我知道 Figma 很厉害了,但用 Sketch 有什么问题么?
综上总结下 Figma 的优点和缺点优点
缺点
如何利用 Figma 改进我们的工作流程呢?0. 首先我们需要了解几个概念:
1. 我们可以通过实时协作更快地迭代 迭代时间可以从几天缩短到几分钟,不会再有下面的场景:
2. 我们的工作流程会更加的无缝和具有包容性 设计文件现在是一个链接,这意味着:
3. 我们从设计到代码的过渡会更快且具有一致性 在 Figma 中,我们更容易的以前端的思维方式进行设计。 首先,Figma 和 Sketch 的一个重要区别就是在 Figma 中我们使用 Frames 而不是画板,这有什么区别呢?
当我们把一个较小的 Frame 拖到另一个较大的 Frame 上时前者会自动成为后者的子元素。
我们可以使用 Frames 将屏幕划分为不同的内容区域,然后在不同的区域内嵌套组件。 与自动分组、相对定位和约束相结合,我们可以快速轻松的构建一致性且响应式的设计。
因为 Figma 中的 Frames 类似于 HTML 中的容器(div)。 工程师能够直观的看到嵌套在各自容器中的 UI 元素,这意味着他们在开发时会对布局有更好的了解。 4. 我们的设计系统将更灵活和易用 Sketch 有 Symbol,Figma 有 Component。 不同之处在于 Component 比 Symbol 更灵活,我们可以用更少的组件做更多的事情
在 Sketch 中,我们可以使用 Symbol Overrides 来编辑文本或交换嵌套 Symbols。 但是如果想要更改其他属性(字体大小,边框粗细或背景颜色等),则必须创建一个新的 Symbol。 要解决这个问题,你可以将每个属性单独做一个 Symbol 然后把他们嵌套在一起,但数量会越来越多,这对于大型项目和复杂的 UI,维护会越来越复杂和难以使用。 使用 Figma 时,我们可以访问和修改 Component 中任何层的属性,而无需将其从 Master Component 中分离。 1.创建一个 Component,然后将其复制以创建两个 Instances2.对 Master Component 的更改会立即同步到其所有 Instances3.除非更改了 Master Component 的属性,否则任何属性都将被覆盖
更方便的一点是,在 Figma 中,我们可以在较大视图的上下文中编辑 aster Component,而不必转到单独的页面进行编辑。 Tips 小技巧
在 FigmaChina 中我会不定期更新关于 Figma 和设计的分享,小伙伴们可以持续关注! 参考链接
Figma需要下载吗?Figma 是一款基于浏览器的UI 设计协作工具。 无需下载,打开浏览器使用,是它最大的特点之一。 虽然还是更推荐直接在浏览器里用Figma,但是如果确实需要下载Figma 客户端,可以直接在Figma 官网的Products > Downloads 页面下载。
Figma需要收费吗?Figma 对个人用户是免费的,如果你想与其他设计师协作,那么你可以在Figma 中创建一个团队。 团队允许你创建和共享资源,以及在文件和项目中协作。
Windows可以用figma吗?Figma软件奠定了在线设计工具的形态,产品UI设计功能非常强大,并且Figma软件基于web操作,无论是macOS、windows都可以使用这款软件,甚至只要有电脑,有浏览器,有网就能用,甚至软件都不用下载,省去了大量的内存空间。
Figma什么公司?Figma Inc.创立于2012年10月1日,总部位于美国加州旧金山,是一家多人协作界面设计工具,可使整个团队的设计过程在一个在线工具中进行。
|