技術 Day 6 - 從 Figma 到 Flutter：將設計系統化為 UI 元件

在 Figma 中將設計元素整理成系統與元件後，現在我們要進入更關鍵的一步：將這些視覺藍圖化為實際的 Flutter 程式碼！這不只是將設計稿變成 App 畫面...

技術 Day 5 - 一樣的地方改一次就好：在 Figma 中打造專屬元件庫

在前面幾天，已經完成了 AI 行程規劃 App 的視覺骨架，並將它系統化。今天，就來將他元件化吧！ 有過在設計稿中不斷複製、貼上相同的按鈕、卡片或表單欄位的狀況...

技術 Day 4 - 將視覺骨架化為程式碼：在 Flutter 中實作設計系統

前幾天從使用者痛點出發，用 Stitch Designer 產出了 App 的 UI 初稿，接著在 Figma 上將設計元素系統化，建立了顏色的色階、定義了字體...

技術 Day 3 - 用 Figma 打造設計系統，創造 App 的視覺骨架

前兩天我完成了 App 的 UI 初稿，今天想試著將這些設計系統化。這個過程有助於建立一套完整的設計規範，讓後續的設計和開發更有效率，也能確保 App 整體視覺...

技術 [Day 10] Design System - React Slots (插槽) - 實作

本系列文章會在筆者的部落格繼續連載！Design System 101 感謝大家的閱讀！ 本文同步上傳到筆者的個人部落格，裡面透過 Sandpack 直接...

技術 [Day 9] Design System - React Slots (插槽)

本文同步上傳到筆者的個人部落格，裡面透過 Sandpack 直接編輯程式碼! 什麼是 Slots ? Slots, 也可以稱為插槽, 就是一個預設的區塊 (...

技術 [Day 8] Design System - FocusScope 組件 (二)

本系列文章會在筆者的部落格繼續連載！Design System 101 感謝大家的閱讀！ 前言 在上一篇 FocusScope 中，我們介紹了 FocusS...

技術 [Day 7] Design System - FocusScope 組件

本系列文章會在筆者的部落格繼續連載！Design System 101 感謝大家的閱讀！ 原本今日計畫寫的內容是關於 Design System 文檔建置...

技術 [Day 6] Design System - 專案建置 (二）與 Visually Hidden 組件

本系列文章會在筆者的部落格繼續連載！Design System 101 感謝大家的閱讀！ 前言 在上一章我們設定並介紹了 pnpm, turbo 與 cha...

技術 [Day 5] Design System - 專案建置 (一）

本系列文章會在筆者的部落格繼續連載！Design System 101 感謝大家的閱讀！ 前言 接下來將會介紹如何建置一個 Design System 的...

技術 [Day 4] Design System - Accessibility

本系列文章會在筆者的部落格繼續連載！Design System 101 感謝大家的閱讀！ 前言 Accessibility 又稱 A11y，因為 Acce...