iT邦幫忙

2024 iThome 鐵人賽

DAY 6
0
Modern Web

0~1 的 Design System 之旅系列 第 6

第六篇-好工具-figma-Auto layout

  • 分享至 

  • xImage
  •  

Auto layout (自動佈局)

現在做網站不太可能 PC only,都是要跨裝置呈現網站內容,也就是在不同裝置、不同大小螢幕上的 UI 佈局要彈性化,自動調整物件的位置、尺寸等等。沒錯,就是「響應式網站」(RWD or AWD)。而 Auto layout 就是用來幫助我們達成這個需求的好工具,它可以模擬設計稿在不同螢幕尺寸下的樣子,達成設計稿 RWD,那要如何製作 Auto layout 物件呢?讓我們開始吧!

  • 基礎模組:
    Auto layout 是由三個元素構成:內容(content)、內距(padding)、外框(border) 。
    https://ithelp.ithome.com.tw/upload/images/20240915/20113256MM94ameSCL.png
  • 製作 Auto layout:
    將設計好的元素(例如卡片)選取起來,按右鍵/點擊 Add auto layout,就完成一個 Auto layout 物件。(也可以用快捷鍵: shift + A)。
  • Auto layout 面版說明:
    點選 Auto layout 物件,右邊面版就可找到其屬性及各種控制項:
    https://ithelp.ithome.com.tw/upload/images/20240915/20113256vb4nEmYLse.png
  1. 物件的寬高:一開始是固定尺寸,可以點擊下拉選單就可以選擇其他非固定尺寸。
  2. 佈局方向:垂直排列、橫向排列、折行。
  3. 間距:內容物件之間的距離,而且是等距距離。
  4. 內距:Auto layout 的上下、左右內距(padding)。
  5. 對齊:內容物件的對齊方式。
    我們以卡片為例:
    https://ithelp.ithome.com.tw/upload/images/20240915/2011325678i7rDDJtF.png
  • 自動調整大小(Resizing)
    要做到 Resizing,主要是在於 Auto layout 內容的佈局設定,要如何設定呢?我們以垂直排列的卡片為例:
  1. 選擇靠左對齊,這樣「圖片」、「場館名稱」「場館內容說明⋯⋯」則會齊左。
    https://ithelp.ithome.com.tw/upload/images/20240915/20113256dydMEu9CKA.png
  2. 點選「圖片」,在 Layout 面版中,將寬高選擇「Fill container」,圖片就會隨著 Auto layout 的尺寸改變而自動縮放。
    https://ithelp.ithome.com.tw/upload/images/20240915/20113256SkwavUT6m0.png
  3. 點選「場館名稱」或「場館內容說明描述⋯⋯」文字元素,在 Layout 面版中,將寬度選擇「Hug contents」,文字就會隨著 Auto layout 的尺寸改變而自動改變位置。
    https://ithelp.ithome.com.tw/upload/images/20240915/20113256iFZGhBmec1.png
    成品:
    圖片說明

你一定想問:面版裡面的各個屬性到底有什麼不同及用法?我們來看看
Fixed width:固定尺寸,內容不會隨著 Auto layout 改變尺寸而自動縮放或變動。
Hug contents:符合內容的寬度(高度),若 Auto layout 寬度(高度)比內容寬度(高度)還小,內容就會突出去(破版)。
Fill container:符合 Auto layout 的寬度(高度),若 Auto layout 物件寬度(高度)比文字寬度(高度)還小,內容就會折行。若內容不想折行,則可以選擇溢出的文字顯示省略符號「…」。
https://ithelp.ithome.com.tw/upload/images/20240915/20113256G0dG62uYvQ.png
Add min width:將內容設定最小寬度,若到達最小寬度,Auto layout 物件不再縮小。
Add max width:將內容設定最大寬度,若到達最大寬度,Auto layout 物件不再放大。

以上是 Auto layout 最最最基本的觀念與設定,當然,它的運用很廣,也有很多變化,在學習的過程中會有很多「為什麼會這樣?」「為什麼沒有效?」「為什麼不聽話?」「為什麼OOXX@@」,相信我,這是正常的,也是必經之路,熟能生巧,過來人提一句:多練習準沒錯啦。


上一篇
第五篇-好工具-figma-Shared style
下一篇
第七篇-好工具-figma-component
系列文
0~1 的 Design System 之旅30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言