鐵人檔案
將 UIUX 與前端工程師的雙重角度來撰寫這次主題。
把 Figma 上的設計稿 ，從 design system 到 UI 元件利用 Chakra UI 完成實作，嘗試在30天摸索出視覺系統開發流程，以及分析如何搭配 framer motion 等技術以 React 實作流行的網頁動態特效。
前言 嗨 大家好! 我是 Hugh，一名產品設計師同時喜歡摸索前端技術。和 alphacamp 上認識的朋友組隊參加這次鐵人賽。這次想嘗試結合 UI 和前端的經...
首先，讓專案安裝好 Chakra UI 如果是已經開好專案的項目上可以經過一下操作 第一步 npm install npm i @chakra-ui/react...
事前準備 上篇已經建立好theme.js，本篇開始把基本的 design token 寫進來。 Figma 連結在此 首先把設計稿上顏色寫進 theme 裡。（...
上一篇有提到可以對單一個元件，把我們客製好的顏色傳到 props 裡 withDefaultColorScheme 如果每個按鈕都要使用同樣的主題色，除了一個...
字體在系統化的介面設計中是重要的構成要素之一。取決於 字體家族 fontFamily、字級行高 fontSize LineHeight、字重 fontWeigh...
上篇完成 font family 的設定，今天使用 textStyles 來完成設計稿上的 Typography 設計稿 Text Styles textSty...
Semantic Tokens 語意化的 Token 前些日子完成了部分的 Design System 中的顏色而這些顏色有做到部分程度的語意化，像是 blue...
Chakra UI 有刻好常用 UI 元件，像是 Button、Input 等。 這些元件跟設計稿上多少些許不一樣，但我們不需要從 0 開始打造，一樣用客製主題...
上一篇分析完元件樣式 API ，今天就依照方式來客製化 Button 成設計稿的樣子 Button 設計稿 對照下原本 Default Theme Button...
已經完成 Button 基本樣式 ，還要設定不同狀態的樣式 補充一下 Chakra UI 原本預設的 UI 元件大部分都有選中狀態(focus)的醒目提示，Bu...
