# 快速搞懂FIGMA(定期更新中)

>此版本僅限分享使用，目前尚未添加動畫、模型製作等方法，待日後繼續更新
HACK.MD可以當作筆記網站蒐藏起來，永久觀看以備不時之需!!!

官方下載網址：https://www.figma.com/
收費標準與價格：https://www.figma.com/pricing/
應用裝置、手機app下載連結：https://www.figma.com/downloads/

### 1. 了解FIGMA
+ Figma 有免費、專業和企業三種方案
+ 免費方案在同個團隊裡，最多只能有兩個共同編輯人、最多設立三個專案、30天版本歷史紀錄，無限的雲端空間。
+ 付費方案分別為每位編輯者每月 $12 和 $45
+ 注意共享專案時，如果被邀請的編輯者沒有付費帳號，也會被算入付費人數

+ Figma 支援多人同時編輯同一個專案
+ 可以邀請他人查看、編輯、留言等
+ 可以提高設計效率和質量

> 與ADOBE XD的比較如下
>
> + 但我個人覺得FIGMA最直接推薦的原因有三:
> 1. 只要有網址就能觀看或編輯；所有具有權限的使用者都能做觀看，不用一直互傳檔案，省掉很多傳輸時間的成本(xd檔案有時候檔案太大傳很慢，figma一個網址就解決了)
> 2. 插件便捷好用；xd的插件必須是最新版才能用，而且有些過時且老舊，但figma沒有這個問題，甚至還有fontawesome
> 3. figma不只有做ui的功能，還有心智圖、創意發想的功能，另外還有線上評論的功能，要改什麼東西客戶可以直接留言評論說要改那些地方，直觀又省時!
> + 詳細比較如下圖
> 

### 樣式設定(Style)

#### 顏色建立
|點擊4個小點點 | 點選你要的顏色 | 按右上角的+ | 確實命名按建立 |
| -------- | -------- | -------- |-------- |
|| |  |  |
#### 文字
|設定好的文字 |按+號可以建立樣式 | 斷開連結後可以直接編輯 | 詳細的編輯面板 |
| -------- | -------- | -------- |-------- |
||||

文字的功能面板雖然強大，但針對不斷句的行高還需要裝插件才能調整
常見問題:
Q1. 長寬容易跑掉?自動寬/自動高/自訂長寬(由左至右) → 
Q2. 湖法根據字元對齊 → 
Q3. 如何表示文字省略 → 

### 學會快捷鍵(問題排解，一律使用英文輸入法)
> 學會FIGMA第一步驟是記憶或設置快捷鍵。這能幫助我們節省大量的時間在使用設計工具上，雖然基本操作跟AI或一般快捷鍵很像，但還是要特別注意常用的快捷鍵歐~

#### 快捷鍵大全，按下【Shfit+Ctrl+?】

#### 我最常用快捷鍵:
| 編號 | 快捷鍵 | 作用 |
| -------- | -------- | -------- |
| 01 | Shift+G | (顯示/隱藏格點) |
| 02 | Shift+R |(顯示尺標，直接拉參考線用的) |
| 03 | Ctrl+] | (移至上層) |
| 04 | Ctrl+[ | (移至下層) |
| 05 | ] | (移至最上層) |
| 06 | [ | (移至最下層) |
| 07 | Ctrl+D | (製作重複物件時可以用) |
| 08 | Ctrl+E | (輸出畫布) |
| 09 | Shift+1 | (放大到融入所有畫布) |
| 10 | 點選物件+Shift+2 | (放大到該物件) |
| 11 | Z+框選物件 | (放大到該選取物件) |
| 12 | Space | (空白鍵移動) |

#### Tools工具快捷鍵
| 編號 | 快捷鍵 | 作用 |
| -------- | -------- | -------- |
| 01 | V | 移動 |
|02|F |畫布Frame
|03|P| 鋼筆
|04|I| (取色器)
|05|Shift + P| 鉛筆
|06|T |文字
|07|R |矩形
|08|O |圓形
|09|L |直線
|10|Shift + L| 箭頭
|11|C |添加評論
|12|S| 切割

#### View圖像快捷鍵
| 編號 | 快捷鍵 | 作用 |
| -------- | -------- | -------- |
|01|Shift + R |尺標
|02|Shift + O |顯示線框
|03|Ctrl + Shift + L| 物件鎖定
|04|Alt + 1 |切換到左側圖層面板
|05|Alt + 2 |切換到左側組件面板
|06|Alt + 8 |切換到右側設計面板
|07|Alt + 9 |切換到右側原型面板
|08|Alt + 0 |切換到右側程式碼面板

#### Zoom畫布快捷鍵
| 編號 | 快捷鍵 | 作用 |
| -------- | -------- | -------- |
|01|Space + |滑鼠 拖動畫布
|02|Ctrl + + |放大
|03|Ctrl + - |縮小
|04|Ctrl + 0 |畫布放大到100%
|05|Shift + 1 |縮放至螢幕合適大小
|06|N |切換畫布(只有橫列)
|07|Shift + N |切換畫布

#### Text文字快捷鍵
| 編號 | 快捷鍵 | 作用 |
| -------- | -------- | -------- |
|01|Ctrl + B |粗體字
|02|Ctrl + U |底線
|03|Ctrl + K |建立Link
|04|Ctrl + Shift + X |刪除線
|05|Ctrl + Shift + 7 |條列式(1.)
|06|Ctrl + Shift + 8 |條列式(點點)
|07|Ctrl + Alt + L |文字靠左
|08|Ctrl + Alt + T |文字置中
|09|Ctrl + Alt + R |文字靠右
|10|Ctrl + Alt + J |文字上下左右置中
|11|Ctrl + Shift + < OR > |文字放大縮小
|12|Alt + < OR > |文字間距調整
|13|Shift + Alt + < OR > |文字字高調整

### 畫布(Frame)
快捷鍵:F
>Frame 是一個工作區域，可以裝載所有元素

點選畫布名稱即可調整、操作畫布
輸出時可以點選畫布後，右側選單看到最後一欄即可輸出
建議PNG、JPG尺寸*1即可
### 群組(Group)
快捷鍵:Ctrl+G(建立群組)/Ctrl+Shift+G(解散群組)
>Group 則是將多個元素組合在一起

### 字體(Fonts)
>Figma 支援使用本地電腦上安裝的字體

### 原型(Prototype)
如何打開原型?請點擊右上方的播放鍵即可
快捷鍵:Alt+9(設定原型的版面)
>Figma 可以製作可點擊的互動式原型，可以設定元素之間的跳轉和過渡動畫、可以直接分享原型給他人查看和測試

### 資產(Asset)*
>資產會存放已經存為組件的物件，同理也可以存取他人已經製作好的物件
做設計系統的通常會下在GOOGLE的Material design3 裡面就有做好成套的設計系統，只要微調後就能快速做好ui

常用得功能:文字、顏色、圖片、組件

### 使用自動佈局(Auto layout )*
快捷鍵:Shift+a(建立自動佈局)、Alt+Shift+a(取消自動佈局)
> 何謂自動佈局?Auto Layout 可以自動調整 Components 的位置和大小，也能在右側面板設定padding、margin、flex-direction。

### 組件(Component)*
快捷鍵:Ctrl+alt+k
> 何謂組件?可以建立可重複使用的設計元素；類似群組，但差在於組件只需做一次修改，即可將所有被複製出來的組件做修改(牽一髮動全身的概念)，大幅度省去調整所有內容的時間。
常用時機:設計header、footer、right box、icon、list ......etc
需要注意:未來在更動時務必向源頭做更改，否則

### 插件(Plugin)*
> 何謂插件?Figma 插件是一種擴展 Figma 功能的應用程式。它們可以讓使用者在 Figma 中執行各種超出核心功能的操作。插件提供了額外的工具、自動化功能和自訂選項,可以增強設計流程並提高工作效率(有些需要付費的工具就要特別注意)。

開啟方式:點擊右鍵 → Plugins → Manage plugins...

#### 推薦插件
1. fontawesome(icon)
2. Unsplash(高清圖片)
3. Map maker(好用的地圖產生器)
4. Blobs — 圓形圖案產生器
5. Get waves — 曲線圖產生器
6. oblique — 立體感產生器
7. Text Line Height Fix(調整行高)
8. Noise & Texture(造點，產生質感)
9. Beautiful Shadows(美麗的陰影)
10. Confetti(隨機圖樣背景)
11. Smart Text(標明資訊，如色票)
12. Figma Measure(標明尺寸和間距)

### Figma製檔或使用注意事項*
>Figma功能方常強大，但在應用面需要注意以下幾點，就能順利使用檔案中的設計稿並了解設計規格或是直接編輯，以後跟其他設計師合作時就不用煩惱囉~~

### 網站分享:

**網站**
+ Figma社區 - 可以看別人做出什麼樣的新奇樣式 - https://www.figma.com/community
+ Designmodo - 提供詳細的 Figma 教程和設計指南 https://designmodo.com/website/website-design/

**YouTuber:**
+ figma - https://www.youtube.com/@Figma/playlists
+ DesignCourse - 擅長製作 Figma 教學影片的頻道 - https://www.youtube.com/@DesignCourse
+ Flux - 分享 Figma 技巧和設計靈感的頻道 -https://www.youtube.com/@FluxAcademy/videos
+ Figma Essentials - 專注於 Figma 基礎教程的頻道
+ 恆恆戰神 - https://www.youtube.com/@henghenggodofwar
+ Shmelt studios - https://www.youtube.com/@shmeltstudios

**Instagram 創作者:**
+ @figmadesign - Figma 官方 Instagram 帳號
+ @uiuxtrend - 分享 Figma 設計靈感和教程的帳號
+ @figmatips - 提供 Figma 使用技巧的帳號