iT邦幫忙

2024 iThome 鐵人賽

DAY 11
0

設計師在交付設計稿時,除了基本架構頁面外,
更多的是需要依據功能陳列畫面、攤出互動細節和流程等輔助工程師開發的呈現(如下圖),
https://ithelp.ithome.com.tw/upload/images/20240923/20166746FIsFVtcals.png
工作中遇過比較資深或從來沒接觸過(也不想) Figma 的的工程師,
會要求我們匯出畫布區上的所有設計畫面成 PDF 檔或 JPG or PNG 圖檔,
但這實在是一件吃力又沒效率的事情,若是遇到需要畫面調整,
就要再全部匯出一次再整理分類檔案,還要通知所有開發相關人員,真的是很崩潰~
因此我們非常鼓勵工程師們直接在 Figma 上看最新的版本,
本篇會介紹畫布區使用小技巧來更快上手 Figma!

畫布區

https://ithelp.ithome.com.tw/upload/images/20240923/20166746o3vMuzcwtn.png
畫布區可以想像成一張無限延伸的圖紙,
面對滿滿的設計畫面,工程師們常常問的問題就是「該怎麼移動畫面?」、「要怎麼放大縮小?」
先談談移動畫面的方式,可以分為三種:

  1. 隨意拖曳畫面:在工具列的章節介紹過點擊工具列的手 Hand Tool 按住滑鼠左鍵即可隨意移動;另一個較便利的用法是按住空白鍵也可以將游標切換成手手再按著左鍵移動,且一放開空白鍵即可恢復成原本的游標。
  2. 垂直移動畫面:用滑鼠滾輪滾動。
  3. 水平移動畫面:按住 Shift 滾動滑鼠滾輪,便可橫向移動畫面。

放大縮小的方式也有三種:

  1. 工具列最左側的數字和百分比符號的下拉選單,可以透過最上方的輸入框調整縮放的比例,下面也有一些預設的數值供選擇。
  2. Command + 滑鼠滾輪和 Control + 滑鼠滾輪皆可縮放畫面
  3. 按住 Z 會出現放大游標,再點擊滑鼠左鍵可放大畫面,縮小則是按住 Z + option,與 Adobe 繪圖軟體的縮放方式相同。

大家可以根據個人習慣來使用喔!


上一篇
[Day10] 9. Figma 基本操作(五): 頁面選單和圖層區
下一篇
[Day12] 11. Figma 基本操作(七):屬性區 - Design & Prototype
系列文
前端工程師&UI 的30天約會:教會猴子用Figma!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言