今日第2次更新产品相关,今日不出意外,应该能够把这次figma自编教程更新完结,昨日咱们的Figma教程讲到了东西栏,其中还包括了关于图片与形状变化的一些介绍,有爱好的宝物能够看看昨日的内容:Figma自编教程第一篇(也是做产品实习生的第一天) – (),今日就来讲讲后面的这五个吧!

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

绘画东西(Drawing tools)

绘画东西是咱们在运用Figma时经常会用到的一个东西,其中包括钢笔东西和铅笔东西,其实作用差别还蛮大。

Figma自编教程第二篇(也是做产品实习生的第二天)
我在这边将两个东西都点开,并在这边进行了制作,咱们应该很明显的能够看出哪个是钢笔,哪个是铅笔吧。
咱们先猜一下,然后,我立刻发布答案!!!
Figma自编教程第二篇(也是做产品实习生的第二天)
答案便是下图!上面那个我随意画的圈圈,是用铅笔东西制作的,周围的那个奇奇怪怪的形状,是用钢笔画的。 这个是怎样画的呢?
Figma自编教程第二篇(也是做产品实习生的第二天)
其实详细在画时,有许多的点需求进行留意,这样才能够成功画出自己想要的款式
咱们首要以钢笔东西为例,对其进行解说
咱们在点击钢笔东西之后,会出现一个小圆点,这便是咱们确认的一端端点,这个端点方位呢,咱们能够自己点击确认,这个部分没什么大问题
Figma自编教程第二篇(也是做产品实习生的第二天)
然后在确认端点之后,咱们再次点击,这个时分,他的端点变为正方形,
Figma自编教程第二篇(也是做产品实习生的第二天)
Figma自编教程第二篇(也是做产品实习生的第二天)
制作完结后,记得点击“done”按键
Figma自编教程第二篇(也是做产品实习生的第二天)
这边也能够进行弧度的调控
这边感觉官方文档写的很清楚,所以我搬过来这一段,链接在此钢笔运用 | FigmaChina
大多数钢笔东西在具有方向的循环中制作途径,总是期望从头连接到其原始点。矢量网络没有方向,能够在不同的方向上分叉,而不需求创立单独的途径目标,会比运用传统矢量途径东西制作的更快。

创立

你能够运用钢笔东西或任何形状东西来创立新的矢量图层。

运用形状东西时,能够按住修饰键以特定方式制作它们:

  • 假如在创立形状时按住Shift,它会将形状的纵横比锁定为 1:1。
  • 假如在创立形状时按住,则会相关于其中心而不是左上角创立形状。
  • 假如在创立形状时按住 空格键,则会移动整个形状而不是单个点。

修改

假如挑选途径并按 ENTER 键,则会进入矢量修改形式,你能够在其中挑选,调整或更改各个点,线条或整个形状的特点。你还能够运用东西栏中的Edit Object按钮输入矢量修改形式。

要退出只需再次按 ENTER 或在东西栏中按DONE即可。

修改目标时,能够与现有点以及它们之间的线进行交互,你还能够运用钢笔东西制作其他点并对其进行操作。

点之间的途径能够是直线,也能够运用弯曲东西以激活贝塞尔曲线。

贝塞尔曲线

要运用点的贝塞尔手柄,请进入修改形式。

  1. 假如是曲线,则手柄会显现出来。
  2. 假如没有手柄,请按住并单击该点。

圆角

途径上的任何中间点都能够经过 Inspector 中的 Corner Radius 特点调整圆角特点。 假如挑选整个途径,它会调整一切角的圆角特点。假如进入修改形式,则能够挑选单个点并分别对其进行调整。

敞开途径上的终端点只能经过End Caps调整圆角。

端点 End Caps

端点使你能够在未闭合途径上为终端点增加款式。前三个也适用线条的末端

  • 无(默许):端点是途径的末端。
  • 正方形:端点是正方形。
  • 圆形:端点为圆角。
  • 线箭头:端点为线箭头。
  • 三角箭头:端点为等边三角形箭头。

铅笔东西

这个感觉没什么特别需求进行解说的地方,用法较为简略,就直接画就行了

文本东西(Text)

文本东西这一块内容属所以那种,看起来简简略单,可是它是咱们每天都在用到的重要东西

Figma自编教程第二篇(也是做产品实习生的第二天)
咱们就来举个实际操作的例子吧,咱们以我的qq界面来举例,咱们能够看到,上面有许多种文字,这些,其实咱们都能够进行完结,

Figma自编教程第二篇(也是做产品实习生的第二天)
现在咱们就来一步步的完结字体,不过,我这次页面的完结,其实首要仍是面向我qq页面当中的字体方面,其他这次就不怎样规划了,能够下次我再来规划一下完整的页面

聊天界面大概完结

首要,咱们要面临的是,页面巨细的问题,咱们能够经过点击原图,上面会显现页面巨细的信息

Figma自编教程第二篇(也是做产品实习生的第二天)
咱们能够看到,左边的页面显现为,其巨细是384*888,那咱们就在周围的巨细,进行更改,现在巨细便是相同的了
Figma自编教程第二篇(也是做产品实习生的第二天)
之后咱们关于需求仿照的界面进行分析 它大致分为以下几个部分

  • 绘画列表
  • 功用列表
  • 插件列表
  • 还有自己的头像,气候
    这边的话,啊啊啊啊啊啊啊,好想用视频来展现啊,感觉视频更快一点
    那就开端画吧
    为了减少篇幅,我这边将首要要点都放在了一同来截图,想要完结突变作用的话,咱们需求将solid调为linear,至于色彩的挑选,咱们能够直接用取色笔,然后进行取色
    Figma自编教程第二篇(也是做产品实习生的第二天)
    咱们能够看到我画的两个突变色模块,那是怎样进行区别的呢?
    Figma自编教程第二篇(也是做产品实习生的第二天)
    这时分就需求咱们用增加色彩图层了,增加一个灰色或是黑色的色彩图层,使它色彩愈加有层次感,能够上一个突变矩阵分隔

Figma自编教程第二篇(也是做产品实习生的第二天)
这边的文字能够这样完结了,和原版较为相似,思路整个是相似的,
Figma自编教程第二篇(也是做产品实习生的第二天)

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

沟通页面(Add comment)

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

Figma自编教程第二篇(也是做产品实习生的第二天)
这一块官方真的太详细了谈论 | FigmaChina
您能够在画布上的任何方位增加谈论,无论是在框架、组仍是图层上。

你能够向原型或规划文件增加谈论,检查者和修改者都能够增加和回复谈论。

  1. 谈论设置
  2. 增加谈论
  3. 修改谈论
  4. 删去谈论
  5. 检查谈论
  6. 回复谈论
  7. 处理谈论

1. 谈论设置#

要增加、检查和回复谈论,您需求进入谈论形式。

您能够经过单击东西栏中的谈论图标进入谈论形式,或许运用键盘快捷键C

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

这将翻开右侧边栏中的谈论面板:

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

您能够在此处拜访您的谈论和谈论设置。

谈论设置和告诉#

在面板的顶部,您能够确认是否要:

  • 在谈论面板中显现已处理的谈论,您能够撤销选中此设置以躲藏中已处理的谈论。

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

  • 接纳谈论的邮件告诉。这将在增加新谈论或回复谈论时向你发送电子邮件。假如您是文件一切者,则默许情况下将启用此设置。

邮件告诉

您能够基于每个文件启用或禁用电子邮件告诉,咱们仅默许为文件一切者启用此设置。 您需求在每个文件上禁用此设置以撤销告诉。

假如您在文件中被 @,即使你禁用了该文件的邮件告诉,但仍将收到邮件告诉。

Slack 告诉

您还能够设置 Slack 告诉。这答应您接纳敞开项目中的文件中任何谈论的告诉。

假如协作者在另一个项目 @ 您中,咱们将不会经过 Slack 告诉您。只要启用了 Slack 的项目才会发送提及告诉。

在Figma&Slack一文中了解更多信息。

提示

您还能够接纳来自其他用户的谈论,@ 或活动的应用内告诉。 您能够在帐户设置中启用或禁用这些功用。

在办理帐户一文中了解更多信息。

2. 增加谈论#

您能够向特定的框架、组或图层增加谈论,或许在画布上的任何方位增加谈论。

  1. 单击东西栏中的谈论图标,或按C键进入谈论形式。

  2. 您的光标现在将显现为谈论图标:

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

  3. 单击画布中您期望显现谈论的方位:

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

  4. 输入你的谈论,然后单击Post以发送:

留意

在谈论形式下,您将无法对画布中的目标进行任何更改。 您需求经过挑选东西栏中的其他东西脱离谈论形式。

提及其别人#

在团队文件中,您能够提及团队中的任何人。

在团队之外的文件中,您能够提及你知道的任何人:

  • 文件的协作者。
  • 与您在同一个团队,项目或文件中的人员。
  • 邀请您参加项目或文件的任何人。
  • 您邀请参加项目或文件的任何人。

在谈论中提及某人:

  1. 运用@键激活。

  2. 开端输入此人的名字或电子邮件地址。

  3. 单击TabEnter键以挑选,或许单击列表中的人名:

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

  4. 完结谈论,然后点击Post

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

然后经过电子邮件和应用程序内告诉(假如启用)向该人员发送告诉:

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

留意

假如您想提及的人不在列表中,则需求先经过共享对话框邀请他们拜访文件。

表情符号#

您还能够在谈论中增加表情符号,以帮助阐明您的信息。

  1. 单击谈论框中的笑脸图标:

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

  2. 然后你能够:

    • 运用搜索栏查找要增加的表情符号。

    • 从您经常运用的表情符号中挑选。

    • 阅读表情符号目录。

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

  3. 单击表情符号将其增加到您的音讯中。你会发现输入框中是代码而不是表情符号。但不要担心,当您单击Post时,将显现您的表情符号。

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

  4. 您的表情符号将与您的音讯一同包括在内:

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

3. 修改谈论#

您能够对发布的任何谈论进行更改。这关于修复拼写错误或从头定位谈论很方便。

修改谈论内容#

要修改谈论:

  1. 在画布中挑选谈论,或从谈论面板中挑选。

  2. 单击谈论框中标题周围的三点菜单:

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

  3. 从选项中挑选Edit

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

  4. 然后您就能够修改谈论的内容。假如需求,您能够增加表情符号或提及别人。

  5. 单击Done以保存更改:

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

更改谈论的方位#

您还能够更改谈论在画布上的方位。

在谈论形式下:

  1. 单击画布中的谈论图标。
  2. 将谈论拖动到新方位。

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

留意

假如移动底层框架或图层,任何其相关的谈论也将随之移动。

假如您将一个框架剪切并粘贴到一个新方位,Figma 将断开与框架的相关的谈论。 您将能够在谈论面板中检查该谈论。 谈论与画布上的方位之间不会有任何链接。

您能够将带有相关谈论的目标移动到另一个页面。 右键单击目标并挑选Move to page

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

留意

假如您复制文件,Figma 将不会将谈论复制到新文件。 谈论仅保留在原始文件中。

4. 删去谈论#

您也能够删去发布的任何谈论。假如您删去任何带有回复的谈论,这会将其全部删去。

  1. 在画布中挑选谈论,或从谈论面板中挑选。

  2. 单击评”框中标题周围的三点菜单:

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

  3. 从选项中挑选Delete Comment

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

  4. 谈论将立即被删去。

  5. 假如要删去某个被回复的谈论,您将看到Delete Thread

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

  6. 这将删去谈论和一切回复,单击Delete以确认:

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

5. 检查谈论#

有几种方法能够检查谈论:

在谈论面板中#

谈论面板会显现当前文件中的一切谈论,当您创立它们时,Figma 将按次序为谈论编号。

Figma 还会按页面将谈论分组,页面的显现次序与页面列表的次序相同。

咱们在当前页面的谈论上显现为黑色,而其他页面的谈论则为浅灰色。

  1. 单击谈论面板中的谈论。
  2. 这将带您到页面上的相关方位并答应您检查谈论。
  3. 咱们将以蓝色显现所选谈论的谈论图标。

在画布中#

您还能够从画布中翻开谈论。

  1. 单击画布中的谈论气泡。
  2. 这将翻开谈论框并突出显现谈论面板中的谈论。

从邮件告诉中#

你能够在修改界面增加谈论,也能够在原型演示中的增加谈论。 在这两种情况下,你都能够从电子邮件告诉中翻开谈论。

6. 回复谈论#

检查者和修改者都能够增加和回复谈论。

  1. 单击画布中的谈论图标翻开谈论,或许在谈论面板”中挑选谈论。

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

  2. 将出现谈论框,和Reply输入框:

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

  3. 单击Reply并输入音讯,根据需求增加任何表情符号或提及别人。单击Reply将您的回复增加到谈论:

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

  4. Reply输入框将保留在该谈论下方,您能够根据需求增加对的进一步回复。

提示

您还能够在收到邮件告诉后直接回复邮箱,咱们会将您回复的文本增加到谈论回复中。

7. 处理谈论#

一旦获得反应或处理了谈论提及的问题,您能够处理谈论,这会将谈论在谈论面板和画布中躲藏。

  1. 翻开谈论。
  2. 单击右上角的复选框将其标记为Resolved

好了,该歇息了
我正在参加技能社区创作者签约计划招募活动,点击链接报名投稿。