Figma 完整軟體教學 (2026) • Figma 教學

Video Description

這集是完整的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教學 #互動設計