We have seen Elon Musk and SpaceX making Rocket Science look like a child’s play. In the same spirit, should design tools be rocket science that is too hard to master? Not at all.

我们已经看到埃隆·马斯克(Elon Musk)和SpaceX使Rocket Science看起来像是孩子的游戏。 本着同样的精神，设计工具是否应该成为难以掌握的火箭科学？ 一点也不。

Increasingly, design teams and individual designers around the world are moving to Figma. And why not? Figma is highly touted for its collaborative capabilities.

世界各地的设计团队和个人设计师越来越多地转移到Figma 。 那么为何不？ Figma因其协作能力而受到高度吹捧。

Recently, a fellow designer asked me a range of questions on how to efficiently and effectively go from understanding Figma basics to being a pro such that developers also love working in a collaborative environment.

最近，一位设计师同事向我提出了一系列问题，这些问题涉及从如何理解Figma的基础到如何成为一名专业人士(使开发人员也喜欢在协作环境中工作)如何有效地提高效率。

我的设计师想问的那些棘手的问题是什么？ (What are those hounding questions that my fellow designer wanted to ask?)

Are you the only designer on the project? Do you use Figma teams? Do the devs only get view access? Are you using styles and components / have you developed a design system for the project? When it comes to typography in particular, is there a good guide for mobile dev? And for designer handoff do you also use the prototyping feature in Figma? Or do you have a meeting where you walk the devs through the working prototype? Or they just take the Figma and start implementing it?

您是该项目的唯一设计师吗？ 您是否使用Figma团队？ 开发人员仅获得视图访问权限吗？ 您是否正在使用样式和组件/是否已为项目开发设计系统？ 特别是在排版方面，移动开发人员是否有很好的指南？ 对于设计师交接，您还使用Figma中的原型制作功能吗？ 还是有一个会议让开发人员逐步了解工作原型？ 还是他们只是采用Figma并开始实施它？

Did it make you circle around in circles? I was like this for a moment. It dawned on me, why should it be like this? Let’s unwind the circle one by one.

它使您转圈吗？ 我有那么一会儿。 它突然降临在我身上，为什么会这样呢？ 让我们一圈放松一下。

您是该项目的唯一设计师吗？ 您是否使用Figma团队？ (Are you the only designer on the project? Do you use Figma teams?)

Every team is different. Big and small. Multiple designers and at times just one designer. Till, recently, I was working as the only designer at a startup EdAI Technologies. We recently hired an intern and two Master students in HCI working on their research thesis. Now, I can feel the collaborative use of Figma. Also, many brains are always a plus point.

每个团队都不一样。 大和小。 多个设计师，有时只有一个设计师。 直到最近，我还是一家初创公司EdAI Technologies的唯一设计师。 我们最近聘请了HCI的一名实习生和两名硕士生从事他们​​的研究论文。 现在，我可以感觉到Figma的协作使用。 同样，许多大脑永远是一个加分点。

If you want to organize the files and design system is one of the things in mind then starting early with a Professional plan is the way to go. I only could make use of the free plan in the beginning since it was an early-stage startup.

如果您想组织文件和设计系统是您要考虑的事情之一，那么尽早从专业计划开始就行了。 我只是在初期就可以使用免费计划，因为它是早期阶段的启动。

那么开发者访问权限呢？ 以及样式和组件/设计系统？ (What about developer access? And styles and components/design systems?)

My CTO has editor access. The rest of our 3 developers have view access. They do not design primarily so we did not get the paid version for them. With a free account, developers can view, comment, and inspect the designs.

我的CTO具有编辑者访问权限。 我们3位开发人员中的其余人都具有视图访问权限。 它们不是主要设计的，因此我们没有为其提供付费版本。 使用免费帐户，开发人员可以查看，评论和检查设计。

Commenting is such a great feature. The devs can comment right at the place where it is needed with context at hand.

评论是一个很棒的功能。 开发人员可以在需要的地方使用上下文进行评论。

Commenting is such a great feature. The devs can comment right at the place where it is needed with context at hand. We can dismiss comments just like issues when they finish. We can discuss in a thread within Figma and that thread remains at the particular point in the mockup in case we need to revisit the conversation about the design later.

评论是一个很棒的功能。 开发人员可以在需要的地方使用上下文进行评论。 我们可以将评论删除，就像问题结束时一样。 我们可以在Figma内的一个线程中进行讨论，并且该线程保留在模型中的特定位置，以防我们稍后需要重新讨论有关设计的对话。

• Styles / Components: I started using styles and components from the very beginning. Starting out from typography, color, and grid. While I design, if I think something can be a component then I move it to a separate “Design systems” file. At other times, I can formulate the components that I am going to need beforehand. I make them and then just assemble the design. The “Professional plan” comes in handy here. In the free version, everything was in the same file (in pages) but messy. Now, I can separate files and the components can be used all across the files via the team libraries feature.

  样式/组件 ：我从一开始就开始使用样式和组件。 从字体，颜色和网格开始。 在设计时，如果我认为某些东西可以作为组件，则将其移动到单独的“设计系统”文件中。 在其他时候，我可以预先制定需要的组件。 我制作它们，然后组装设计。 “专业计划”在这里派上用场。 在免费版本中，所有内容都在同一个文件中(以页为单位)，但杂乱无章。 现在，我可以分离文件，并且可以通过团队库功能在所有文件中使用组件。

• Design System: I was checking a lot of design systems. I will say that I am using a component/style guide because the design system would be something like the Material design guide or IBM design system with full documentation and code snippets. It can depend on how you want to proceed and what is your need at the current moment. You may not even need a design system.

  设计系统：我正在检查很多设计系统。 我会说我使用的是组件/样式指南，因为设计系统将类似于材料设计指南或具有完整文档和代码段的IBM设计系统。 它可能取决于您要如何进行以及当前需要什么。 您甚至可能不需要设计系统。

Zeroheight seems to be a great tool to document a design system on the web apart from just Figma.

除了Figma之外， Zeroheight似乎是在网络上记录设计系统的好工具。

您所说的都是视觉效果。 那房间里的大象呢？ 排版有人吗？ (It is all visual that you are talking about. What about the elephant in the room. Typography someone?)

I used TypeScale to make a typography style guide for my designs. You can go the uber-popular Golden ratio or some of the other ratios. Also, I use an 8pt soft grid system along with column grids as much as possible. For the baseline grid, I was reading some articles which mentioned using a 4pt or 8pt grid for it. I found 8pt to be better for the web.

我使用TypeScale为我的设计制作了版式样式指南。 您可以选择超级受欢迎的黄金比例或其他一些比例。 另外，我尽可能使用8pt软网格系统和列网格。 对于基线网格，我正在阅读一些文章，其中提到使用4pt或8pt网格。 我发现8pt对网络更好。

• I made a full style guide for the typography like above. I used a ratio of 1.5 for differences between the type sizes and line-height. For the bigger type sizes, I reduced the line-height systematically from the usual 1.5 to 1.33 because the spaces seem too far. It will depend on which scale you prefer.
  我为上述排版制作了完整的样式指南。 对于字体大小和行高之间的差异，我使用1.5的比率。 对于较大的字体，我将行高从通常的1.5降低到了1.33，因为空格似乎太远了。 这将取决于您喜欢的规模。
• For mobile, you can follow the same style starting with 14px as the base. But you may not need a very big type size.
  对于移动设备，您可以采用相同的样式，从14px开始作为基本样式。 但是您可能不需要很大的字号。

Here comes the elephant in the room. Should be align the text from baseline or by the bounding box?

房间里的大象来了。 应该使文本与基线对齐还是由边框对齐？

Personally, I read many articles about baseline grids or bounding box problems.

我个人阅读了许多有关基线网格或边界框问题的文章。

I am pretty sure you have encountered this problem. We, as designers, try to measure from the baseline. But, Figma or sketch has the bounding box. It is the same on the web and mobile while developing.

我很确定您遇到了这个问题。 作为设计师，我们尝试从基线进行衡量。 但是，Figma或草图具有边界框。 开发时在网络和移动设备上都是一样的。

I found an interesting article on baseline grids. It looks all fancy but the replies just had me. It will be clear from these examples below.

我在基线网格上找到了一篇有趣的文章。 看起来很花哨，但答复只是我。 从下面的这些示例中将显而易见。

To implement baseline grids, it needs so many workarounds and it is difficult for devs. I just went with using a bounding-box. Below you can see, it does look great at first glance but the developers would be calculating in guess pixels if you used an 8pt grid system but then utilized the baseline grid.

要实现基线网格，它需要许多解决方法，并且对开发人员来说很困难。 我只是使用边界框。 在下面您可以看到，乍看起来确实很棒，但是如果您使用8pt网格系统，然后再使用基线网格，则开发人员将在猜测像素中进行计算。

I talked to my devs and they said we should keep measuring white-space of (16px or 8px) from the bounding-box instead of baseline. Doing the baseline method is mostly a nightmare on the developer end and they have to guess the pixels or dp.

我与开发人员进行了交谈，他们说我们应该继续从边界框而不是基线测量空白(16px或8px)。 在开发人员端，执行基线方法通常是一场噩梦，他们必须猜测像素或dp。

Coming to mobile. Material design has a good guide on the column grid and baseline grid for vertical spacing.

即将上线。 材料设计对垂直间距的列网格和基线网格有很好的指导。

And perhaps this part about the type system itself.

也许这部分涉及类型系统本身。

Lastly, an excellent resource to improve typography literacy is this quick online guide called Butterick's Practical Typography. It takes inspiration from the best practices of graphic design and beautifully maps it to web design as well.

最后，这份快速的在线指南称为Butterick的实用印刷术，是提高印刷术素养的绝佳资源。 它从图形设计的最佳实践中汲取灵感，并将其精美地映射到网页设计中。

让我们来处理开发人员的交接。 在开发人员眼中，从零到英雄。 (Let’s handle the developer hand-off. Going from Zero to Hero in the eyes of developers.)

For me, it is an all-inclusive process for start to finish as opposed to the common notion of designing separately and then handing off to the developers later. I think there is no “concrete handoff” step for me now.

对我来说，这是一个包罗万象的过程，从开始到完成，而不是通常的想法，即分别设计然后再移交给开发人员。 我认为现在没有“具体交接”的步骤了。

I start with sketches (paper or digital) and get comments from the devs/designers right there in Figma. Then comes the hi-fi mockups. I only go for prototypes if it is needed (for eg. to showcase a client or for an entirely new interaction). Many interactions are quite intuitive for developers to understand. It is not worth it to spend time on prototyping those interactions.

我从草图(纸质或数字式)开始，然后在Figma中获得开发人员/设计人员的意见。 然后是高保真模型。 我仅在需要时才使用原型(例如，展示客户或进行全新的交互)。 对于开发人员而言，许多交互非常直观。 花时间在这些交互的原型上是不值得的。

For the complex interactions or to showcase full flow, I do use the prototype feature of Figma. I remember using Principal for Mac for nice animated prototypes. Figma was limited to only click prototypes but now they have their own version called “Smart animate” which essentially puts out nice animation if you have similar name layers. Super cool.

对于复杂的交互或展示完整的流程，我确实使用了Figma的原型功能。 我记得使用Principal for Mac制作精美的动画原型。 Figma仅限于单击原型，但现在它们具有自己的版本“ Smart animate”，如果您具有相似的名称层，则本质上会显示出精美的动画。 超酷。

So, for me and the devs in my team, prototyping is on a case by case basis. Sometimes they start the development as soon as we have agreed upon an interface and other times they wait for the prototype to start. Most times, we just discuss via comments in the Figma mockups on the given part of the interface. I think we rarely need to do a full meeting walkthrough but sometimes it does happen.

因此，对于我和团队中的开发人员而言，原型设计是逐案进行的。 有时，他们在我们就接口达成协议后便开始开发，而其他时候，他们等待原型启动。 大多数时候，我们只是通过界面给定部分的Figma模型中的注释进行讨论。 我认为我们很少需要进行完整的会议演练，但有时确实会发生。

An alternative to comments and a video meeting walkthrough is a video commenting. I find Loom to very intuitive and useful for this purpose. Record a video while going through the interactions and paste the video link as a Figma comment or on the Slack channel.

评论和视频会议演练的替代方法是视频评论。 我发现Loom非常直观，因此非常有用。 在进行交互时记录视频，并将视频链接粘贴为Figma注释或Slack频道。

Phew!!! That was a lot of Figma rocket science. I mean, people of the medium command station, did we successfully take off for Mars?

ew！ 这是很多《费格玛》火箭科学。 我的意思是，中型指挥所的人们，我们成功地为火星起飞了吗？

👋 Share your thoughts with me. Connect with me on LinkedIn.

with与我分享您的想法。 在LinkedIn上与我联系。