恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

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

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
如何用 Figma 制作一份可交互的作品集?来看这份超全指南
33.4°
2022-11-05 原创文章 教程 举报 10261 85 52 6

本文适合正在求职或准备求职的设计师同学阅读,部分素材来源于网络,侵删。

全文共  7040 字,预计阅读时间  8 分钟


前言

众所周知,设计师求职一般都要准备一份个人简历+一份 PDF 作品集。不过在 LinkedIn 上可以发现国外的设计师求职很多都是分享自己的个人网站。

关于求职的成功率,绝大部分应该在于作品集本身的质量以及面试时设计师展现的个人技能和岗位要求之间的匹配度。

本文仅分享如何将原本投递的静态 PDF 作品集升级为通过 Figma 制作成动态可交互作品集并通过个人域名网站的投递技巧方面进行分享,属于附属加分项。

PS:在文末会分享:【Figma 简历模板】和【Figma 可交互作品集模板】~


投递作品集常见问题

设计师求职找工作的时候,投递作品集是一个必须的选项。在投递作品集的过程中,想必经常会遇到以下问题:

作品集文件太大

很多同学做作品集的时候“框框”一顿做,导出的时候却发现文件高达几十上百 M 。准备上传到招聘平台时,发现招聘平台最多仅支持 20M。 BOSS 直聘和拉勾的作品集文件大小限制都为 20 M。

于是不得不对自己的作品集进行压缩,压缩压缩,使用了各种压缩工具,最终终于将作品集压缩到了 20 M以下投递给公司,结果面试官打开一看完全模糊了,很多设计细节都看不清楚,进而对设计师的能力产生质疑,自己的作品集连最基本的清晰都做不到,又怎么放心能把产品设计得更好呢。


作品集更新迭代

当我们通过招聘平台投递自己的 PDF 之后,如果后面突然发现有一些重要的细节需要修改调整,除非再次投递,否则无法修改优化。但再次投递涉及到新旧 PDF 的文件替换,操作起来不是很便捷。并且如果是在一些公司的官网进行投递,很多时候是不允许再次投递的,也就意味着面试官只会看到你之前投递过的的作品集,如果挂了,可能就要等半年之后才允许再次投递。


作品集无法展示动效

众所周知,PDF 只能置入静态图片,没办法置入动态的 Gif 效果图,那么就很难直接通过 PDF 来展示自己的交互动效能力,可以尝试通过展示静态 AE 软件制作过程截图、静帧画面合集或者添加外部链接来展示,但总的来说并不能很直观便捷地查看到交互动效。


作品集保密风险

对于一些做 To B 或 To G 项目的同学而言,有一些项目涉及保密信息,不方便放作品集对外展示。或者有时候自己的作品集需要放一些带有保密性质的工作文档进行展示。如果是 PDF 投递的方式,PDF 很容易被复制本地化保存后带来不可控的传播,存在一定的泄密风险。


作品集查看情况

在通过 BOSS 直聘、拉勾或公司招聘官网投递了简历&作品集之后,有些时候 HR 进行第一轮筛选的时候,可能会通过学历、年龄、工作背景来筛选掉一部分人,这一部分可能是面试官压根就没有打开作品集看过的,但是作为求职者,并不能掌握自己的作品集是否真正被用人部门打开查看过的情况。如果是因为其他简历硬性条件挂了,可能再怎么优化作品集也没有办法通过常规的投递到面试官跟前。还有的时候 HR 可能为了刷 KPI 叫候选人去面试,作品集压根没有被打开过,这时我们在面试前可以提前和 HR 确认用人部门是否已经看过自己的简历和作品集,避免白跑一趟。


通过个站投递的优势

接下来分享一些通过个人网站投递作品集相对 PDF 投递而言的一些优势。

文件再大都不怕

通过个人网站投递作品集,只要有网络便能够打开,即使要展示的内容很多,也不会因为 PDF 文件太大而无法上传而导致的尴尬。并且通过链接打开的作品集都是高清的,不需要对作品集做一些过度的压缩。通过网站投递的作品集也可以做一些交互跳转,不一定需要像 PDF 一页一页往下翻页才能看全。面试官可以在任意页面跳转到其他感兴趣的页面进行查看。


随时更新迭代

作品集可以当作是设计师的一个敏捷迭代的产品,起初我们大概制作了 1.0 版本其实就可以投递一些小公司,通过面试来寻找面试官对个人和作品集的评价与反馈,再根据收集的反馈一步一步迭代到 2.0、3.0版本。在每一次更新迭代的过程中,通过链接都能够实时更新。设想一个场景,假设今天面试 A 公司,明天面试 B 公司。在今天面试 A 公司时,面试官给到了一些很有价值的反馈,这时候可以立即更新到自己的作品集当中进行迭代。明天面试官再打开你的作品集链接的时候,就已经是最新版本,面试官也能够从侧面感知到候选人对作品集的钻研精神。


展示交互动效

通过 Figma 制作作品集可以通过两种方式展示交互动效能力。一是最简单的直接直接插入 Gif 格式的动图,在预览播放时,就能直接展示动态效果。二是通过 Figma 的 Smart animate 功能直接制作交互动效,并且给以添加相应的悬停、点击等交互效果,能够更加真实的展示交互动效能力。文章后面会给大家具体介绍 Smart animate 功能的使用。


应对保密风险

当我们在求职过程中发现作品集有特殊情况时,可以随时关闭后台的链接访问。或者当我们已经成功入职新公司时,也可以随时关闭自己的作品集链接访问。可以让自 己作品集链接的可访问性随时掌控在自己手中。同时通过链接投递的作品集也能在一定程度上防止作品集被盗用,Figma 、在线文档都有相应的防复制拷贝的权限的功能。


查看记录报表

个人注册的域名可以通过第三方工具【小码短链接】添加自定义域名的形式管理自己的域名。例如我注册了一个域名叫 abc.com。通过这个工具可以自定义域名后缀同时定向跳转到自定义的链接。例如通过 访问 abc.com/123 即可定向跳转访问你分享的 Figma 链接查看作品集。所有用户通过 abc.com/123 访问都可以在 小码短链接 后台查看到访问记录,如下图所示,这样我们就能清晰的知道 HR、面试官 有没有查看你的作品集,一般都在什么时间查看你的作品集,查看你作品集的频率大概是多少以及通过什么设备访问?(侧面便可了解到公司用的是 win还是mac,哈哈)


装酷

例如你的 ID 叫 Jack,那么可以注册一个域名叫 jack.com ,更容易被大家记住,同时设计师有一个自己专属域名的个人网站,也是一件很酷的事呢~



使用工具生成作品集链接


接下来到了落地环节,教大家如何将自己的作品集通过链接投递。这里主要分享两种方式,第一种方式是进阶版通过 Figma 制作可交互动态作品集。第二种方式是比较基础的通过一些在线文档工具的 PPT 在线编辑分享,后面会给大家分享 腾讯文档、飞书文档、石墨文档、Google Drive 等用来放作品集的差异以及推荐哪一个工具。


Figma 可制作交互作品集

关于如何使用 Figma 制作可交互作品集,需要提前学习 Figma 的 Prototype 功能。可以查看我之前分享的一篇小教程:https://www.ui.cn/detail/609117.html?nopop=1

制作好静态作品集

在制作动态可交互作品集之前,首先需要制作好个人静态的作品集,这里可以按照常规 PDF 的形式去做,推荐使用 Figma 制作,尺寸推荐 1920*1080,方便浏览。


制作全局导航栏

这里分享的可交互作品集的思路是将作品集以网页的思维方式去做,最基础的是在任意页面都能够自由跳转回到首页。由于是用于面试的作品集,不做成常见的企业门户官网一样要一直往下滑,而是做成单篇 1920*1080 的尺寸,提高受众的阅读效率。

那么接下来就需要给每页作品集的顶部都添加一个固定的导航栏,以确保可以任意页面切换至其他项目或者回到首页。可能每页作品集有深色也有浅色,那么导航栏也可以做深色和亮色背景下的两个版本。


制作子项的可交互组件

Figma 的组件功能可以运用在常规的图层样式上,也可以运用在给组件赋予了交互属性的涂层上,那么我们就可以给全局导航栏的子项增加交互效果,例如可以增加悬停效果。这样我们在所有的作品集页面都可以通过鼠标悬停来引导受众这里能够点击跳转。


导航栏主组件串联项目

接下来我们可以在导航栏的主组件上选中对应的「项目一」、「项目二」、「项目三」,将其直接通过 On click 跳转至对应项目的介绍页。将「HOME」跳转至作品集的首页。通过这样一个简单的设置,我们就能实现在作品集的任意页面进行跳转。对于受众而言,假设对作品集的第三个项目比较感兴趣,下次再看的时候,就不需要一页一页翻到第三个项目,而是直接在作品集中点击项目三就能够跳转到项目三对应的页面,提高浏览效率。


运用 Smart animate 制作页面过渡

Smart animate 是 Prototype 里的一个非常实用的功能,能够通过识别图层结构和同层命名一致的情况下,自动进行位置、大小、颜色、旋转等过渡,与 Keynote 的神奇移动效果类似。通过 Smart animate 我们可以给作品集增加很多酷炫的效果,例如我们在数码产品发布会上看到的 PPT, 一定不是一页一页静态切换,通过 Smart animate 可以给作品集赋予更加有趣的灵魂。同时,通过 Smart animate 效果制作作品集的也能够侧面表现出候选人在实际工作中是具备制作高保真可交互原型的能力。

举个例子,下面是从作品集「首页」到「个人介绍页」一个简单的过渡效果,首页有「样机」图层组,我们只需要将首页的「样机」复制到「个人介绍页」,然后移动位置到画板外面,注意这里移动的时候需要按住「空格」键,就能够使图层移出了画板区域还能够保证在左侧图层结构上是属于「个人介绍页」下。然后给这两页添加一个 On click 交互事件,效果设置为 Smart animate。点击预览,就能够看到非常自然的过渡效果。这里是一个简单的例子,在具体的使用场景中还可以进行缓入缓出、时间等属性设置来满足需求。


扫描二维码动效

接下来分享扫描二维码动效的制作方式。也是运用 Smart animate 的原理,在两个二维码之间需要动态的图层都使用相同的命名和图层结构,交互事件互相都设置为 After delay ,就能够实现扫描二维码的动态效果了。具体的演示效果和文件可以在文章末尾处领取。


Figma 分享设置

最后,我们需要对 Figma 的分享进行设置,选择 Anyone with the link+can view prototypes only,这样一来就能够确保其他人在打开这个链接时,只会看到播放预览时候对页面,同时也能够防止 Figma 源文件被拷贝。


通过在线文档生成链接

接下来分享的一种方式是通过在线文档生成链接,测试了市面上常见的几款支持插入 PPT 的文档工具,包括腾讯文档、飞书文档、金山文档、石墨文档、Google Drive。(语雀由于现在不支持导入 PPT ,暂不列入)

测试的方式为通过在线文档新建 PPT 然后通过图片导入的进行插入,同时也测试了对于 Gif 动图的兼容性。测试的版本版本均为「免费版」。以下附上简单的测试总结。

最终的结论是:在使用 PPT 分享作品集的场景当中,推荐使用「腾讯文档」。


域名注册和定向转发

通过上面的方法得到了链接之后,其实直接通过 Figma 链接或者在线文档链接分享也能够实现通过链接访问作品集的效果。但是直接生成的链接是比较长的,一些招聘平台很可能会屏蔽。例如之前就测试过 BOSS 直聘的常用语当中会屏蔽 腾讯文档的分享链接。

接下来就给大家分享怎么样注册一个自己的域名,并且不需要学习前端知识自己写网页,无需高深的域名知识,就能够通过自己的域名访问事先准备好的作品集链接当中,并且通过第三方工具绑定托管域名,还能够自定义编辑域名后缀,和查看域名被访问的记录等。


阿里云注册域名(收费)

网址:https://wanwang.aliyun.com/


输入域名,选择后缀

输入想要注册的域名,可以是自己的英文名,例如这里输入 bobbyl,然后选择域名后缀。关于域名后缀的选择,大部分同学常见的应该是 .com 域名,但是我们实际注册的时候会发现很多 .com 域名已经被注册过了,或者说费用比较高。这里推荐各位设计师可以尝试注册 .design 域名,比较符合设计师的气质,并且相比 .com 域名而言,费用也低了不少。


域名解析

注册完成之后,就能在自己的域名列表里面看到刚刚注册好的域名,这里点击域名【解析】,页面暂时先不关,后面会用到。


小码短链接注册

打开网站 https://xiaomark.com/ ,根据提示注册一个账号之后。点击顶部的自定义域名-立即绑定域名。再输入刚刚在阿里云注册好的个人域名点击绑定。



最后网站会反馈一个 CNAME 记录类型,将记录值复制下来,准备粘贴到阿里云域名后台。


域名解析 CNAME 记录值

点击添加记录,选择 CNAME,然后在主机记录处粘贴刚刚在小码短链接复制的记录值即可。


创建短链

在小码短链接找到我的空间,点击创建短链,跳转链接输入已经准备好的 Figma 链接或在线文档链接,然后可以自定义后缀。这里演示一下我要跳转的链接是我个人的语雀主页:https://www.yuque.com/bobbyhe。输入短链域名的后缀是 blog,点击确认。之后我就可以通过访问 http://bobbyhe.design/blog 来打开我的语雀主页。同理,我们只需要在「跳转链接」处输入自己前面准备好的 Figma 链接。

 

Freenom 注册域名(免费)

接下来分享一个注册免费域名的方法。不花一分钱获得一个永久免费的域名,5分钟让你快速拥有一个顶级的免费域名。

首先我们进入官网:http://freenom.com,这是一个国外的域名服务商,如果不靠提供免费域名,可能很难和Godaddy,Namesilo等顶级域名服务商竞争,目前 Freenom 也提供了付费的域名,com 域名售价8.38美元/年。

输入域名

方法也很简单,首先可以注册一个账号或者使用 Google 登录,就直接在搜索框输入自己想要的域名。然后选择想要的域名后缀,再点击 「Checkout」


选择有效期

如下图,我一下子加入了一个域名到购物车里面,有效期选择了 12 个月,然后点击 「Continue」。这里注意默认的有效期限是 3 个月,需要自己手动选择 12 个月。(能多白嫖就多白嫖,哈哈)到期后也不用慌,可以再次免费续期。


0 元付款

最后进入付款页面,0 元良心价!点击「Complete Order」即可成功注册。


域名管理

然后进入「My Domains」我的域名管理,找到刚刚注册的域名,点击「Manage Domain」 


URL 转发

找到 「Management Tools」下的「URL Forwarding」,然后「URL Forwarding」处输入自己准备好的作品集链接,例如我在这里输入的是我的语雀主页链接 https://www.yuque.com/bobbyhe,在「Forward mode」处选择「Frame (cloaking) (default) 」,大概等个1~2分钟,就能通过前面注册好的 bobbyued.tk 访问自己设置的目标网站了。


其他投递技巧


使用 Figma 制作简历

上面讲了如何使用 Figma 制作可交互作品集,其实制作个人简历也完全可以使用 Figma 制作。只要熟悉 Figma 的基础操作,做一个 A4 的简历完全洒洒水。支持插入超链接并导出 PDF 。同时在这里分享下方的简历模板,有需要的同学可以在文章末尾领取哦~


将作品链接置入简历中

上面生成的 短链接可以直接置入 PDF 中,并且是链接属性,这样当我们投递一份 2 M 大小的个人简历出去,hr或面试官便能够直接通过简历中的链接直接触达到我们的作品集,不再需要一次性发两个文件了。


简历的格式及命名

我见过很多设计求职者,在给 HR 发电子版简历的时候竟然是一张 JPG 或 PNG 格式的图片,因为图片对于设计师来说更好发挥。

即便如此,我依然不建议大家用图片形式,因为在这种格式下你的个人信息是无法被复制的。

想一想如果 HR 要把你的个人信息录入到公司系统、或做人才储备时,每个字都要一个一个的敲,是种什么感觉?

所以我建议个人简历尽量保存为 Word、PDF 格式,一方面这两种格式稳定,不会出现乱码、板面错位等问题;另一方面是信息可复制。

说完格式,下面再来说说命名。这也是很多人容易出错的地方,像 “个人简历” 这样的命名是最让人头疼的,几十份简历不点进去都不知道谁是谁。

所以我建议大家简历命名格式:应聘职位 + 工作年限 + 姓名,不管是 HR 还是部门负责人看到都是一目了然,给人的感觉也很专业。


结语

本文仅从投递技巧中为大家分享,具体的求职场景中可能也需要随机应变,并不是固定的。最后希望大家看完后能够有所收获,早日找到满意的岗位,如有疑问可以评论或主页添加我的联系方式进行交流。与大家共同进步,共勉~~

我是设计师波波 Bobby He,深耕 B端体验设计,持续学习输出中,欢迎关注~


资源领取

关注公众号【波波设计室】,发送【简历模板】、【作品集模板】即可领取对应的源文件~根据各平台规则编写内容。

公众号

关注公众号【波波设计室】,发送【简历模板】、【作品集模板】即可领取对应的源文件~

简历模板 Resume Template

Figma 可交互作品集模板  Portfolio-Prototype


Powered by Froala Editor

更新:2022-11-05

收藏

85人已收藏

波波Design

B端产品体验设计师

  • 15

    作品

  • 119

    粉丝

  • 124

    关注

  • 「Notion」产品体验设计拆解|24个优秀体验细节
  • 「飞书文档」产品体验设计拆解丨22 个优秀体验细节
  • B端-标书相似度检查工具
  • 「Confluence」产品体验设计拆解|16个优秀体验细节

    猜你喜欢

      2022-11-05 原创文章 教程 举报 10261 85 52 6

      如何用 Figma 制作一份可交互的作品集?来看这份超全指南

      33.4°

      你确定要举报如何用 Figma 制作一份可交互的作品集?来看这份超全指南

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2022年07月29日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      52
      85
      6

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

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

      登录

      手机号

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

      登录
      第三方账号登录