Rethinking Design Practices | ReactConf AU 2020 筆記 — Part 3

https://reactconfau.com/

前言

前陣子研究了 GitHub 的 Primer 這套 design system,了解其內部的程式碼核心是如何設計,但是仍不得其解 Primer 的「設計」是如何與「工程」搭上邊的,剛好 ReactConf AU 便有一場演講是由 Seek 工作的 Mark Dalgleish 分享他的心得歷程,訴說他是如何建立一套 design system。

如果你想了解如何從零開始建構一套 design system,那麼不能錯過這場演講。

Rethinking Design Practices — Mark Dalgleish

https://www.youtube.com/watch?v=xxbc3wAztl0&ab_channel=ReactConfAU

講者 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 只能出現其中一種

https://medium.com/eightshapes-llc/space-in-design-systems-188bcbae0d62

從以下範例中應該會更清楚,作者談到一個 element 的 space 應該越簡單越好,否則會讓瀏覽器花費一些成本在無謂的計算上,可能會導致效能變糟。

https://medium.com/eightshapes-llc/space-in-design-systems-188bcbae0d62

通常在決定 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 的間距。

https://youtu.be/xxbc3wAztl0?t=867

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,最後總結了以下四點:

  1. Use code-oriented design tools
  2. Create the right abstractions
  3. work closely with designers
  4. actively support new workflows

從演講中可以感覺到前端這個世界很小 😃,因為 Primer 使用了 playroom 這套工具,也使用 styled-system 作為基礎建設的工具,而 seek 建構了 playroom 這套工具,同時也參考了 styled-system 的設計原則,感覺就是互相吸收彼此的經驗,藉此打造一個更好的工具。

現在已經有了 Primer 的程式碼核心知識,以及 Braid 提供的設計流程,再加上 emotion 使用的 monorepo 套件 (上一篇文章提到的),也許就可以自己打造一套 design system 了吧!

--

--

一群技術人想要寫出一些好文章所建立的技術專欄。每週二一篇原創文章、一封電子報,歡迎大家訂閱!主網站: https://weekly.starbugs.dev/。

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Airwaves

Airwaves

每天進步一點點,在終點遇見更好的自己。