iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 20
0
自我挑戰組

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

【Day20】Figma篇 : Auto Layout 小實做

  • 分享至 

  • xImage
  •  

昨天我們提到也Auto Layout可以做到這種卡片式效果:
https://ithelp.ithome.com.tw/upload/images/20201005/20112563x2Jlw2NTu7.jpg

今天我們要進一步探討實做,在實作的過程中我們會發現有些小問題
如果我們像之前Sketch篇那樣直接在Components上就設定Auto Layout可能會變成這樣:
https://ithelp.ithome.com.tw/upload/images/20201005/2011256336AJdM5hGZ.jpg
因為Auto Layout的上下距離是必須一致的,所以我們設定好以後下面的距離會自動消失,如果我們加回去又會變成第三個狀態這樣上下都有距離,但是我們想要上面沒有距離下面有距離要怎麼做呢?

我們可以發現下面的文字組區塊是上下都有距離的,所以我們可以改成這樣設定Auto Layout:
https://ithelp.ithome.com.tw/upload/images/20201005/20112563r5cRkiM2Jn.jpg
除了設定文字組的Auto Layout,Card也要設定Auto Layout,這樣我們整個卡片才會跟著文字彈性變長喔~


上一篇
【Day19】Figma篇 : Auto Layout
下一篇
【Day21】Figma篇 : 發現隱藏的小功能
系列文
UI設計師之工具學習指南30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言