> [time=Thu, Jun 16, 2022 4:32 PM]

# U10-Figma教學

### **Figma上課教學**
[Figma上課教學檔案連結](https://www.figma.com/file/ztDw2A5RNsQIUaefQxfegm/%EF%BC%B510%E8%B7%A8%E5%85%A5-Figma-%E6%95%99%E5%AD%B8?node-id=27163%3A2161&t=jQ1J9AFJeQt5O2Yg-1)

### **好學校-影片觀看**
[好學校https://hahow.in](https://hahow.in)

**第 2 章，第 1 單元 - 課程概覽：開始第一個 Figma 專案**

**第 2 章，第 2 單元 - 熟悉 Figma 工作區域與畫板**

**第 2 章，第 3 單元 - 了解框架(Frame)與群組的差別與用法**

**第 2 章，第 4 單元 - 了解形狀、布林群組與鋼筆工具**

**第 2 章，第 5 單元 - 掌握文字的各種設定與操作技巧**

**第 2 章，第 6 單元 - 快速置入圖片、調整與編輯屬性**

**第 2 章，第 7 單元 - 管理顏色樣式與套用各種效果**

**第 2 章，第 9 單元 - 成為 Figma 專家：掌握常見操作技巧與快捷鍵**

**第 2 章，第 10 單元 - 學習控管設計版本與找回失去的檔案**

**第 3 章，第 1 單元 - 掌握 Figma 神器：Auto Layout**

**第 3 章，第 2 單元 - 讓設計更一致與整潔：熟悉元件 Component**

**第 3 章，第 3 單元 - 元件進階技巧：變體 Variants**

**第 3 章，第 5 單元 - 打造設計系統：建立產品核心樣式**

**第 3 章，第 7 單元 - 設計常見 UI 元件：表單**

**第 3 章，第 15 單元 - Figma 實用 Plugins 與 Community**

### **補充-iT邦幫忙**

#### 基本工具介紹
[用 Figma 來設計基本 icon 吧！](https://ithelp.ithome.com.tw/articles/10277653)

[透過實作設計一個登入頁面，掌握 Figma](https://ithelp.ithome.com.tw/articles/10278506)

#### Component 介紹
[打造可重覆使用的設計－Figma 的 Component 元件解析](https://ithelp.ithome.com.tw/articles/10279873)
#### Constraints 介紹
[RWD 響應式設計的利器- 理解 Figma 的 Constraints 機制](https://ithelp.ithome.com.tw/articles/10279028)

[實作出能夠拉伸的響應式卡片設計](https://ithelp.ithome.com.tw/articles/10279449)

#### 檔案控管介紹
[檔案歷史紀錄與版本控制](https://ithelp.ithome.com.tw/articles/10280199?sc=iThelpR)
#### Plugin介紹
[我要準時下班- Figma Plugin (上)](https://ithelp.ithome.com.tw/articles/10280672)

[我要準時下班- Figma Plugin (下)](https://ithelp.ithome.com.tw/articles/10281027)

[Figma 中文社区](https://www.figma.cool/plugins/picked)

[Figma 雲端版繁體中文](https://www.minwt.com/webdesign-dev/uiux/23814.html)