Figma 完整軟體教學 (2026) • Figma 教學
23.8K views · 2026-02-06
UI Design
這集是完整的Figma軟體使用的教學影片。目標是整合一個單一的學習源頭，讓第一次接觸Figma的人能夠快速上手。
錄這集的時候是2026年的一月底，所以以後觀看的話，介面或許會有些不同。
____________________________________________________
【參考連結】
Figma: https://www.figma.com/
WCAG無障礙指南: https://www.w3.org/WAI/standards-guidelines/wcag/
____________________________________________________
【章節】
00:00 Figma 使用概念
03:11 Figma 付費 & 使用安裝
04:18 建立檔案 & 工作板塊
06:36 Present觀看模擬
07:32 Tool: Move • Hand • Scale
10:15 Tool: Section • Slice
14:30 Tool: Rectangle
15:05 Tool: Line & Arrow
16:33 Tool: Ellipse • Polygon • Star
18:31 Tool: Image • Video
18:53 Image: Fill • Fit • Crop • Tile
22:08 Tool: Pen & 向量跟點陣
25:35 Pen: Move • Lasso • Shape Builder
28:12 Pen: Paint • Bend • Cut • Variable Width
32:20 Pencil
33:42 Text & Typography
40:05 Comment • Annotation • Measurement
45:05 Actions
45:47 Position: Align • Constraints • Flip & Rotate
51:06 Layout & Auto Layout
52:30 Auto Layout: Hug & Fill
53:57 Auto Layout: Min & Max-width
55:19 Auto Layout: Alignment
56:44 Auto Layout: Fixed width
57:04 Auto Layout: Paddings
58:45 Auto Layout Settings: Stroke
59:38 Auto Layout Settings: Canvas Stacking
1:00:09 Auto Layout Settings: Align Text Baseline
1:01:15 Clip Content & Scroll
1:03:13 Auto Layout: Grid
1:09:27 Appearance
1:11:11 Blending Mode
1:11:52 Corner Radius
1:12:58 Fill: Color Contrast
1:15:51 Fill: Color Mode
1:16:22 Fill: Gradient
1:21:21 Stroke & Border
1:23:22 Effects: Drop Shadow
1:24:28 陰影跟高度關係
1:26:02 Effects: Inner Shadow
1:26:14 Effects: Layer Blur
1:26:18 Effects: Background Blur
1:27:17 Effects: Glass
1:28:17 Effects: Noise
1:28:33 Effects: Texture
1:28:40 結合Effects
1:28:56 Styles: Effect
1:29:53 Styles: Color
1:30:51 Styles: Text
1:31:28 Styles: Layout Guide
1:35:28 Export
1:35:48 Export: Scaling
1:36:41 Export: 檔案種類
1:37:00 Export: Ignore Overlapping Layers
1:37:53 Variable
1:38:35 Variable: Collection
1:39:13 Variable: Mode (Light • Dark Mode)
1:42:27 Variable: Number
1:44:08 Variable: String
1:45:39 Variable: Boolean
1:46:36 Variable: Scope
1:50:29 Design System
1:51:59 Variable: Alias
1:52:59 Design System資源
1:55:18 Interactions
1:55:25 Trigger: On Click
1:56:44 Trigger: On Drag
1:58:11 Trigger: While Hover & While Pressing
1:56:44 Trigger: On Drag
1:59:19 Trigger: Key
2:01:50 Trigger: Mouse Enter & Leave
2:05:47 Trigger: After Delay
2:06:53 Action: Scroll To
2:07:59 Action: Open Link
2:08:26 Action: Set Variable
2:09:22 Action: Set Variable Mode
2:10:33 Action: Conditional
2:12:37 Action: Open • Swap • Close Overlay
2:15:11 Scroll Overflow: Horizontal & Vertical
2:16:57 Scroll Overflow: Both Directions
2:17:57 Scroll Position: Fixed
2:18:35 Scroll Position: Sticky
2:20:15 Flow Starting Point
2:21:10 Component
2:23:03 Variant
2:24:02 Text Property
2:25:40 Boolean Property
2:26:09 Instance Swap
2:28:42 Nested Instance
2:29:57 Snap to Pixel Grid
2:30:49 Snap to Object
2:31:14 Snap to Geometry
2:32:23 Publish & Update
2:34:41 Sharing
2:35:39 結尾
____________________________________________________
支持我在Ko-fi (美金單位): https://ko-fi.com/alandesign
我的IG: https://www.instagram.com/yt.alan.design/
#Figma教學 #UIUX教學 #互動設計
錄這集的時候是2026年的一月底，所以以後觀看的話，介面或許會有些不同。
____________________________________________________
【參考連結】
Figma: https://www.figma.com/
WCAG無障礙指南: https://www.w3.org/WAI/standards-guidelines/wcag/
____________________________________________________
【章節】
00:00 Figma 使用概念
03:11 Figma 付費 & 使用安裝
04:18 建立檔案 & 工作板塊
06:36 Present觀看模擬
07:32 Tool: Move • Hand • Scale
10:15 Tool: Section • Slice
14:30 Tool: Rectangle
15:05 Tool: Line & Arrow
16:33 Tool: Ellipse • Polygon • Star
18:31 Tool: Image • Video
18:53 Image: Fill • Fit • Crop • Tile
22:08 Tool: Pen & 向量跟點陣
25:35 Pen: Move • Lasso • Shape Builder
28:12 Pen: Paint • Bend • Cut • Variable Width
32:20 Pencil
33:42 Text & Typography
40:05 Comment • Annotation • Measurement
45:05 Actions
45:47 Position: Align • Constraints • Flip & Rotate
51:06 Layout & Auto Layout
52:30 Auto Layout: Hug & Fill
53:57 Auto Layout: Min & Max-width
55:19 Auto Layout: Alignment
56:44 Auto Layout: Fixed width
57:04 Auto Layout: Paddings
58:45 Auto Layout Settings: Stroke
59:38 Auto Layout Settings: Canvas Stacking
1:00:09 Auto Layout Settings: Align Text Baseline
1:01:15 Clip Content & Scroll
1:03:13 Auto Layout: Grid
1:09:27 Appearance
1:11:11 Blending Mode
1:11:52 Corner Radius
1:12:58 Fill: Color Contrast
1:15:51 Fill: Color Mode
1:16:22 Fill: Gradient
1:21:21 Stroke & Border
1:23:22 Effects: Drop Shadow
1:24:28 陰影跟高度關係
1:26:02 Effects: Inner Shadow
1:26:14 Effects: Layer Blur
1:26:18 Effects: Background Blur
1:27:17 Effects: Glass
1:28:17 Effects: Noise
1:28:33 Effects: Texture
1:28:40 結合Effects
1:28:56 Styles: Effect
1:29:53 Styles: Color
1:30:51 Styles: Text
1:31:28 Styles: Layout Guide
1:35:28 Export
1:35:48 Export: Scaling
1:36:41 Export: 檔案種類
1:37:00 Export: Ignore Overlapping Layers
1:37:53 Variable
1:38:35 Variable: Collection
1:39:13 Variable: Mode (Light • Dark Mode)
1:42:27 Variable: Number
1:44:08 Variable: String
1:45:39 Variable: Boolean
1:46:36 Variable: Scope
1:50:29 Design System
1:51:59 Variable: Alias
1:52:59 Design System資源
1:55:18 Interactions
1:55:25 Trigger: On Click
1:56:44 Trigger: On Drag
1:58:11 Trigger: While Hover & While Pressing
1:56:44 Trigger: On Drag
1:59:19 Trigger: Key
2:01:50 Trigger: Mouse Enter & Leave
2:05:47 Trigger: After Delay
2:06:53 Action: Scroll To
2:07:59 Action: Open Link
2:08:26 Action: Set Variable
2:09:22 Action: Set Variable Mode
2:10:33 Action: Conditional
2:12:37 Action: Open • Swap • Close Overlay
2:15:11 Scroll Overflow: Horizontal & Vertical
2:16:57 Scroll Overflow: Both Directions
2:17:57 Scroll Position: Fixed
2:18:35 Scroll Position: Sticky
2:20:15 Flow Starting Point
2:21:10 Component
2:23:03 Variant
2:24:02 Text Property
2:25:40 Boolean Property
2:26:09 Instance Swap
2:28:42 Nested Instance
2:29:57 Snap to Pixel Grid
2:30:49 Snap to Object
2:31:14 Snap to Geometry
2:32:23 Publish & Update
2:34:41 Sharing
2:35:39 結尾
____________________________________________________
支持我在Ko-fi (美金單位): https://ko-fi.com/alandesign
我的IG: https://www.instagram.com/yt.alan.design/
#Figma教學 #UIUX教學 #互動設計