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

张2公子
6,810 阅读12分钟

今天第二次更新产品相关,今天不出意外，应该可以把这次figma自编教程更新完成，昨天我们的Figma教程讲到了工具栏，其中还包含了关于图片与形状变化的一些介绍，有兴趣的宝贝可以看看昨天的内容：Figma自编教程第一篇（也是做产品实习生的第一天） - 掘金 (juejin.cn)，今天就来讲讲后面的这五个吧！

image.png

绘画工具（Drawing tools）

绘画工具是我们在使用Figma时经常会用到的一个工具，其中包含钢笔工具和铅笔工具，其实效果差别还蛮大。 image.png 我在这边将两个工具都点开，并在这边进行了绘制，大家应该很明显的可以看出哪个是钢笔，哪个是铅笔吧。
大家先猜一下，然后，我马上公布答案！！！ image.png 答案就是下图！上面那个我随便画的圈圈，是用铅笔工具绘制的，旁边的那个奇奇怪怪的形状，是用钢笔画的。 这个是怎么画的呢？ image.png 其实具体在画时，有很多的点需要进行注意，这样才能够成功画出自己想要的样式
我们首先以钢笔工具为例，对其进行讲解
我们在点击钢笔工具之后，会出现一个小圆点，这就是我们确定的一端端点，这个端点位置呢，我们可以自己点击确定，这个部分没什么大问题 image.png 然后在确定端点之后，我们再次点击，这个时候，他的端点变为正方形， image.png image.png 绘制完成后，记得点击“done”按键 image.png 这边也可以进行弧度的调控
这边感觉官方文档写的很清楚，所以我搬过来这一段，链接在此钢笔使用 | FigmaChina
大多数钢笔工具在具有方向的循环中绘制路径，总是希望重新连接到其原始点。矢量网络没有方向，可以在不同的方向上分叉，而不需要创建单独的路径对象，会比使用传统矢量路径工具绘制的更快。

创建

你可以使用钢笔工具或任何形状工具来创建新的矢量图层。

使用形状工具时，可以按住修饰键以特定方式绘制它们：

  • 如果在创建形状时按住 Shift，它会将形状的纵横比锁定为 1：1。
  • 如果在创建形状时按住 ⌥，则会相对于其中心而不是左上角创建形状。
  • 如果在创建形状时按住 空格键，则会移动整个形状而不是单个点。

编辑 

如果选择路径并按 ENTER 键，则会进入矢量编辑模式，你可以在其中选择，调整或更改各个点，线条或整个形状的属性。你还可以使用工具栏中的 Edit Object 按钮输入矢量编辑模式。

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

编辑对象时，可以与现有点以及它们之间的线进行交互，你还可以使用钢笔工具绘制其他点并对其进行操作。

点之间的路径可以是直线，也可以使用弯曲工具以激活贝塞尔曲线。

贝塞尔曲线

要使用点的贝塞尔手柄，请进入编辑模式。

  1. 如果是曲线，则手柄会显示出来。
  2. 如果没有手柄，请按住 ⌘ 并单击该点。

圆角 

路径上的任何中间点都可以通过 Inspector 中的 Corner Radius 属性调整圆角属性。 如果选择整个路径，它会调整所有角的圆角属性。如果进入编辑模式，则可以选择单个点并分别对其进行调整。

开放路径上的终端点只能通过 End Caps 调整圆角。

端点 End Caps 

端点使你可以在未闭合路径上为终端点添加样式。前三个也适用线条的末端

  • 无（默认）：端点是路径的末端。
  • 正方形：端点是正方形。
  • 圆形：端点为圆角。
  • 线箭头：端点为线箭头。
  • 三角箭头：端点为等边三角形箭头。

铅笔工具

这个感觉没什么特别需要进行讲解的地方，用法较为简单，就直接画就行了😝😝😝

文本工具（Text）

文本工具这一块内容属于是那种，看起来简简单单，但是它是我们每天都在用到的重要工具 image.png 我们就来举个实际操作的例子吧，我们以我的qq界面来举例，我们可以看到，上面有很多种文字，这些，其实我们都可以进行实现，

image.png 现在我们就来一步步的实现字体，不过，我这次页面的实现，其实主要还是面向我qq页面当中的字体方面，其他这次就不怎么设计了，可以下次我再来设计一下完整的页面

聊天界面大概实现

首先，我们要面对的是，页面大小的问题，大家可以通过点击原图，上面会显示页面大小的信息 image.png 我们可以看到，左边的页面显示为，其大小是384*888，那我们就在旁边的大小，进行更改，现在大小就是相同的了 image.png 之后我们对于需要模仿的界面进行分析 它大致分为以下几个部分

  • 绘画列表
  • 功能列表
  • 插件列表
  • 还有自己的头像，天气
    这边的话，啊啊啊啊啊啊啊，好想用视频来展示啊，感觉视频更快一点
    那就开始画吧
    为了减少篇幅，我这边将主要重点都放在了一起来截图，想要实现渐变效果的话，我们需要将solid调为linear，至于颜色的选择，我们可以直接用取色笔，然后进行取色 image.png 大家可以看到我画的两个渐变色模块，那是怎么进行区分的呢？
    image.png 这时候就需要我们用添加颜色图层了，添加一个灰色或是黑色的颜色图层，使它颜色更加有层次感，可以上一个渐变矩阵分开

image.png 这边的文字可以这样实现了，和原版较为相似，思路整个是相似的， image.png

image.png

交流页面（Add comment）

image.png

image.png 这一块官方真的太详细了评论 | FigmaChina
您可以在画布上的任何位置添加评论，无论是在框架、组还是图层上。

你可以向原型或设计文件添加评论，查看者和编辑者都可以添加和回复评论。

  1. 评论设置
  2. 添加评论
  3. 编辑评论
  4. 删除评论
  5. 查看评论
  6. 回复评论
  7. 解决评论

1. 评论设置 #

要添加、查看和回复评论，您需要进入评论模式。

您可以通过单击工具栏中的评论图标进入评论模式，或者使用键盘快捷键 C。

这将打开右侧边栏中的评论面板：

您可以在此处访问您的评论和评论设置。

评论设置和通知 #

在面板的顶部，您可以确定是否要：

  • 在评论面板中 显示已解决的评论，您可以取消选中此设置以隐藏中已解决的评论。

  • 接收评论的邮件通知。这将在添加新评论或回复评论时向你发送电子邮件。如果您是文件所有者，则默认情况下将启用此设置。

邮件通知

您可以基于每个文件启用或禁用电子邮件通知，我们仅默认为文件所有者启用此设置。 您需要在每个文件上禁用此设置以取消通知。

如果您在文件中被 @，即使你禁用了该文件的邮件通知，但仍将收到邮件通知。

Slack 通知

您还可以设置 Slack 通知。这允许您接收开启项目中的文件中任何评论的通知。

如果协作者在另一个项目 @ 您中，我们将不会通过 Slack 通知您。只有启用了 Slack 的项目才会发送提及通知。

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

提示

您还可以接收来自其他用户的评论，@ 或活动的应用内通知。 您可以在帐户设置中启用或禁用这些功能。

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

2. 添加评论 #

您可以向特定的框架、组或图层添加评论，或者在画布上的任何位置添加评论。

  1. 单击工具栏中的评论图标，或按 C 键进入评论模式。

  2. 您的光标现在将显示为评论图标：

  3. 单击画布中您希望显示评论的位置：

  4. 输入你的评论，然后单击 Post 以发送：

注意

在评论模式下，您将无法对画布中的对象进行任何更改。 您需要通过选择工具栏中的其他工具离开评论模式。

提及其他人 #

在团队文件中，您可以提及团队中的任何人。

在团队之外的文件中，您可以提及你知道的任何人：

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

在评论中提及某人：

  1. 使用 @ 键激活。

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

  3. 单击 Tab 或 Enter 键以选择，或者单击列表中的人名：

  4. 完成评论，然后点击 Post：

然后通过电子邮件和应用程序内通知（如果启用）向该人员发送通知：

注意

如果您想提及的人不在列表中，则需要先通过共享对话框邀请他们访问文件。

表情符号 #

您还可以在评论中添加表情符号，以帮助说明您的信息。

  1. 单击评论框中的笑脸图标：

  2. 然后你可以：

    • 使用搜索栏查找要添加的表情符号。

    • 从您经常使用的表情符号中选择。

    • 浏览表情符号目录。

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

  4. 您的表情符号将与您的消息一起包含在内：

3. 编辑评论 #

您可以对发布的任何评论进行更改。这对于修复拼写错误或重新定位评论很方便。

编辑评论内容 #

要编辑评论：

  1. 在画布中选择评论，或从评论面板中选择。

  2. 单击评论框中标题旁边的三点菜单：

  3. 从选项中选择 Edit

  4. 然后您就可以编辑评论的内容。如果需要，您可以添加表情符号或提及他人。

  5. 单击 Done 以保存更改：

更改评论的位置 #

您还可以更改评论在画布上的位置。

在评论模式下：

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

注意

如果移动底层框架或图层，任何其关联的评论也将随之移动。

如果您将一个框架剪切并粘贴到一个新位置，Figma 将断开与框架的关联的评论。 您将能够在评论面板中查看该评论。 评论与画布上的位置之间不会有任何链接。

您可以将带有关联评论的对象移动到另一个页面。 右键单击对象并选择 Move to page。

注意

如果您复制文件，Figma 将不会将评论复制到新文件。 评论仅保留在原始文件中。

4. 删除评论 #

您也可以删除发布的任何评论。如果您删除任何带有回复的评论，这会将其全部删除。

  1. 在画布中选择评论，或从评论面板中选择。

  2. 单击评”框中标题旁边的三点菜单：

  3. 从选项中选择 Delete Comment：

  4. 评论将立即被删除。

  5. 如果要删除某个被回复的评论，您将看到 Delete Thread：

  6. 这将删除评论和所有回复，单击 Delete 以确认：

5. 查看评论 #

有几种方法可以查看评论：

在评论面板中 #

评论面板会显示当前文件中的所有评论，当您创建它们时，Figma 将按顺序为评论编号。

Figma 还会按页面将评论分组，页面的显示顺序与页面列表的顺序相同。

我们在当前页面的评论上显示为黑色，而其他页面的评论则为浅灰色。

  1. 单击评论面板中的评论。
  2. 这将带您到页面上的相关位置并允许您查看评论。
  3. 我们将以蓝色显示所选评论的评论图标。

在画布中 #

您还可以从画布中打开评论。

  1. 单击画布中的评论气泡。
  2. 这将打开评论框并突出显示评论面板中的评论。

从邮件通知中 #

你可以在编辑界面添加评论，也可以在原型演示中的添加评论。 在这两种情况下，你都可以从电子邮件通知中打开评论。

6. 回复评论 #

查看者和编辑者都可以添加和回复评论。

  1. 单击画布中的评论图标打开评论，或者在评论面板”中选择评论。

  2. 将出现评论框，和 Reply 输入框：

  3. 单击 Reply 并输入消息，根据需要添加任何表情符号或提及他人。单击 Reply 将您的回复添加到评论：

  4. Reply 输入框将保留在该评论下方，您可以根据需要添加对的进一步回复。

提示

您还可以在收到邮件通知后直接回复邮箱，我们会将您回复的文本添加到评论回复中。

7. 解决评论 #

一旦获得反馈或解决了评论提及的问题，您可以解决评论，这会将评论在评论面板和画布中隐藏。

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

好了，该休息了
我正在参与掘金技术社区创作者签约计划招募活动，点击链接报名投稿。

avatar
文章
阅读
粉丝