---
tags: 軟體工程師體驗營 - 2023
---
# 🗞 Figma 線上標示文件教學

請點擊 Figma[線上標示文件](https://www.figma.com/file/rX9YdVutqj9jF0kw72SAKi/2024ver.-%E9%AB%94%E9%A9%97%E7%87%9F%E8%A8%AD%E8%A8%88%E7%A8%BF?type=design&node-id=202-2&mode=design&t=3MNM4QfASmIuHoac-0)，依照下方指示來檢視。

## 如何檢視標示文件

### 步驟一：必須先註冊 Figma 服務，如下圖


### 步驟二：登入後，就可以進行檢視模式

## 切換點擊元素、拖動模式

* 點擊元素模式：能點擊每個元素檢視詳細資訊
* 拖動模式：可以移動整個設計稿


## 快捷鍵 (Windows / Mac)
- Ctrl/CMD + 滑鼠滾輪：放大縮小畫面範圍
- 空白鍵 + 滑鼠左鍵：白手出現可以拖曳畫面
- Shift+Ctrl+3 / CMD + Y：可以看到圖層結構
- Shift+Ctrl+4 / Control + G ：顯示關閉格線

## 感覺 Size 好像缺了點
### 可能是右上角沒有顯示 100%
點擊介面右上角進行調整

## 抓元素跟元素之間的距離
1. 點選元素後，按住 alt 再點其他的就可顯示
2. 或點選一個元素，再把滑鼠移動到想測距離的元素上


## 下載圖片

點擊元素後，點選右側對應控制列 > export 面板 > 選取輸出圖片格式


## 下載整張設計稿
點選左上角控制項 > File > Export 後，點選右側你想下載的整張圖示。


>⚠ 注意：建議圈選幾張依序上傳，避免一口氣下載多張瀏覽器會卡

## 觀看文字大小與行距
點選元素後，就可從右側觀看資訊


## 觀看動態效果

### 步驟一：點擊右上角紅框處

### 步驟二：就會進入 prototype 模式，可 hover 、click 觀看互動效果


## 留言在設計稿上
如果你對於設計稿有疑問，可以在設計稿上留言。設計師也會收到通知，並能直接回覆你喔！

### 步驟一：點擊右上角紅框處的留言icon

### 步驟二：你的游標會變成pin的樣子，意思就是進入 comment 模式。點擊設計稿上有疑問的地方，寫下你的疑問，並點擊post就完成囉！