Designtips.today 設計日常#24
🌈 Figma 設計系統指南翻新 x 🔮 Tldraw 與即時圖片生成技術應用 x 🔬 專研設計背後原理的產品人 Dan Hollick
用文字將生活周遭有趣故事記錄下來 — 希望把日常發現的設計趨勢、產品故事、與創作者整理成《Designtips.today 設計日常》，帶給你在設計上、生活上更多不同的觀點！對了，你的小額贊助將會幫助我走得更遠 😇
🌈 Designtips.today 設計日常
本週倫敦天氣下探將近零度，小編派出厚重大衣，來到早晨就座無虛席的 Trade 裡邊吃鬆餅、邊整理文章。貼心提醒，因為假日太多人光顧這間咖啡廳，建議需要辦公的讀者朋友請平日再來拜訪。 ☕
🎨 本週 Figma - 設計系統指南翻新
Figma 這兩個月發佈了超過 40+ 個重要小更新 (Little Big Update)，而小編也保握時間將自己的設計系統實作指南 Design system handbook 做了翻新！🌟
這本實作指南的製作靈感源於我 2021 年在拼貼趣擔任 Design Engineer 期間。當時我希望能夠全面系統化整理自己的工作經驗和學到的設計系統知識。自那以來，已有超過 270 位學生參與、不時給我寶貴的回饋。現在在 2023 年末回顧這段經歷，我還是覺得非常珍貴; 但同時我也意識到過去兩年軟體產業經歷了巨大的變化: 比如 AI 的崛起、Figma Dev Mode 的推出、以及各種工具的革新等，這些都使得這本指南需要與時俱進。
在這版指南中，我對現有知識（例如 Component, Style system）進行更新，刪除一些過時的資訊（例如 base component），並且加入了新功能的實作方法和使用場景（例如 Variables, Dev mode, workflow）。目前這些變更還只是第一步，指南會持續朝著，成為台灣設計團隊都能使用的工具書的目標前進！很歡迎已經加入課程的同學給我建議，同時也推薦這本指南給那些正開始建立設計系統的讀者朋友們。🤝
🔮 黑客松夜晚 - 即時性圖片生成黑魔法
很開心 11 月底能到 Tldraw 的辦公室跟一群 Creative coder 進行黑客松。Tldraw 是一家打造了類似 Figma 、但開源的共編白板工具，這讓開發者保有修改的彈性，能自行打造不同的編輯器功能、或是直接將編輯器整合到自家產品中。
這次的黑客松我在一小時內將最近很有討論度的 Latent-Consistency-Models (LCM、或是 Realtime Stable Diffusion) 加入編輯器當中。可以從下方的影片得知這種生成模型的擅長之處: 針對輸入的內容模型可以在非常短的時間 (2-5 秒) 裡給出結果，只見畫筆才畫出狗頭，右手邊馬上就出現一隻輪廓完整的狗。
而我在這個基礎上延伸出讓 AI 把剛畫出來的狗狗插圖再當作 Input、結合第二次的文字 Prompt 產出更複雜的結果:
📍 第一層: 手動塗鴉 + 文字 prompt: a dog = 插畫結果 (a)
📍 第二層: 插畫結果 (a) + 文字 prompt: a dog with a hat, 4k = 插畫結果 (b)
這樣的概念可以進而轉化到: 能不能一次串起數十層，而人類只要在第一層動動幾筆畫，後續就交給 AI 依序接力畫下去了呢？對這項即時性圖像生成技術有興趣的讀者，你可以在這裡找到我的專案公開程式碼，另外如果是不想自行架設，也可以直接申請 Krea.ai 的試用。我想這會激發你對於 AI 在工作流程的協作有更多想法！
🔬 Hi 產品人 - Dan Hollick
這次在 Tldraw 辦公室進行 Creative coding night 的其中一個收穫就是實際碰到 Dan Hollick 本人了！我是從他的 Twitter 設計原理系列文而認識他的。例如在 Better Gradients 文中 Dan 就用了簡單的插圖解釋漸層色挑選的問題與解法:
後來的這篇 Blending Modes 更在社群上造成了迴響，我總是很常搞混不同的圖片混合模式，相信這也是許多人在操作設計工具時的痛點之一。Dan 在解釋不同 modes 混合的方式外，也畫出如下的操作介面示意圖 (選項有了 Icon 示意之後是不是更好做選擇了呢 ✨)。這些設計原理系列文也啟發我日後在工作上做簡報、資訊呈現的方式呢！
值得一提，Dan 也幫法國新創 Rayon (多人共編室內設計軟體) 進行設計系統的建置、整理，以下是他自己公開的部分設計檔案細節，從中也可以學習到在做編輯器類型產品時，可以採用的設計標注方式。 📐
以上就是本期的設計日常觀察， 歡迎分享給親朋好友，讓更多人訂閱這份設計日常。也可以追蹤 IG: Designtips.today，跟我交流你最近看到的有趣設計故事 🙌。對了，你的小額贊助將會幫助我走得更遠 😇 我們下次見！