Figma自编教程第四篇(也是做产品实习生的第好多天)

418 阅读4分钟

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第1天,点击查看活动详情


上一次的自编教程第三篇还是在上一个星期写的,因为最近由于工作原因,以及参加了字节第四届青训营大数据方向,所以这一边没怎么进行梳理,其实我的学习一直都还在继续,在这三篇教程当中: Figma自编教程第一篇(也是做产品实习生的第一天) - 掘金 (juejin.cn)Figma自编教程第二篇(也是做产品实习生的第二天) - 掘金 (juejin.cn)Figma自编教程第三篇(也是做产品实习生的第三天) - 掘金 (juejin.cn)
其实Figma主要的内容都已经讲解完毕,那么今天就教教大家Figma当中的导入功能和如何通过Figma来进行团队间的合作吧

将文件导入Figma

能够导入的文件类型

Figma当中能够导入的文件类型其实还蛮多种的,其中包括Sketch、Figma的设计文件,以及图片和矢量图形。Sketch也是一款能够进行设计网页、图标、以及界面设计的软件,与Figma类似。至于图片和矢量图形,大家都比较了解,我这边就不再赘述了。

导入文件过程

首先大家打开首页,这次我记得打码了,上次同学看到了我的文章之后,提醒了我这一点,的确还是要好好保护自己的隐私呀(笑)。 image.png 大家可以看到,有两个位置都可以import File,分别是这两张图片里面,被我用绿色笔🖊圈起来的地方。

image.png image.png 虽然这两个import File入口看起来不同,但是点开之后,其实导入操作的页面,是一样的 image.png 之后在文件夹当中,选择自己想要导入的文件就ok。 刚写完这一块,又来活了,那我直接就是一个导入,给大家演示 image.png

拖放导入

除了上面的那种导入方式,其实你还可以通过将文件从计算机上的文件夹或桌面拖拽到 Figma 中的方式导入文件。

  • 你可以将 .fig,.sketch,PNG,JPG 或 GIF格式的文件导入到文件夹。
  • 你可以将 SVG,PNG,JPG 或 GIF 格式的文件添加到画布。
  1. 选择要导入的文件。
  2. 将文件拖到 Figma 上。 Figma 中将出现一个蓝色框,表示你的文件已准备好导入。
  3. 释放鼠标以开始导入过程。根据文件大小,这可能需要几秒钟。
  4. 完成后,单击“完成”返回文件管理面板。

上面给大家介绍了文件的导入Figma的步骤。其实Figma团队还允许你与团队中的其他成员一起创建和共享资源,以及协作处理文件和项目,有时画UI时,大家需要对于整个项目的UI界面风格保持一个统一,这也是设计原则之一,如果你每次为了让大家看风格和提意见,都对自己的设计进行导出为文件,然后需要团队的人,将文件导入到自己电脑的Figma当中,团队中的人给你更改完之后,又需要导出,给你发过去,你再导入,然后继续编辑,这样也太麻烦了吧。所以这也就是我们需要进行团队的原因,有了团队,大家就可以实时编辑,然后直接交流,减少其他过程消耗的时间,加快产品原型设计速度。

创建团队

1、打开首页,左下角有Teams 2、然后其中有一个create new team

image.png 3、点击按钮,然后就可以创建团队了
其中包含给团队命名,加上团队成员,完成团队创建

image.png 创建团队后,你将进入团队页面。这里有该团队中的任何团队项目、设置和成员。
你可以通过单击工作区侧栏中的团队名称打开此页面。 image.png

邀请团队成员:

  1. 在 Team Members 部分中,单击  + Invite a Team Member 链接
  2. 输入团队成员的邮箱地址
  3. 确认他们的访问权限,你可以选择 AdminCan Edit 或 Can View (这个编辑权限的问题,真的很重要,就像今天我给我们团队的分享下午需要绘制的原型,然后就出现了他们打开文档之后不能编辑的问题,不过这也是存在一定的延迟,就像我给他们明明开个权限,但是依旧出现这个问题,其实这个时候也可以看看是不是单个文件的问题,单个文件也可以进行权限的设置,这些需要大家慢慢探索确认)
  4. 单击 Invite 以生成邮件邀请。

大概就这样吧,后面可能关于这类原理的会不怎么讲了,因为基本上原理部分都已经解释清楚了,应该后面的重点会放在如何对于一些个性化界面的实现上,比如玻璃特效啥的。希望大家都能越变越强!一同进步,冲冲冲!!!