---
# System prepended metadata

title: U10-Figma教學

---

> [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 專案**
![](https://i.imgur.com/5n6wzDM.png)

**第 2 章，第 2 單元 - 熟悉 Figma 工作區域與畫板**
![](https://i.imgur.com/co2FxNt.png)

**第 2 章，第 3 單元 - 了解框架(Frame)與群組的差別與用法**
![](https://i.imgur.com/vRcUIRl.png)



**第 2 章，第 4 單元 - 了解形狀、布林群組與鋼筆工具**
![](https://i.imgur.com/Lx98QGo.png)


**第 2 章，第 5 單元 - 掌握文字的各種設定與操作技巧**
![](https://i.imgur.com/4H41a1o.png)

**第 2 章，第 6 單元 - 快速置入圖片、調整與編輯屬性**
![](https://i.imgur.com/vT13m4o.png)

**第 2 章，第 7 單元 - 管理顏色樣式與套用各種效果**
![](https://i.imgur.com/yDY2vLa.png)

**第 2 章，第 9 單元 - 成為 Figma 專家：掌握常見操作技巧與快捷鍵**
![](https://i.imgur.com/344zuWn.png)

**第 2 章，第 10 單元 - 學習控管設計版本與找回失去的檔案**
![](https://i.imgur.com/KNZN05M.png)


**第 3 章，第 1 單元 - 掌握 Figma 神器：Auto Layout**
![](https://i.imgur.com/e0jTktA.png)

**第 3 章，第 2 單元 - 讓設計更一致與整潔：熟悉元件 Component**
![](https://i.imgur.com/lbNnRJ4.png)

**第 3 章，第 3 單元 - 元件進階技巧：變體 Variants**
![](https://i.imgur.com/qsY7ELD.png)

**第 3 章，第 5 單元 - 打造設計系統：建立產品核心樣式**
![](https://i.imgur.com/cKOfuO8.png)

**第 3 章，第 7 單元 - 設計常見 UI 元件：表單**
![](https://i.imgur.com/kOZupEA.png)


**第 3 章，第 15 單元 - Figma 實用 Plugins 與 Community**
![](https://i.imgur.com/ldsSGMh.png)


### **補充-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)