如何在 Figma 中使用布尔公式

blank
By
Jugo Mobile
Jugo Mobile is a platform ...
16 分钟阅读

Figma 被认为是全球平面设计师最好的程序之一。 它的功能非常全面,可以帮助用户创建从引人注目的徽标到独特的登陆页面的任何内容。 值得注意的是,布尔功能(也是 2002 年组件属性更新的一部分)允许您通过多个公式组合图层来实现自定义形状。

在这里,您将学习如何在下一个设计中使用布尔功能。

自定义形状的布尔公式选项

在创建自定义形状之前,您需要了解布尔公式的工作原理以及它们的作用。 每当您创建布尔组时,它将被视为具有填充和描边属性的单个形状图层。

您可以在界面的顶部栏中找到带有两个重叠方块的布尔图标。 单击下拉菜单时,您将看到四个公式选项。

这些公式选项包括:

  • 联合选择 – 此选项将您选择的形状转换为布尔组。 使用 Union 时,外部子形状的路径将形成新的自定义形状的轮廓。 但是,它不会包含任何内部重叠段。
  • 减去选择 – 考虑到此选项与并集选择相反是有帮助的。 它从基本形状中删除形状的整个区域。 这使得只有底层可见。
  • 相交选择 – 通过相交选择,用户可以创建仅由原始形状或子图层的重叠部分组成的自定义形状。
  • 排除选择 – 排除函数与相交布尔组选项相反。 使用它将为您提供来自原始形状的非重叠部分的自定义形状。

请记住,您需要选择两个或多个形状,然后才能有效地使用顶部菜单中的布尔选项。 这是因为布尔运算仅将多个形状层组合成一个自定义的复杂形状。

使用 Figma 实例交换属性

当 Figma 于 2022 年宣布组件属性更新时,布尔选择只是可用的多个新功能之一。 组件更新的全部目的是帮助您有效地制作变体模板,而不是挖掘不合时宜的选项。

虽然布尔值是其中的重要组成部分,但用户还可以使用实例交换属性。 操作方法如下:

  1. 选择您的设计元素。
    1712527951 100 如何在 Figma
  2. 导航到界面右侧的实例交换菜单并单击它。 该图标有一个带有箭头的菱形。
    1712527951 817 如何在 Figma
  3. 例如,为属性指定一个名称,例如弹出菜单上的“图标”,并将值设置为复选标记。
    1712527951 120 如何在 Figma
  4. 选择“创建财产”。 Figma 随后将标记交换菜单最初所在的组件属性。
    1712527951 574 如何在 Figma
  5. 选择设计并使用命令 CTRL + C 创建设计的副本。然后并排设置实例。
    1712527951 30 如何在 Figma
  6. 通过单击从标记的组件属性菜单中选择一个新图标。 这将自动更改实例上的元素。

实例交换功能就是为了方便。 使用交换实例选项,您可以简化设计流程,同时快速并排切换变体(实例)。

使用文本属性选项轻松更改实例

假设您正在为着陆页设计一个号召性用语按钮。 您有两个并排的变体,并且您已使用实例交换属性来查看不同的图标。 然而,措辞是另一个需要考虑的因素。

通常,您需要遍历图层部分才能完成该过程。 使用文本组件属性,您可以在侧边栏上查看和更改它。 以下是如何利用文本属性功能来发挥自己的优势:

  1. 选择设计中的文本元素。
    1712527951 846 如何在 Figma
  2. 在单击“创建属性”之前,为元素指定一个名称(例如“文本”)和值“按钮”。
    1712527951 147 如何在 Figma
  3. 然后,您将能够更改文本并尝试号召性用语的措辞。

文本属性可以方便地与实例交换和布尔选项一起使用。

如何在 Figma 上使用变体属性

通过 Figma 上的新组件更新,您可以创建多个变体并从右侧边栏控制它们。 这样做将帮助您更有效地更改文本和交换图标。 您还可以控制变体设计的其他方面。 让我们看看如何操作:

  1. 选择您的设计,然后单击顶部栏中的“添加变体”。 按住左键,单击您的设计,然后拖动其旁边的变体。
    1712527952 142 如何在 Figma
  2. 您会注意到第二个变体属性将如何显示在右侧边栏上。 将属性重新标记为“按钮”,并将其旁边的值重新标记为“红色”。
    1712527952 619 如何在 Figma
  3. 这些属性现在将标记您的变体。 如果您选择原始设计,您会注意到该值已更改回“默认”。
    1712527952 891 如何在 Figma

常见问题解答

我可以使用布尔选项制作徽标吗?

从技术上讲,布尔属性允许您使用多个形状的路径组合它们。 虽然这可以是制作简单徽标的一种方法,但选项仅限于椭圆形等简单形状。 相反,使用钢笔工具进行徽标创建等操作是最好的。 您仍然可以使用其他组件更新来简化分层过程。

我可以使用文本组件属性选项更改字体吗?

不幸的是没有。 文本组件属性允许您更改文本而不是字体。 但是,您仍然可以选择文本并通过右侧边栏找到合适的字体。

我需要使用上述组件属性的一些设计实例是什么?

您不需要使用变体的组件属性。 然而,它使设计过程变得更加容易和更快。 例如,需要不同颜色的按钮(主要相似,仅更改一个组件)或小的着陆页形状变体。 它们还有助于创建两种设计并选择最好的一种。

利用 Figma 上的组件属性简化您的设计流程

使用布尔等选项,您可以通过旧形状的组合创建新的自定义形状。 这是通过顶部侧边栏的四个公式选项来完成的。 这些包括并集、减法、相交和排除。 同样,您可以使用其他组件属性选项,例如文本属性和实例交换。 这样做可以轻松创建具有不同组件的变体。 最终,使用组件属性有助于简化设计过程。

您使用布尔选项制作了哪些复杂的形状? 您是否发现组件属性选项也很容易使用? 请在下面的评论部分告诉我们。

分享本文
关注
Jugo Mobile is a platform dedicated to high-quality content in gaming, sports, and tech. Engage with high-quality content and connect with fellow enthusiasts and experts. Explore the latest trends and innovations in our vibrant community. Join us and experience the future today!