figma设计

I was quite surprised by how much the design community resonated with the concept of spacers since I published my

自从我发表论文以来，设计界对间隔件的概念产生了多少共鸣，我感到非常惊讶。

last story. It encouraged me to think more deeply about the role of spacers in design and development. In my latest (and final) project at 最后一个故事。它鼓励我更深入地思考垫片在设计和开发中的作用。在Today, I took one step further to introduce spacers into the development handover process and our developer partner was over the moon.Today的最新(也是最后一个)项目中，我进一步迈出了一步，将间隔片引入了开发移交过程，而我们的开发合作伙伴已步入正轨。

I would like to share some new thoughts with you in this article.

我想在本文中与您分享一些新想法。

If you are unfamiliar with the concept of spacer or you are interested in the first half of this story, please check out Worry less about spacing in Figma.

如果您不熟悉spacer的概念，或者对本故事的前半部分感兴趣，请查看 不用担心Figma中的间距 。

在本文中，我将讨论： (In this article, I will talk about:)

No spacers until you are ready准备好之前不要间隔
Create a hierarchy in your spacers在垫片中创建层次结构
Use space containers使用太空容器
Hand over design with spacers带垫片移交设计
Find spacer plugins in Figma在Figma中查找spacer插件

1.准备好之前不要使用垫片 (1. No spacers until you are ready)

Let me bring up the spacers again to set the scene.

让我再次抬起垫片以设置场景。

A card component uses horizontal and vertical spacers

A spacer is a transparent box with your colour of choice and a label telling you what’s the pixel value of the vertical or horizontal space.

间隔物是一个透明的盒子，上面有您选择的颜色和一个标签，告诉您垂直或水平空间的像素值是多少。

Resisting the temptation of introducing spacers into your early design process is very important. Spacers will restrain how you think about space and layout, and force you to focus more on consistency over creating good design.

抵制在您的早期设计过程中引入垫片的诱惑非常重要。垫片会限制您对空间和布局的看法，并迫使您将更多的精力放在一致性上，而不是创建好的设计。

It starts adding values when you have a really solid design concept, and is almost ready to componentise everything to create a design system.

当您拥有真正扎实的设计概念时，它将开始增加价值，并且几乎准备好将所有内容组成组件以创建设计系统。

2.在垫片中创建层次结构 (2. Create a hierarchy in your spacers)

There is a hierarchy in your design. There also could be one in your spacers.

您的设计中有一个层次结构。垫片中也可能有一个。

Brad Frost introduced Atomic design, in which he divided the interface design system into 5 stages: Atoms, Molecules, Organisms, Templates and Pages.

Brad Frost介绍了Atomic设计，他将界面设计系统分为5个阶段：原子，分子，生物，模板和页面。

Atomic design, image credit: 原子设计中界面设计系统的5个阶段，图像信用： Brad FrostBrad Frost

When stepping through the 5 stages, you will also start finding the need to differentiate the spacers you used. For example, the spacers you created for an Atom need to be distinguished from the spacers for a Molecule.

当逐步完成这5个阶段时，您还将开始发现有必要区分所使用的垫片。例如，您需要为原子创建的间隔物与分子的间隔物区分开。

Therefore, one set of spacers (for a certain breakpoint) might not be enough.

因此，一组垫片(对于某个断点)可能不够。

A single set of spacers for the desktop breakpoint

将角色分配给间隔物 (Assign roles to the spacers)

We can differentiate spacers by assigning them different roles by using colours.

我们可以通过使用颜色为垫片分配不同的角色来区分垫片。

In this example, I simplified the hierarchy of my design system to only include Atoms, Molecules and Organisms.

在此示例中，我简化了设计系统的层次结构，仅包含Atoms ， Molecules和Organisms 。

Here are these spacers in action:

这是起作用的这些间隔物：

Example of spacers used in an Atom, a Molecule and an Organism

You can see that by having different roles in your spacers, it is easier to tell Atoms, Molecules and Organisms apart from each other.

您会发现，通过在间隔基中扮演不同的角色，可以更轻松地将原子，分子和生物区分开。

3.使用太空容器 (3. Use space containers)

You have patterns in constructing elements of your design. What about patterns in how you use the spacers?

您在构造设计元素时有模式。间隔物的使用方式又如何呢？

Richard, User Experience Lead at PreviousNext, introduced me the concept of space container over a Slack chat.

Richard ， PreviousNext的用户体验主管，向我介绍了Slack聊天中的空间容器的概念。

It’s simply a component with spacers, and placeholders to be replaced with defined design elements.

它只是一个带有垫片和占位符的组件，可以用定义的设计元素替换。

Here’s an example:

这是一个例子：

figma设计_在Figma中使用隔片移交设计相关推荐

mysql 录入窗体设计_在Access中，可用于设计输入界面的对象是　　A）窗体 B）报表 C）查询 D）表...
展开全部在Access中,可用于设计输入界面的对象是窗体.不属于Access数据类型62616964757a686964616fe4b893e5b19e31333431373330的是报表. 窗体对 ...
mysql好友关系数据表设计_社交系统中用户好友关系数据库设计
基础分析第一步,有一张用户表,表内包含用户的基本信息,比如账号.姓名.性别等信息.这里用tb_user表示用户信息表. ID用户名 1张三 2李四 3王五 4赵六第二步,需要将用户与用户直接建立好 ...
原子设计_您需要了解的有关原子设计的4件事
原子设计重点 (Top highlight) Industries such as Architecture or Industrial Design have developed smart mo ...
figma下载_在Figma中进行原型制作的技巧和窍门
figma下载自定义过渡和微交互 (Custom transitions and micro-interactions) Yep, I know that there are a lot of us ...
c语言一维数组教学设计,C语言教学中一维数组教学设计.doc
C语言教学中一维数组教学设计 C语言教学中一维数组教学设计 [摘要] 数组是C语言中非常重要的概念,通常学生在初次接触到这一概念时感到很抽象.本文通过生活中常常接触到的超市储物柜与数组进行类比,将数 ...
figma下载_在Figma上进行原型制作的各种触发选项
figma下载 Prototypes are model versions of digital products. They're used to measure usability by test ...
figma下载_在Figma中将约束与布局网格一起使用
figma下载 While doing research for the book "Designing in Figma", I discovered a powerful wa ...
book电子书数据库设计_如何为杀手book的封面设计写出完美的摘要
book电子书数据库设计逐步出版真正的假人 (BOOK PUBLISHING STEP BY STEP FOR REAL DUMMIES) I have spent 18 years in adve ...
安装工程造价课程设计_某单元楼安装工程造价课程设计
1.房屋建筑学课程设计,五层楼,2个单元楼,两个户型,A2 图,详情见附件我知道的,就这么多你怎么看,我才理解的房屋建筑学课程设计 2.房屋建筑学课程设计任务书. 本设计为某城市住宅,位于城市居 ...

figma设计_在Figma中使用隔片移交设计