iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 21
0
自我挑戰組

UI設計師之工具學習指南系列 第 21

【Day21】Figma篇 : 發現隱藏的小功能

  • 分享至 

  • xImage
  •  

Scale

今天發現Figma有一個很好用的東西Scale,是在左上方的工具列裡 : (快速鍵 K)
https://ithelp.ithome.com.tw/upload/images/20201006/20112563QCrEiJWDuB.jpg

原始狀態的卡片樣式 :
https://ithelp.ithome.com.tw/upload/images/20201006/20112563SrvnEui9GQ.png

如果我們很普通的直接用選取工具把上面原始狀態的卡片樣式拉大,就受到我們裡面的Constraints配置影響,所以就可能會變成這樣 :
https://ithelp.ithome.com.tw/upload/images/20201006/20112563qEzG7Pnfoh.png

但是如果我們選取了Scale就可以直接等比放大縮小,裡面的文字、圖片和行距都會一起等比放大 :
https://ithelp.ithome.com.tw/upload/images/20201006/20112563y4bQpPKNoQ.png

参考线

要叫出參考線就跟photoshop一樣要先把Rules叫出來 : (快速鍵 Shift + R)
https://ithelp.ithome.com.tw/upload/images/20201006/20112563et7bd7dDea.jpg

接下來也跟photoshop一樣從垂直和水平的尺規上把參考線拖拉出來。
Figma有一個小功能就是選取物件後按住option(Alt)鍵移動,可以看到物件和周邊距離的數值,所以當我們拖拉我們的參考線時再加上option(Alt)就可以看到參考線和選取物件的距離數值,像是這樣 :
https://ithelp.ithome.com.tw/upload/images/20201006/20112563E9yJBsdXCK.jpg


上一篇
【Day20】Figma篇 : Auto Layout 小實做
下一篇
【Day22】Figma篇 : 夢幻的鋼筆工具
系列文
UI設計師之工具學習指南30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言