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上與我聯系。