owned this note changed a month ago
Published Linked with GitHub

🗞 Figma 線上標示文件教學

如何檢視標示文件

步驟一:必須先註冊 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 觀看互動效果

Figma 如何觀看 icon 名稱

留言在設計稿上

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

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

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

Select a repo