Designtips.today 設計日常#19
⚙️ 開箱 Figma variables x 📚 什麼是 Design Token x 🧙 體驗設計魔術師 Rauno
用文字將生活周遭有趣故事記錄下來 — 希望把日常發現的設計趨勢、產品故事、與創作者整理成《Designtips.today 設計日常》，帶給你在設計上、生活上更多不同的觀點！對了，你的小額贊助將會幫助我走得更遠 😇
🌈 Designtips.today 設計日常
做準備搬到英國前，最後的台灣探店筆記 — 七月來到隱身於市政府捷運站附近的小青苑，走進裡頭被滿滿的綠色植物圍繞，復古家具、牆上、櫃子裡還有許多怪獸公仔，是一間充滿驚喜、氣氛很好的咖啡廳！
🎨 本週 Figma - 開箱 variables
Config 2023 結束兩個月了，目前你對於新功能 variables 掌握了多少？團隊內有經過討論了嗎？我在今年的 7/16 舉辦了一場線上直播，從頭開始跟大家分享需要 Variables (design token) 背後的原因、導入首要的目標、以及導入過程所需花費的成本，非常感謝超過兩百位朋友共襄盛舉、也在一個月就破了兩千觀看呢。整體來說，我是看好這個讓設計與工程協作更緊密的功能！
在研究 variables 功能途中，我發現最困難的部分並非理解原理而已，而是在理解後，如何建立屬於團隊的工作流程 - 例如著手更新已存在的樣式系統 (又稱作 Style system - 那些已經製作好的顏色、字級系統)，官方並沒有直接提供解決方法 (畢竟各個公司的流程、運作方式不同) 但社群已經有很多人在幫忙製作 plugin:
使用 Styles to Variables 一鍵把既存的 Style system 轉換成 variables (估計可以省下 100+ 次手動建立的時間成本)、再用 Variable Finder 讓設計師一次定位出畫布目前有使用的 variables。
透過 Apply variables 直接偵測設計中使用的數值，自動套用 Variables、最後借助 Export/Import Variables 讓輸出 Variables 、並匯入到另一份檔案的苦差事一鍵解決！
Variables 才剛剛釋出，目前大家都還在前期探索的階段，也還在思考哪些建構 design token 的流程可以更系統化、自動化。不用急著導入，更重要的是 — 知道為了解決什麼需求而導入、使用上有沒有更快速有效率的工具可以協助建置！
📚 產品知識 - Design token
這次 Config 2023 提出的 Variables 實現了在 Figma 一個工具內就能建立 Design token 系統的需求。Token 的問世至少能追溯到 2016 年 (甚至更早之前) 由 Salesforces 在設計活動上提出，它可以翻譯成「令牌」或是「令符」，但我至今認為最好理解的翻譯為「標籤」🏷️
Design tokens are design decisions, translated into data. - Adobe Spectrum
這段來自 Adobe 設計系統的註解，是我認為團隊導入 Design token 的首要目標 —將每個發生過的設計決策文件化，幫助團隊在未來能更有效率做出設計選擇，同時，也讓設計與工程兩端的合作更加順暢與一致，使用的方式就是建立這一個個「設計標籤」，確保設計端建構好的元素，都能如實交付到工程端，並實際在產品上發生 🏗️
講著這個願景是很好，但大多數的團隊並沒有辦法順利建構好整個系統，畢竟設計系統隨著產品商業目標的改變，也是不斷不斷在做調整 (永無結束的一天)，如果你與團隊總是需要花非常多的時間成本在定義 Token 的命名規範，那導入 design token 反而會成為拖慢產品開發的決策。
即便如此，設計系統建置還是朝向 Tokenize 的趨勢在發展，畢竟工程上受惠良多、產品也的確因為導入後獲得開發上的穩定性。有許多團隊還在研究各式各樣的命名邏輯、或是複雜 Design Token 層級該要有架構，Shopify Polaris Docs、Google Material guideline、Intuit design token taxonomy 都是值得參考的範例！
這次 Figma 對於 Design token 上的更新，就像是替使用者們打開了新的一扇窗，我們不必再繞過工具本身，使用非官方功能來建構; 但卻也面臨了如何重新設計系統的問題 🥸，目前 Figma 上的 variables 功能發展都還屬於早期，有機會的話請務必多閱讀其他設計團隊導入的心路歷程！
✨ Hi 產品人 - Rauno
Rauno 離開 The Browser company 後 (請參閱設計日常#16)，目前是 Vercel 的 Staff Design Engineer，我對這位 IC (individual contributor) 印象最深的就是他這些年持續探索介面可能性的實驗 (例如在環形清單中的選擇互動 Select option on radial Menu、複製貼上操作的視覺化 Copy & Paste visualization)
Rauno 持續在人們感到稀鬆平常的介面互動上去做突破，而其中他對於動畫的分解、構思脈絡的參考依據很多來自於日常生活，在 Invisible Details of Interaction Design 一文中他提出了 10 多種你可能從來沒有仔細觀察過的產品互動設計行為，以及這些行為如何回歸到人類與實體物質的互動:
是這些好奇心，與多年持續將想法實作出來的習慣，讓 Rauno 有了今天的成果！值得一題的是，目前他所就職的 Vercel 公司內也有 5-6 位同事與他一樣都是設計工程雙棲，非常值得到 Twitter 上追蹤這些創作者的作品！(他的 Vercel 同事 Emil Kowalski 也針對這群職能者做了些有趣的訪談 🪴)
以上就是本期的設計日常觀察， 歡迎分享給親朋好友，讓更多人訂閱這份設計日常。也可以追蹤 IG: Designtips.today，跟我交流你最近看到的有趣設計故事 🙌。對了，你的小額贊助將會幫助我走得更遠 😇 我們下次見！