Rethinking Design Practices | ReactConf AU 2020 筆記 — Part 3
前言
前陣子研究了 GitHub 的 Primer 這套 design system，了解其內部的程式碼核心是如何設計，但是仍不得其解 Primer 的「設計」是如何與「工程」搭上邊的，剛好 ReactConf AU 便有一場演講是由 Seek 工作的 Mark Dalgleish 分享他的心得歷程，訴說他是如何建立一套 design system。
如果你想了解如何從零開始建構一套 design system，那麼不能錯過這場演講。
Rethinking Design Practices — Mark Dalgleish
講者 David Khourshid 是 CSS Modules 的 co-creator，目前在 seek 的 frontend tooling team 工作，其中一項成果是名為 Braid (編織) 的 design system，它以 open source 的形式開源在 GitHub。
講者在這場演講中將從「design in code」出發，也就是用工程師的角度了解建構 design system 的流程。在這場演講中會包含三個概念，分別為：
- tooling：建構 design system 的工具
- abstraction：將「設計」轉換為「工程」的元素
- workflow：用工程師的角度理解如何與設計師協作建構一套 design system
Tooling
JSX as a design tool
講者所在的公司 Seek 開發出一套工具，名為 Playroom，這套工具同時也被使用在 GitHub 的 design system — Primer 中。
Playroom 這套工具如上圖所示，主要被用在能夠即時地以 JSX 語法導入 component，並且顯示 component 在不同的螢幕大小下所顯示的樣式。
而 Playroom 有兩個特性分別為 zero install 與 sharable url，透過這兩個特性可以讓我們把 Playroom 作為跟設計師之間的橋樑，事先在 Playroom 中寫下一段 JSX，在 Playroom 中便會出現相對應的 component，同時也會生成一段相對應的 hash 在 url 後方，你可以將整串 url 分享給設計師，設計師便可以進入到 Playroom 中並看見你剛剛建立的元件。
test drive our design language
甚至我們可以用 Playroom 來測試 design system 的彈性，因為它能夠即時地展示 JSX 所對應的 component，隨意組合這些 component，說不定你們有機會冒出更多的想法。
Abstraction
Your job as a design system developer is to accurately model the way designers think.
建構 design system 的第一個步驟是決定 design token 或稱 theme variables，包括 typography、spacing、color、borders、shadows、breakpoints 等等較為低階的規則，這些較為低階的規則將被用於打造 primitive component。
講者提到「primitive component」這個概念啟發於一個工具名為 — styled system (Primer 使用的工具之一)。
在 Braid 這套 design system 中的 primitive component 為 <Box /> ，這個 component 非常地有彈性，它可以做到非常多的事情，也就是能夠提供修改上述的 spacing、color 等等屬性的 props，也因此 <Box /> 的 🔗 props 多達 45 個。
剛剛說到，Braid 受到 styled system 的啟發，所以它提供了一個功能很像是 styled system 的 variant API，能夠在傳入的 props 中用陣列表示在不同的螢幕大小下呈現的樣式。
<Box padding={["small", "medium"]}>
<Text>Lorem ipsum dolor sit amet.</Text>
</Box>有了 primitive component 之後，其他的 component 就更容易建立，像是 Button、Field、Menu 等等。
在談完 primitive component 之後，接下來要進一步談到 Layout 這個觀念。
在 design system 中，layout 是非常重要的一個環節。講者的公司花費相當多的心力在 layout 上，很掙扎該如何實作比較好，後來看到了一篇部落格文章 — Space in Design Systems，在這篇文章中講者採用了一個觀念：
Component shouldn’t contain surrounding white space
white space is owned by layout components.
下圖引用自該篇文章，該篇文章中提到，一個 element 不應該有過多的 space，什麼意思？簡單來說在一個 elemement 中 padding 與 margin 只能出現其中一種。
從以下範例中應該會更清楚，作者談到一個 element 的 space 應該越簡單越好，否則會讓瀏覽器花費一些成本在無謂的計算上，可能會導致效能變糟。
通常在決定 padding 或 margin 的 px 時，工程師與設計師都會溝通好採用某些數字，例如 px 只能是 4 的倍數。
而該篇文章的作者甚至提到在定義 space 的數字時，常見的有兩種方式，分別為等差級數 (4、8、12、16、20、24…) 與等比級數 (2、4、8、16、32、64…)，而作者更喜歡簡單的等比級數系統，因為太多的選擇不見得是件好事。
回到 Braid 這套 design system 上面，講者採用該篇文章提到的觀念，並且延定義了一個規範 — WHITE SPACE is owned by Layout component，也就是說，除了 Layout component 以外的 component 不會有出現 margin 的情況。
但是，為了完全地處理 white space，在網頁中有一個令人頭痛的問題是文字在瀏覽器中的預設高度，儘管我們沒有對 <h1> 這個 tag 做任何的設定，它就是會多了些空白，因此，這些空白將會影響 Layout componet 的設計。
為此，Seek 他們使用了一件非常神奇的技巧，讓 <h1> 這個標籤的空白完全地消失。但是，講者只有簡單秀出虛擬碼，實際上要怎麼做還得 trace 原始碼才知道。
接下來要進入到 Layout component 的環節
講者在演講中舉了三個例子，分別為 <Stack /> 、<Inline /> 與 <Column /> 等。前面有提到 white space is owned by layout components 這個規範，所以 這些 layout component 都有一個 props 為 space ，透過 space 能夠從外部設定 children 的間距。
Workflow
前面講完了 Playroom 這個 tool，以及如何將 design system 的諸多概念一一抽離出來，最後一個步驟即是「如何循序建立從無到有建構一個 design system」。
所以講者現場 🎥 live demo，使用 Playroom 將各種 component 組合起來，變成一個簡易的 dashborad。在這個過程中，講者像似一人飾演 developer 與 designer 的角色，寫一段 code 之後，就馬上回饋給自己覺得哪個部分可以改進。講者的迭代非常快速，很快地就完成了一個簡易的 dashboard。
Encourage pairing between developer and designer
總結
在這場演講中，Mark Dalgleish 介紹了 Playroom 這套工具，並且將建構 design system 分為三個部分講述，分別為 tooling、abstraction 與 workflow，最後總結了以下四點：
- Use code-oriented design tools
- Create the right abstractions
- work closely with designers
- actively support new workflows
從演講中可以感覺到前端這個世界很小 😃，因為 Primer 使用了 playroom 這套工具，也使用 styled-system 作為基礎建設的工具，而 seek 建構了 playroom 這套工具，同時也參考了 styled-system 的設計原則，感覺就是互相吸收彼此的經驗，藉此打造一個更好的工具。
現在已經有了 Primer 的程式碼核心知識，以及 Braid 提供的設計流程，再加上 emotion 使用的 monorepo 套件 (上一篇文章提到的)，也許就可以自己打造一套 design system 了吧！
