Matrix 精选

Matrix 是少数派的写作社区,我们主张分享真实的产品体验,有实用价值的经验与思考。我们会不定期挑选 Matrix 最优质的文章,展示来自用户的最真实的体验和观点。

文章代表作者个人观点,少数派仅对标题和排版略作修改。


我一直都很喜欢设计工具 Figma 的愿景:Make design accessible to everyone。一直以来设计都是一件「看起来很专业」的事,这一点从设计师们使用的工具就可以看出来。就拿 Photoshop 来说,复杂的操控界面和对设备较高的性能要求都会让大多数人望而生畏,可现实中,除了设计师以外很多人也偶尔需要去做一些简单的设计。

Figma 降低了大多数人走入设计的门槛,你不需要多好的设备,只要电脑安装了浏览器,注册个账号就可以去设计。它的界面也足够简洁,并且操作都十分符合直觉,即使新手也能很快学会基础操作。

Figma 界面
Figma 界面

不过,软件的操作只是设计最基楚的部分,对于非设计师来说,最难的是审美意识的提高。在 Figma 的网站上有一个设计通识课,如果你不是一个设计师,它可以帮你了解一些设计的常识,比如色彩、排版。

Learn Design Pilot
Learn Design Pilot

有了基本的设计通识,提升设计技能最好的办法是从其他设计师那里学习,而我今天要介绍的 Figma 社区,就是这样一个地方。

社区简介

Figma 社区从去年十月份开始内测,简单来说,就是设计师可以将自己的 Figma 文件直接发布到社区,发布的源文件采用 CC BY 4.0 协议,其他设计师可以基于此自由创作,甚至商业使用,只要你对作品按照作者要求的方式进行署名。它有点像 Dribbble 这种展示设计作品的网站,不同之处在于你每次发布的是设计的源文件。

Figma Community
Figma Community

曾投资过 Figma 的 A16Z 评价 Figma 社区将 GitHub 的开源文化带到设计师群体中。来自全球的设计师或公司都在社区分享自己的设计,甚至包括 微软SalesforceSpotifySlack 这些知名公司。Figma 之于设计师,就像 GitHub 之于工程师,我们不需要重复造轮子,可以直接使用别人分享的设计来做自己的项目,或者从中学习别人的一些设计技巧和习惯。当我们站在巨人的肩膀上的时候,设计这件事就变得更加触手可及了。

Microsoft@Figma
Microsoft@Figma

社区使用指南

在社区探索

在浏览器直接输入 https://www.figma.com/community 就可以访问 Figma 社区了,如果你用的是客户端,点击左侧边栏的 Community 即可进入。

Figma 社区入口
Figma 社区入口

从下图可以看到,Figma 的的社区中主要有文件、插件和创作者三类。你可以自由探索,喜欢哪个就点进去查看详情。在封面上显示 Fig pick 的是 Figma 官方标记的,一般质量比较高。

Figma 社区
Figma 社区

在封面上显示一个播放图标的是可交互原型,进去后可以直接体验。比如下图,是一个很厉害的设计师用 Figma 做的一个游戏,点击去就可以玩,你可以去这里体验。

一个小游戏
一个小游戏

登录后,你还可以喜欢和复制社区的文件。在文件详情内,点击右上角的红心就可以喜欢这个文件,不过在此之前你需要设置一个 handle。它就相当于是你的个人 ID,比如你填写的是 zhangsan,那么你就会拥有一个地址为 https://figma.com/@zhangsan 的个人主页。

设置 handle
设置 handle

设置完成后,依次点击左上角头像 -> Public,就可以看到自己的个人主页。在这里,你可以给自己设置封面、个人网站等信息。

个人主页
个人主页

在主页封面下方,有 Resources 和 Likes 两个选项卡,点击 Likes 就可以看到自己在社区点过红心的文件。

我喜欢的
我喜欢的

如果在文件详情页点击了 Duplicate,那么这个文件就会被复制一份到你的 Drafts,你就可以看到源文件并继续编辑了。

复制文件
复制文件

在社区中,你还可以点击别人头像进入他们的主页,在这里你可以点击 Follow 按钮关注他们,也可以看他们的作品。

超能铜草帽的主页
超能铜草帽的主页

分享文件到社区

除了在社区发现别人的好设计,你也可以把自己的作品分享到 Figma 社区。但是想发布文件的话,也需要前往个人设置页面设置一个 handle。如果你还没按前文设置过,也可以按照下图中的顺序去填写。

设置 Handle
设置 Handle

填完之后,进入一个文件中,点击右上角蓝色的 Share 按钮。在弹出的对话框顶部有两个选项——Invite 和 Publish to Community,点击第二个 Publish to Community 就是发布到社区。

发布到社区
发布到社区

点击蓝色的 Publish 按钮,就会进入发布到社区的表单。填写名称、描述、标签等内容之后,就可以发布到社区了。

发布到社区表单
发布到社区表单

上面的表单向下滚动,你还可以设置是分享文件,还是分享原型。分享文件,就是分享你在画布中设计的东西;而原型,是在画布中通过连线做出的可交互效果,使用方式可以参考这篇文章。当然,除了分享文件和原型,如果你会写插件那么发布的插件也会自动被分享到社区,显示在主页。

分享设置
分享设置

让你的分享更受欢迎

分享到社区很简单,但是我还有一些小技巧想分享给你,可以让你的分享更受欢迎。

首先,我们给文件设置一个漂亮封面。如果你不设置封面,你的文件在社区中就像下面这个红框框圈出来的一样,默认显示设计缩略图,一眼看不出是什么。好看的封面可以让别人一眼知道你的文件是什么,还可以吸引更多人查看。

封面的重要性
封面的重要性

文件封面需要在文件中设置。先在文件的某个 Page 中设计好封面,然后在上面右击,选择菜单中的 Set as thumbnail 就可以了。官方推荐封面尺寸设置为 1920*960,其中安全区域为 1600*960。

设置封面
设置封面

除此之外,你还可以在文件内写好说明,告诉观看者该如何浏览或使用这个文件。比如 VSCode 的设计师在他分享的文件中写了一个 README。

一起维护社区

一个好的社区就像一个友好的小镇,小镇的居民都遵守规则,爱护环境,彬彬有礼。Figma 社区目前仍处于 beta 阶段,很多地方还不够完善,需要靠我们一起维护它。所以,作为社区的一员,希望大家能分享自己原创的作品,而不是从别处「拿来的作品」;也要有一定的仪式感,认真打磨完成之后再发布;最好也不要一鼓作气发布十几个作品刷屏。

希望我们能一起让这个社区变得更美。

社区 Remix

Figma 社区还有一个隐藏的功能——Remix,也就是你可以在别人文件的基础上继续创作,通过作品和作者互动。当别人分享了一个文件到社区之后,你可以复制他文件并继续创作,再次发布到社区,那么你的文件就是对源文件的一次 Remix。Figma 会自动追踪源文件,在源文件页面中显示 Remix 的文件,也会在你的页面显示源文件链接。

如下图,这是 Figma 上次发布新功能时附带分享的一个教程文件,很多不同国家的人复制该文件将其翻译为本国语言再次发布到社区,就完成了一次 Remix。

Figma 社区的 Remix
Figma 社区的 Remix

推荐一些社区主页

最后,推荐一些优秀的社区主页,希望大家可以从这里发现宝藏。

Figma

首先当然是 Figma 自己的主页,这里除了能看到 Figma 一些新特性教程,还可以看到他们用 Figma 做的一些除设计以外有趣的事情。

社区主页:https://figma.com/@figma

Figma
Figma

微软

微软最近几年在开源方面做得越来越好,他们在社区主页分享了几乎所有的设计系统、图标库,还有很多实用的插件。

社区主页:https://figma.com/@microsoft

微软
微软

Spotify

Spotify 的设计风格一直很有自己的特色,他们分享的不多,但是那份声破天式 Figma 工作指南值得一看。

社区主页:https://figma.com/@spotify

Spotify
Spotify

Rasmus

Figma 曾经的设计大佬,技能树很广。Figma 页面中的字体 Inter 是他设计的,并且他写的设计文档像艺术品一样

社区主页:https://figma.com/@rsms

Rasmus
Rasmus

Joey Banks

也是之前 Figma 的设计师,特别喜欢分享,目前最好的 iOS 和 MacOS 组件库应该就是他做的这一套。

社区主页:https://figma.com/@joey

Joey Banks
Joey Banks

Tovi

Tovi 是一个喜欢钻研的设计师,用 Figma 做了很多有意思的东西,比如随机抽签,迷你小站等。

社区主页:https://figma.com/@tovi

Tovi
Tovi

Jay Lee

国内把 Figma 研究得最透彻的人,经常能发现一些神技巧,可能 Figma 官方都没想到还能这样用。

社区主页:https://figma.com/@jaylee

Jay Lee
Jay Lee

sMao

这位大家应该很熟悉了,B 站的超能铜草帽,录制了很多 Figma 教程。他可能是第一个在 Figma 里面下象棋的人。

社区主页:https://figma.com/@sMao

sMao
sMao

Odiceno

另一位比较喜欢钻研的设计师,善于用 Figma 做出复杂而精美的图形,另外他还做了一个用 Figma 设计印刷物的小贴士。

社区主页:https://figma.com/@OD

Odiceno
Odiceno

Hal Lee

最后,推荐一下我自己的,那个贴纸和纸模比较有意思。

社区主页:https://figma.com/@leadream

Hal Lee
Hal Lee

> 下载少数派 客户端、关注 少数派公众号,找到数字时代更好的生活方式 🎊

> 特惠、好用的硬件产品,尽在 少数派sspai官方店铺 🛒