用文字將生活周遭有趣故事記錄下來 — 希望把日常發現的設計趨勢、產品故事、與創作者整理成《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,跟我交流你最近看到的有趣設計故事 🙌。對了,你的小額贊助將會幫助我走得更遠 😇 我們下次見!