【译】Figma与CSS

前端

在学习如何构建 Figma 插件时，偶然发现了一些有趣的 Flexbox 和Grid在 Figma 中的用法。决定更深入的了解。

Flexbox 和Grid为我们这些 Web 开发者提供了许多新的布局能力，你不需要对 Flexbox 或 Grid 有详细的了解。

使用 CSS Grid

在 Figma 的右侧，我们有默认的“设计”选项卡。在画布上选择一个元素时，我们可以看到其 x 轴、y 轴、宽度和高度值。这也可能会有所不同，具体取决于元素是文本、组、框架等。

我在这里发现有趣的地方是在设计选项卡中为每一行使用 `CSS gri。

请注意我们有很多条线。这些是用于 28 列的，没错！你没看错。设计选项卡中的任何一行都是建立在该网格上的。

每列宽度为 8px。

1
2
3
4
5
.raw_components--_singleRow {
  display: grid;
  grid-template-columns: repeat(28, 8px);
  grid-template-rows: 32px;
}

此外，例如控制阴影细节时，也使用相同的网格。

这是 CSS Grid 的完美应用，即使乍一看你可能会认为这些只是一些小布局，这是 CSS Grid 的一个非常有效的用法。

对齐按钮

在此用法中，每个对齐按钮占据网格的 4 列（32px）。请注意图标本身也很好地居中显示。

1
2
3
4
5
6
7
8
9
.raw_components--_singleRow {
  display: grid;
  grid-template-columns: repeat(28, 8px);
  grid-template-rows: 32px;
}

.raw_components--_iconButton {
  grid-column-end: span 4;
}
元素位置

在此示例中，我们看到x轴和 y 轴的输入是如何分隔的，还有新的“绝对位置”按钮。

自动布局

我发现非常有趣的部分是自动布局。

这次我们有一个 28 列 * 2 行的网格，以适应帮助我们在自动布局容器内对齐子项的控件。

1
2
3
4
5
.stack_panel_v4--doubleRow {
  display: grid;
  grid-template-columns: repeat(28, 8px);
  grid-template-rows: repeat(2, 32px);
}


在网格级别，每个元素都使用 grid-column 或 grid-row 或两者来定位。

你看到的对齐点是由 SVG 图案制作的。多么奇妙的细节和用法！

而且不仅如此，还有一个包含 9 个网格项的 3*3 网格。我相信这些是为每个对齐点提供可点击区域的。

1
2
3
4
5
.alignment_view_v4--tooltipGrid {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: repeat(3, 1fr);
}


接下来是指示器容器，在这里我们有一个显示自动布局容器内元素如何对齐的图标。
为了更容易理解，我将整个正方形分为四部分：

  • 基本背景
  • SVG 点
  • 我们有可点击区域的 3*3 网格
  • 指示器容器（蓝色图标）

    现在我们将重点放在指示器容器上。让我们看一下基本的标记和 CSS。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    <!-- 60*60 容器 -->
    <div class="alignment_view_v4--indicatorContainer">
      <!-- 20*20 图标（蓝色） -->
      <div class="alignment_view_v4--indicatorGroup">
        <div class="alignment_view_v4--indicator"></div>
        <div class="alignment_view_v4--indicator"></div>
        <div class="alignment_view_v4--indicator"></div>
      </div>
    </div>
    在上面的标记中，我们有指示器容器和对齐图标。我图标本身是用 Flexbox 构建和对齐的。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    /* 尺寸为 60*60 */
    .alignment_view_v4--indicatorContainer {
      position: absolute;
      top: 1px;
      right: 1px;
      bottom: 1px;
      left: 1px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    有了这个，我们将有两个 Flexbox 包装器，一个用于 indicatorContainer 元素，另一个用于图标本身。

    这是蓝色图标的样式。我们有一个flex容器，方向为 column，然后是 3 个不同尺寸的蓝色线条。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    .alignment_view_v4--indicatorGroup {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      width: 20px;
      height: 20px;
    }

    .alignment_view_v4--indicator {
      height: 4px;
      border-radius: 1px;
    }

    .alignment_view_v4--indicator:nth-child(1) {
      width: 10px;
    }

    .alignment_view_v4--indicator:nth-child(2) {
      width: 16px;
    }

    .alignment_view_v4--indicator:nth-child(3) {
      width: 7px;
    }
    惊奇的是，当我们更改自动布局元素的对齐方式时，indicatorContainer和indicatorGroup都会反映出来。

以下是将自动布局设置为左上对齐的示例。

1
2
3
4
5
6
7
8
.alignment_view_v4--indicatorContainer {
  justify-content: flex-start;
  align-items: flex-start;
}

.alignment_view_v4--indicatorGroup {
  align-items: flex-start;
}

使用 Flexbox


在上图中，我们有一个名为“Sign up_001”的主框架，在其中有3个嵌套项。嵌套越多，我们从左边获得的间距就越多，以清楚地显示存在嵌套关系。

检查行时，我发现了以下内容：

每一行都是一个 flex 父元素，因此我在 HTML 父元素旁边突出显示了 flex 标签。

在下图中看看它的运行情况：

很酷，但问题是：间距是如何工作的？间距是通过添加间隔组件实现的。

每个间隔组件的宽度为 16px，所有间隔都有 margin-right: 8px，除了第一个。

当有更多嵌套时，行将如下所示。

既然视觉方面清楚了，让我们来看看代码和样式。

1
2
3
4
5
6
7
8
9
10
11
12
<div class="object_row">
  <span class="object_row--indents">
    <span class="object_row--indent"></span>
    <!-- The more indent items, the more nesting.. -->
  </span>
  <span class="object_row--layerIcon"></span>
  <span class="object_row--rowText"></span>
  <span class="object_row--rowActions">
    <span class="object_row--lockIcon"></span>
    <span class="object_row--visibleIcon"></span>
  </span>
</div>

我们有两个 flexbox 父元素，一个用于整行，另一个用于间隔组件（团队 Figma 将它们称为缩进）。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.object_row {
  display: flex;
  height: 32px;
}

.object_row--indents {
  display: flex;
  height: 100%;
}

.object_row--layerIcon {
  width: 16px;
}

.object_row--rowText {
  width: calc(100% - 16px);
  flex-shrink: 1;
}

.object_row--rowActions {
  width: 0; /* becomes width: auto on hover */
}

通过上述内容，可以通过添加新的间隔元素来进行嵌套。

考虑以下标记。我们有两个间隔，这意味着此行是其组中的第一个。

1
2
3
4
5
6
7
8
9
10
11
12
<div class="object_row">
  <span class="object_row--indents">
    <span class="object_row--indent"></span>
    <span class="object_row--indent"></span>
  </span>
  <span class="object_row--layerIcon"></span>
  <span class="object_row--rowText"></span>
  <span class="object_row--rowActions">
    <span class="object_row--lockIcon"></span>
    <span class="object_row--visibleIcon"></span>
  </span>
</div>

其他 Flexbox 用例

描边细节

对于颜色，Flexbox 被用于控制颜色值和不透明度。

在相同的上下文中，当用户悬停在下拉菜单上时，它会通过 flex-grow: 1 将文本展开到完整的可用空间。

文档颜色

在此示例中，最好使用 Flexbox，以便我们可以获得换行的好处。使用 CSS grid 将无法给我们带来同样的结果。

限位组件

这里有多个 Flexbox 容器。第一个用于顶部、中间和底部行。第二个用于中间项，它本身是一个 Flexbox 容器。

涅槃快乐热爱生活，追求技术

个人简介。