# 產品設計實戰：用Figma打造絕佳UI/UX (筆記)
###### tags:`設計` `產品設計實戰：用Figma打造絕佳UI/UX`

[產品設計實戰：用Figma打造絕佳UI/UX](https://hahow.in/courses/5ee4d65789dc7e4854909ba1/main)
講師:Simon Lin

ux使用者體驗
ui使用者介面
### 第 1 章，第 1 單元 - UI/UX 設計簡介與核心觀念
[給UX學習者的入門指南(上) — UX的起源](https://medium.com/as-a-product-designer/%E6%89%80%E4%BB%A5-%E4%BD%A0%E6%83%B3%E5%AD%B8ux-%E4%B8%8A-ux%E7%9A%84%E8%B5%B7%E6%BA%90-c637f33f86a4)
[給UX學習者的入門指南(中) — 了解UX與UCD](https://medium.com/as-a-product-designer/%E6%89%80%E4%BB%A5-%E4%BD%A0%E6%83%B3%E5%AD%B8ux-%E4%B8%AD-%E4%BA%86%E8%A7%A3ux%E8%88%87ucd-cf60ae775e1d)
[給UX學習者的入門指南(下) — UX所涵蓋的領域](https://medium.com/as-a-product-designer/%E7%B5%A6ux%E5%AD%B8%E7%BF%92%E8%80%85%E7%9A%84%E5%85%A5%E9%96%80%E6%8C%87%E5%8D%97-%E4%B8%8B-ux%E6%89%80%E6%B6%B5%E8%93%8B%E7%9A%84%E9%A0%98%E5%9F%9F-20305873727)
### 第 1 章，第 2 單元 - 熟悉常見的產品開發流程
[敏捷式開發(Agile)、瀑布式開發(Waterfall) 、敏捷式UX、Lean UX。兜幾？](https://medium.com/uxeastmeetswest/%E6%95%8F%E6%8D%B7%E5%BC%8F%E9%96%8B%E7%99%BC-agile-%E7%80%91%E5%B8%83%E5%BC%8F%E9%96%8B%E7%99%BC-waterfall-%E6%95%8F%E6%8D%B7%E5%BC%8Fux-lean-ux-%E5%85%9C%E5%B9%BE-7f510cdd5fae)
[LEAN UX – 運用敏捷式開發原則於使用者體驗設計上](https://designtongue.me/lean-ux-%e9%81%8b%e7%94%a8%e6%95%8f%e6%8d%b7%e5%bc%8f%e9%96%8b%e7%99%bc%e5%8e%9f%e5%89%87%e6%96%bc%e4%bd%bf%e7%94%a8%e8%80%85%e9%ab%94%e9%a9%97%e8%a8%ad%e8%a8%88%e4%b8%8a/)

### 第 1 章，第 3 單元 - 產品(UI/UX)設計師需要具備的能力
[淺談產品設計師的三大基本功](https://medium.com/as-a-product-designer/%E6%B7%BA%E8%AB%87%E7%94%A2%E5%93%81%E8%A8%AD%E8%A8%88%E5%B8%AB%E8%A6%81%E6%9C%89%E7%9A%84%E4%B8%89%E5%A4%A7%E5%9F%BA%E6%9C%AC%E5%8A%9F-9c391a7c71e8)
[這是我認為最好的 UX 自學方式！零基礎半年內成為 UI UX 設計師的故事](https://ux-master.com/blog/self-taught-ui-ux-designer/#jian_yi_yi_xian_jian_gou_xi_tong_hua_zhi_shi_zai_tian_bu_sui_pian_hua_zhi_shi)

### 第 1 章，第 4 單元 - 產品(UI/UX)設計師的設計流程與工作內容

### 第 1 章，第 5 單元 - 熟悉設計原則與設計模式

### 第 1 章，第 6 單元 - 了解設計系統與常見 UI 元件

### 第 1 章，第 7 單元 - UI 設計基礎：視覺設計與美感
對比
一致性
### ==第 1 章，第 8 單元 - UX 設計工具基礎==
## 第 2 章
### ==第 2 章，第 1 單元 - 課程概覽：開始第一個 Figma 專案==
Figma 官方網站：https://www.figma.com/
Figma 桌面版 App 下載：https://www.figma.com/downloads/
免費下載https://www.figma.com/community
插鍵https://www.figma.com/community/plugins
### 第 2 章，第 2 單元 - 熟悉 Figma 工作區域與畫板

### 第 2 章，第 3 單元 - 了解框架(Frame)與群組的差別與用法
### 第 2 章，第 4 單元 - 了解形狀、布林群組與鋼筆工具
### 第 2 章，第 5 單元 - 掌握文字的各種設定與操作技巧
### 第 2 章，第 6 單元 - 快速置入圖片、調整與編輯屬性
### 第 2 章，第 7 單元 - 管理顏色樣式與套用各種效果
### 第 2 章，第 8 單元 - 不可不知的響應式設計：Constraint 介紹
### 第 2 章，第 9 單元 - 成為 Figma 專家：掌握常見操作技巧與快捷鍵
### 第 2 章，第 10 單元 - 學習控管設計版本與找回失去的檔案

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

---

### [掌握 Figma Auto Layout 技巧 | Figma 教學 | Figma Tutorial 2020](https://www.youtube.com/watch?v=JR4N7cSJ54g&list=PLt7CpluC3aQmAxeLqjMPzXBkXdmVFEJcL&index=2&t=127s)
==frame== 容器 井字型icon
> 按f新增frame按t新增文字
>

==Auto Layout== 自動排版的容器 兩個長方形icon
往右
往下

> shift+a變Auto Layout
> alt+shift+a變frame

`}|{`: 內距`回`: 外距`四`: 對齊方式packed緊貼在一起spaceBetween均分

Resixing
* fixed width固定寬度 文字會超出去
* hugcontents符合容器寬度 ==外框==
* fill container自動填滿寬度 ==內框==換行

> ctrl+d複製排在右邊
> ctrl+r命名

fill底線
### [掌握 Figma 元件(Component)操作技巧 | 產品設計實線上課程 | Figma 教學](https://www.youtube.com/watch?v=_yn93d-yM4Q&list=PLt7CpluC3aQmAxeLqjMPzXBkXdmVFEJcL&index=3)

==component元件==
* 提高設計產品體驗一致性
* 提高設計效率(同步修改/重複使用)
* 降低與工程師的溝通成本
> ctrl+shift+k產生元件
> ctrl+shift+b解除元件

==主要元件main component== 四個菱形icon
==分身元件instanceu== 一個菱形icon
一個auto layout只能放一個主要icon其他要用分身icon
命名原則:使用/分類