Figma基于浏览器的 UI 设计工具:Figma入门

yyn查看全部>> 07-04

人气 97

亲们该页面内会员们分享的“作品”,版权为才华横溢的原作者们所有滴,不得商业使用!

Figma 是一个完全免费的在线 UI 界面设计软件,支持 Windows 和 macOS 等多个平台。根据 UXTOOLS 的数据,Figma 已经是目前使用排名前五的设计工具了。与 Sketch 等传统工具不同的是,Figma 是第一款真正支持协作的 UI 设计软件,可以让整个团队的成员同时查看并修改协作的项目。

每个人都会有设计的欲望,无论是设计一个网页还是设计一个 App,都希望自己能创造出一款有风格的作品。但是面对市面上的诸多设计软件,哪一款才更适合新手呢?

俗话说「工欲善其事必先利其器」,想要简单入门 UI 设计,试试 Figma 吧。

设计一个全新的少数派网站首页

如果你之前接触过类似的 UI 设计软件,你可能会发现 Figma 这个界面的操作逻辑有点类似于 Sketch,为了方便你的快速入门,官方在右下角的帮助按钮放置了一堆东西,能够帮助我们方便查找 Figma 自带的各类教程,快捷键等。

此时我们按下键盘上的 A ,呼出快捷键功能,创建一个画板,然后在右侧选择你喜欢的产品类型便能够得到一个对应的 UI 大小的网格。因为现在我们是要 redesign 少数派的首页,所以我们选「MacBook Pro」。

但是你也发现了,空白的界面并不适合设计,我们需要一些网格来帮我们辅助定位和分配空间。点击右边的加号,能够看到 LAYOUT GRID 下面的 Grid (10px) 会帮我们自动生成一个铺满当前白色页面的网格。

你也可以点击 Grid (10px) 进行详细的进一步设置(此处我选择默认的设置)。

我们现在来观察一下少数派的首页,大致由顶栏、导航栏、展示栏、文章、侧边栏等组成。

已用不同颜色的矩形来区分不同的区域

以上文字转载自 https://sspai.com/post/47249

标签
相关作品
Figma基于浏览器的 UI 设计工具:Figma入门:等您坐沙发呢!



会员登陆还没有账号 立即注册

用户登录

忘记密码 ?

用第三方帐号直接登录

微博账号登陆 QQ账号登陆