恭喜你成为UI中国推荐设计师 (详情)

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

Sketch颠覆者!静电Figma完全学习日记-Day.01

原创文章 分类: 教程 版权:
493 1 2 1
2019-12-10
2.4

鉴于大家对Figma的热情,从今天开始,静Design公众号开始不定期连载我的Figma学习日记。

静电说:鉴于大家对Figma的热情,从今天开始,静Design公众号开始不定期连载我的Figma学习日记。作为Sketch的强有力竞争者,Figma最近出现的概率真的很高,其中主要原因,第一肯定是Sketch的不给力,第二,那必须是Figma真的很好用,最重要的是很流畅咯,而且对于个人用户来说,不用花一分钱就可以用起来,真的是设计师的心头好哦。


那么,大家跟着静电,一起学起来吧!



Day.01-学习目录


01-1. Figma是什么

01-2. Figma VS Sketch

01-3. 认识 Figma的界面



01-1.Figma是什么?


首先给Figma下个定义。Figma是一款基于Web的UI设计工具,当然,它也有客户端,至于客户端是不是套壳应用,还真不好说。Figma同样是基于画板(在Figma中叫Frame)的设计方式,设计师可以在这个工具中完成常用的UI设计工作。除此之外,由于是在线web形式,那么协作功能更是不在话下了,分享也更加方便。



简单了解下Figma的特性:


更快速,更强大,更流畅-Figma无需安装,打开网页即可使用。而且,本地工具该有的功能它都有,比如钢笔,矢量路径绘制,样式,文本编辑。


轻松制作交互原型:在线连连看,功能更强大。



多人协作功能:我们可以在设计稿上加备注,也可以多人协同完成设计稿。一切都很轻松。



方便的组件系统,一次创建,可以无限次复用。




01-2.Figma VS Sketch?


我真的不太想去对比这些工具,之前在Sketch出来的时候,我们信心满满的说,Sketch秒杀PS,但现在PS依然活得很好很好,谁也没代替谁。那么Figma和Sketch到底应该对比点啥呢?



Sketch问题到底在哪?


Sketch在过去几年里一直是以网红软件的身份被大家推崇,什么秒杀Photoshop之类的话,静电当时也说过,现在想想觉得好幼稚呀。毕竟当时Sketch顺应了移动UI设计的趋势,跑到了风口,加上效率高,更符合快速开发的需求,一发不可收拾的成了网红。


于是乎,Sketch在这几年时间里,飘了。无关痛痒的小改动,换引擎,都没有掩盖Sketch开发团队核心实力薄弱的问题,随着用户量越来越大,产品应用环境越来越复杂,各种卡顿现象,各种bug层出不穷。尤其是卡顿现象,在长达一两年的时间里都没有得到根本性的改善。想一想啊,一个软件连最最核心的好用,这个前提都做不到,那用户流逝就无可避免了。


Sketch只想说这么多,他的最大问题就是自身产品质量问题,优化问题,无他。



Figma的优势在哪里?


Figma大概是在去年开始出现在大家的视野里的。顺应了现在的云应用趋势,Figma也是如此。云应用其实大家担忧的问题,第一是好不好用的问题。大部分的云应用,受限于浏览器的支持,因此很难做到像真实应用一样的效果。但是对于Figma来说,当我第一次用的时候,wow!它居然出乎意料的很好用的样子。你可以在里边建立画板,流畅的用钢笔画图,另外可以把Sketch设计稿无缝导入,等等等等。简直跟本地应用一模一样。我觉得,这也许是Figma有资格挑战Sketch的最大也是最重要一点了。当然,还有一点不能不提,就是Figma的底层优化据说非常到位,这就导致操作的时候如丝般顺滑,想想都有点小激动啊,哈哈。


另外,Figma可以说是一个云应用和本地应用的混合体,它可以单独输出扩展名是.Fig的文件,方便你放到本地保存,让你更安心,而且也可以轻松将Sketch导入到Figma中,从这个方面就俘获了不少Sketch使用者的心。


那么接下来,咱们就通过连载文章,一起学习下Figma吧!



01-3.认识Figma的操作界面


要使用Figma,你有两种方式,一种是直接访问www.figma.com,点击右上角的Sign up注册一个账号。另一种是下载应用。但是不管哪种方式,你都需要有一个Figma账号。



登录后,我们就可以看到Figma的欢迎页面。页面中部是Figma预置的体验文件,你可以点击进去直接开始Figma的体验,当然这里也会保存你最近工作的文档。右侧的菜单分别是“Search(搜索)”,“Recent(最近)”,“Plugin(插件)”,“Draft(草稿)”。再往下是项目,也就是说通过这个项目,你可以邀请其它人一起加入来完成同一个工作。



插件选项中有非常多的插件,足以满足我们日常工作的需求,关于如何使用插件,以及常用插件推荐,咱们随后讲解。



接下来我们可以点击右上角的New File,开始我们的第一个Figma文件设计。当然你也可以选择打开Figma的intro文件,查看帮助。



好了,以上就是Figma的工作界面了。默认情况下,中间的工作区域是灰色的,我们可以自行修改其颜色。


先从左上边看起,Figma的工具栏非常简洁,只有为数不多的icon。从左到右分别是:菜单栏,选择箭头,画板(Frame),图形工具,钢笔(矢量工具),文本工具,注释工具。



Figma的菜单设计比较简洁,一类的内容就归到下拉列表中。



整个工作区域左侧则为图层列表和组件列表(包含Page列表)。



右侧为属性检查器。这个和Sketch操作类似,我们选择某个图层后,右侧就会对应出现不同的图层属性,方便我们调整。右侧上方区域为一些附加操作,分别是:你的账号,分享按钮,还有预览按钮以及画布缩放数值。



那么,Figma的界面,咱们就讲完了,是不是很简单。在后续的学习笔记中,静电将跟随大家一起来了解Figma的其它功能和操作。请记得关注我们的公众号:静Design 

Powered by Froala Editor

hixulei

微信公号: jingdesign91,欢迎关注.

6737粉丝/13关注

“劳模勋章”之锄头勋章人气明星活雷锋老马识途首页达人
图形工具解析-静电的Figma完全学习日记-Day.03Sketch颠覆者!静电Figma完全学习日记-Day.02
0
hixulei

想加入figma学习交流区的请加我微信:hixulei,不定期的干货直播课分享。

精彩!

hixulei

hixulei

微信公号: jingdesign91,欢迎关注.

“劳模勋章”之锄头勋章人气明星活雷锋老马识途首页达人

您确认要推荐?

评分

完整度

启发性

勤奋性

排版布局

推荐心得

建议20-200字以内

0/200

扫描二维码
去手机端查看海报

hixulei

TA已经获得12枚勋章啦

  • 成就勋章

    • 特别勋章

    • 身份勋章

  • 已拥有

  • 作品

    创造者才是真正的享受者。

  • 经验

    经验是一所好学校,可它的学生却经常旷课。

  • 活跃

    大神都是从围观群众开始的

  • 拓展

    作品、经验、活跃还不能满足你?

每人每天仅限5票,快给你心仪的作品鼓励的一票。

投票

账号或密码错误,请重新输入

账号或密码错误,请重新输入

登录

账号或密码错误

发送验证码 120s 验证码错误

登录

京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by 2008-2020 UI.CN