設計系統: 字體 (Design System: Typography) #2 - Figma實作 • UI/UX 教學
1.8K views · 2024-12-08
UI DesignInteraction & UX
延續第一集講到字體設計系統的概念，這集我們來看如何在Figma裡做出一套這樣的設計系統。這集是利用Figma version 124.6.5 時候的版本 (Dec. 2024)。
我們會看到如何利用Variables，並連結設定到不同的字體上。這些字體會用Style的方式做出不同的層級，最後我們會把這些字體樣式輸出並利用在不同的設計文件上。
其中我們也會看到使用Variable的Scope來制定我們的變數Variable出現的地方，達成我們設計的精簡準確性。
設計檔案: https://www.figma.com/design/tqbnkd1JmeblQageYtNCje/Design-System%3A-Typography-(Alan-Design)?node-id=0-1&t=aVxXvs7dSxFVOpna-1
[章節]
0:00 前言
0:15 建立字體比例 Type Scale
1:44 建立字體樣式
5:43 建立字體設計系統
12:52 利用Scope
13:54 字體設計系統 (繼續)
29:36 輸出 字體設計系統
30:39 輸入 字體設計系統
31:48 更新 字體設計系統
34:19 結尾
#DesignSystem #字體設計系統 #設計系統 #TypographyFigma #TypographySystem #FigmaVariables
我們會看到如何利用Variables，並連結設定到不同的字體上。這些字體會用Style的方式做出不同的層級，最後我們會把這些字體樣式輸出並利用在不同的設計文件上。
其中我們也會看到使用Variable的Scope來制定我們的變數Variable出現的地方，達成我們設計的精簡準確性。
設計檔案: https://www.figma.com/design/tqbnkd1JmeblQageYtNCje/Design-System%3A-Typography-(Alan-Design)?node-id=0-1&t=aVxXvs7dSxFVOpna-1
[章節]
0:00 前言
0:15 建立字體比例 Type Scale
1:44 建立字體樣式
5:43 建立字體設計系統
12:52 利用Scope
13:54 字體設計系統 (繼續)
29:36 輸出 字體設計系統
30:39 輸入 字體設計系統
31:48 更新 字體設計系統
34:19 結尾
#DesignSystem #字體設計系統 #設計系統 #TypographyFigma #TypographySystem #FigmaVariables