本日設計情報｜2026/07/18：Figma×code 用 JSON 契約止血、Lenovo 設計長談 AI 筆電、Tinder 品牌大改版
設計系統的 Figma／code 對不齊問題，靠一份 JSON 契約解決；再看 Lenovo、Tinder、Figma Sightlines、NN/g 四則今日設計情報。
今天 Figma 沒有發新功能，倒是丟出一篇說教味十足的《Sightlines》創刊號——但真正的戲在別處上演。設計師社群把 Figma 與 code 之間那道永遠對不齊的縫，用一份 JSON 契約重新焊過；Lenovo 設計長談起筆電，比較基準從輕薄換成鍵盤是否還有留著的必要；Tinder 找來一位虛構專欄作家，把品牌識別整套重寫；NN/g 則提醒大家，別把每個欄位都塞進下拉選單裡。今天五則，拆的都是系統怎麼撐住——工具、品牌、表單，邏輯出奇一致。
🔥 Figma 和 code 永遠對不上?一份 JSON 契約,把設計系統的「準」找回來
設計系統最尷尬的地方，不在做不出來，在做出來會走鐘。Figma 裡一個按鈕跟 code 裡的按鈕理論上該長一樣，現實是設計師改一邊、工程師改另一邊，兩週後對不上，會議吵的重點不在誰對，是哪一份才算數。UX Collective 這篇提了一個乾脆的解法：別再讓 Figma 或 code 其中一邊當老大，兩邊都從一份 JSON/YAML「契約」自動長出來——按鈕有哪些狀態、吃哪些 token、點下去做什麼，寫死在契約裡，Figma 端靠外掛生成變體，code 端直接吃出型別，誰跟契約對不上就會被抓出來。
真正讓這篇文章值得一讀的是設計顧問公司 Southleft 的 A/B 測試數字：同一支 AI，放牛吃草生 UI，只拿 69 分——自己發明選項、顏色寫死不吃 token、風格照自己喜好改；把契約當規則書丟給它，直接衝到 100 分，遇到系統真的做不到的地方，還會老實說做不到，不會生一個看起來像完成的假貨。AI 開始自己生畫面之後，兩邊各改各的不再只是麻煩，是漏洞。契約沒有創意，但它讓 AI 的創意有邊界可循。
COURSE · 線上課程Figma 全攻略看課程 →Lenovo 設計長:筆電設計不再比薄,比的是要不要鍵盤
Lenovo 硬體設計長 Brian，做過 700 到 800 台筆電設計，接受 Creative Bloq 訪問時說了一句直白的話：「以前想的是怎麼做更薄更輕，現在完全是另一回事，因為我們有機會改變人們每天用電腦的方式。」AI 工具把打字、輸入、等結果這套沿用幾十年的互動邏輯攤在設計師桌上重新檢視——使用者只要表達意圖、AI 就能生出結果，鍵盤跟螢幕的存在理由都得重新算一次。
Lenovo 把賭注押在一個叫 Qira 的個人化平台上，野心是讓硬體、軟體、AI 三邊綁在一起，做出「這台是你的」而非「這台是誰都能用的」體驗。文中提到 2025 年 IFA Berlin 展出的 Auto Twist 概念機，整台可以扭轉變形——聽起來像噱頭，放進「裝置要跟著意圖變形」這個邏輯裡，其實是同一套故事的硬體版本。硬體設計師開始學著算「AI 猜對你要什麼」這道題，重量跟厚度只是其中一項。
AI 覺醒 · 訂閱制AI 覺醒設計應用攻略了解訂閱 →Figma 創刊號 Sightlines:Config 後台,設計主管們在聊什麼
Figma 開了一個新的內容欄目「Sightlines」，第一期直接搬出 Config 2026 幕後的 Leadership Collective 對談，找來 Airbnb、OpenAI、Cisco、Patreon 的設計與產品主管，聊的重點是 AI 讓大家都能自己做原型之後，設計主管還剩下什麼工作。四個共識：基本功沒有貶值，反而更貴；主管們自己也在用初學者心態跟團隊一起動手做原型；AI 讓個人能單打獨鬥，但協作跟批評反而變得更頻繁；輸出被自動化之後，品味成了唯一分不出高下的東西。
Cisco 設計主管 Jeetu Patel 那句話很適合貼在牆上：「設計是向客戶證明你在乎的終極方式，因為你把細節都照顧到了。」這期內容沒有一句在講新工具，講的全是 AI 把產能拉高之後，人到底該留下什麼——這問題比任何一次版本更新都更該被拿出來討論。
COURSE · 線上課程Figma 全攻略看課程 →Tinder 大改版:用一個虛構的專欄作家,把整套品牌識別重寫一次
操刀的是設計工作室 Porto Rocha，這次改版從一個角色出發：一位有 Carrie Bradshaw 氣質的虛構交友專欄作家「T」，整套品牌識別語言圍著這個人格重建。字體上，全大寫的 wordmark 配上一款新的標題襯線體，官方說法是補回品牌柔軟的一面，也帶進大膽跟自信；火焰圖示線條收得更銳利；色盤從單一的紅，拉寬到紅混藍綠的區間，理由是情緒的光譜本來就不只一種。
視覺素材也整套換血——過去 App Store 那種光滑感被拿掉，換成帶顆粒感的傻瓜相機質感跟油畫式插畫，故意做出翻舊相簿的手感。一個交友 App 的改版，通常會被寫成圖示換色、字體變圓這種輕描淡寫的新聞，這次 Porto Rocha 反過來示範：先把品牌的人格寫清楚，字體、色彩、攝影風格才有共同的理由存在，而非各自湊出來的視覺套件。
COURSE · 線上課程Illustrator 攻略看課程 →表單裡的下拉選單,你可能根本不需要
NN/g 這篇算是老問題新提醒：下拉選單是介面設計師的懶人包，選項一多就丟進 dropdown，眼不見為淨，使用者卻要多點一次才看得到選項，操作成本其實更高。文章給了清楚的門檻：少於 5 個選項，直接用單選鈕攤開；超過 15 個，換成可搜尋、可過濾的 combobox；像生日這種使用者早就知道答案的欄位，直接給文字輸入框更快；需要比較差異的場景，比如挑商品規格，用看得到選項的按鈕組，別讓使用者記在腦中比較。
下拉選單真正合理的場地，是 5 到 10 個、彼此差異不大、系統後台需要標準化的資料——換句話說，是例外狀況，非預設答案。這篇文章提醒的重點是，選單這種元件常常省的是設計師的力氣，使用者要多點一次才看得到選項，兩者未必是同一回事。
COURSE · 線上課程Figma 全攻略看課程 →