Figma 設計體驗營 – wordpress

資源：六角學院

Figma 設計體驗營 (上)：基本介面 / Frames

這個體驗營介紹了目前討論度很高的介面繪圖軟體「Figma」與它的核心功能：包含 Frame、Auto Layout、Component、Prototype、與 Plugins。最後會讓每個人用 Figma 做出一張自己的自介小卡來互相交流。

01.基本介紹

左上角是基本工具列
最左邊那個是主要選單
Quick Actions – 快捷鍵 Ctrl + /
- Search menus, commands, plugins
Pages 分頁 – 通常會利用分頁來做設計稿的整理
Component 元件
Cover 設計稿封面
Figma 目前沒有中文介面
Layer 圖層
Assets 資產 – 把物件設定成元件，就會整理到資產的欄位
介面中間上方有元件、遮色片功能
Figma 是一個可以線上共同編輯的軟體
語音
Share 分享
Present 呈現
模式切換
- Design 設計
- Prototype 原型
- Inspect 檢視 – 給開發者觀看物件的細節
介面右下角? > Keyboards Shortcuts

02.Frame(框架)

類似 Adobe XD 的畫布工具，比較多的功能。

Frames 是什麼？

設計稿的畫布。

直接拖曳
- 快捷鍵 F or A
預設尺寸
- 快捷鍵 F or A
既有物件
- 快捷鍵 Ctrl + Alt + G

Frames 跟 Group 的差異？

既有物件
- Ctrl + Alt + G
Group
- Ctrl + G
從側欄切換
- 選取該物件後可以從右側側欄找到切換 Frame 跟 Group 的選單

Q、觀察縮放反應，A、B 哪一個才是 Frame？

A：A，只有外框的地方在縮放，裡面的物件沒有在改變。

Frames 的應用，Frame 包 Frame

直接拖曳
- 要確認 Frame 產生藍色的邊框，拖曳的 Frame 名稱也消失
忽略 Frame
- 快捷鍵 space
放入較小的 Frame
- 快捷鍵 Ctrl

clip content – 就是把外層的物件進行一個裁切的效果。

Frames 的應用，Constraints

調整內層物件
- 可以點開下拉式選單來設定或是也可以直接點擊左側區塊來調整
以外層為基準
- 外層尺寸調整時，內層物件會以外層為基準來套用 Constraints 的設定

外層一定要是Frames 的狀況下才能使用 Constraints。

Q、什麼情境要使用 Frame 而不是 Group？

答：B

可以依照習慣選擇要使用 Frame 或 Group 大部分的情況可以優先使用 Frame

Frames 的應用，Clip Content

裁切內容 – Clip content

圖片
不對稱的裝飾
懸浮定位

Clip Content，裁切圖片的三種方式

Frame Clip – 設定成 Frame 後，開啟 Clip Content
Fill image – 快捷鍵 Ctrl + Shift + K
Mask – 快捷鍵 Ctrl + Alt + M

問題提問

物件雙擊後藍色斜線代表進入編輯模式
物件放到後面 – 快捷鍵 Ctrl + [
放大介面 – Ctrl + Alt + =
Clip Content 是 Frame 的預設功能
Image – fill、fit、crop的使用，最常使用 fill、再來是 crop
Export檔案給工程師需要注意什麼

Figma 設計體驗營（中）：Auto Layout / Components

03.Auto Layout

Auto Layout，怎麼畫一個按鈕

舊方法：新增一個矩形→新增按鈕文字→調整樣式與間距

套用 Auto Layout – 快捷鍵 shift A

不需要太過糾結該用什麼方式繪製，只要最後呈現的成果有符合需求就好。

Auto Layout，排列方向與間距

Auto Layout，內間距與定位

Auto Layout，新增與調整

Space Between，均分間距

Resizing，尺寸適應

Auto Layout，巢狀結構

Q1、要怎麼讓圖片在調整卡片高度時自動適應高度？

A：設定 Resizing 成 Fill Container
B：設定 Constraints 成 Top and bottom

答：A因為外層現在是套用 Auto Layout 的狀況，所以使用A的方式才是可行的。使用 Frame 的狀況下，B的方式也是可以使用。

Q2、要怎麼讓按鈕在調整卡片寬度時維持置中？

A：設定 Resizing 成 Fill Container
B：設定 Auto Layout 對齊點為置中

答：B比較快速也比較容易。A比較複雜且效果有所不同。兩者都有維持置中的效果。

Q3、要怎麼調整 icon 的順序到文字段落之上？

A：選取到 icon 之後拖曳
B：選取到 icon 之後案方向鍵

答：A、B 都是可以的。

Q4、要怎麼讓三個 icon 平均坐落在卡片的左中右？

A：調整 icon 之間的間距
B：調整對齊方式成 Space Between

答：B，使用一些設定就可以。

Auto Layout 初學時有點難理解，掌握了之後能夠省去超多設計調整的時間。

Smart Selection，簡易排版

04.Components

Components，常用元件

設成 Component
- 快捷鍵 Ctrl + Alt + K
同時設定多個
- 將要設定成 Component 的物件都全選起來之後，透過頂部的選單來設定

Components，instance 連動分身

覆寫 Override
- 可以重置 Override，或是覆寫到 Main Component 上，instance 除了不能新增基本上什麼都能調整
解散連動 Detach
- 快捷鍵 Ctrl + Alt + K

Q1、Instance 不能額外加入物件，那能刪除嗎？

答：A，看起來被刪除但其實沒有被刪除。

Components，切換

Components，Varriants 變體

Components，Library 資料庫

Assets
- 快捷鍵 Shift + i
Team Library
- 付費功能，也必須把要匯出成 Library 的檔案先移到 Team 裡才能共用
啟用與更新
- 匯出之後可以在同個 Team 裡面的啟用，若有調整的元件也能夠同步更新

Style，Color

新增樣式
- 如果相同的顏色很常使用的話就可以設定 Color Style，之後再套用或調整上都會更方便
命名決定分類
- 在 Figma 內，Component、Style 等都可以透過「/」來建立資料夾分類
套用樣式
- 新增的樣式都會統整在 Style 的 icon 裡可以快速套用或修改

Q、我現在要新增一個「顏色樣式」，該點擊哪個+號？

答：B，先點 Fill 選單進入 Color Styles 再點選+來新增顏色樣式。

Style，Font&Effect

文字樣式不含顏色
- 文字的 Style 並不包含顏色，對齊方式等等設定，在使用上會更靈活。
可包含多個效果
- 效果可以一直疊加，也可以將所有疊加的效果存成同一個樣式
快速套用相同樣式
- Ctrl + Alt +C 加上 Ctrl + Alt + V

Style，快速套用相同樣式

Q、剛剛套用的樣式有 win 的快捷鍵嗎？

答：有，不管是windows還是 mac 都是有快捷鍵的。

Q、Master 只會留在原處嗎？

答：通常會把它移到別的頁面，新增一個 components page 把常用元件移到該頁面，對常用元件的物件案右鍵點選 Move to page 到 component page，把常用元件放在同一個頁面做管理。

Figma 設計體驗營 (下)：Prototype / Plugins / 自介小卡

05.Prototype

Prototype，動畫要素

Prototype，動畫設定

拖曳設定
- 選中一個物件後，將游標移動到右側的圖點點擊並拖曳到目標 Frame 就可以新增動畫了
側欄設定
- 較細節的動畫內容都要從這裡調整，選中的是 Frame 時也可以再套用 Overflow Scrolling 的效果
預覽設定
- 沒有選取物件時可以調整預覽時的裝置尺寸與背景顏色