設計系統: 字體 (Design System: Typography) #1 - 設計概念 • UI/UX 教學 (含CC字幕)
1K views · 2024-12-07
UI DesignInteraction & UX
這是第一集在『字體設計系統 (Design System: Typography) 』的教學影片。我們這集先來看設計這樣字體系統的概念，主要是來看利用 Variables 變數，來制定不同的資料庫，形成不同字體層級，然後製作成一套設計系統。
設計概念圖: https://www.figma.com/design/k9Oa4lfB82sq46YxURbNk0/DS-%E5%AD%97%E9%AB%94%E8%A8%AD%E8%A8%88%E7%B3%BB%E7%B5%B1-Typography-%E6%A6%82%E5%BF%B5%E5%9C%96?node-id=18-2&t=JWm7ftJIY63ZWS6x-1
[章節]
0:00 主題介紹
0:27 Variables 變數
3:31 Create Variables 建立變數
4:44 字體系統流程簡介
7:38 Variable Collection
9:02 Variable: 字體 (Google Fonts)
10:48 Variable: 大小 (Font Size/Type Scale)
12:18 Variable: 行間距/字間距/段落間距 (WCAG 1.4.12)
16:05 Variable → Typography
16:23 響應字體組
17:30 Figma跟Code命名
18:18 Variable: 粗細
21:16 結尾
#字體設計系統 #DesignSystem #Typography #設計系統 #Variable設計 #Figma變數
設計概念圖: https://www.figma.com/design/k9Oa4lfB82sq46YxURbNk0/DS-%E5%AD%97%E9%AB%94%E8%A8%AD%E8%A8%88%E7%B3%BB%E7%B5%B1-Typography-%E6%A6%82%E5%BF%B5%E5%9C%96?node-id=18-2&t=JWm7ftJIY63ZWS6x-1
[章節]
0:00 主題介紹
0:27 Variables 變數
3:31 Create Variables 建立變數
4:44 字體系統流程簡介
7:38 Variable Collection
9:02 Variable: 字體 (Google Fonts)
10:48 Variable: 大小 (Font Size/Type Scale)
12:18 Variable: 行間距/字間距/段落間距 (WCAG 1.4.12)
16:05 Variable → Typography
16:23 響應字體組
17:30 Figma跟Code命名
18:18 Variable: 粗細
21:16 結尾
#字體設計系統 #DesignSystem #Typography #設計系統 #Variable設計 #Figma變數