# Figma Auto layout ＆ Resizing auto layout 感覺很像 css 的Flex，都是藉由外層來設定內部的東西，比如說像是內容物的間距，以及內容物與外層的間距等等，裡面也可以包多個auto layout的物件。 ### 建立Auto layout 首先可以先建立一個Frame再把它轉成Auto layout。他的圖層樣式跟Frame不一樣，長得會像兩個長方形。 ![](https://i.imgur.com/sEGhR2j.png) ### Auto layout 基礎設定說明 要設定Auto Layout 的時候要注意都是**從外層設定內層的內容物**，所以在設定的時候要確實點到父層做設定。 ![](https://i.imgur.com/0ha2vRU.png) 其中第三點內**容物與外層距離**，就像css的padding一樣，可以輸入兩個數值，分別代表上下與左右，也可以依序輸入不同的padding值，讓四個邊的padding都不一樣。 --- 若要有效做到RWD自動縮放的效果，內容物的設定最好要搭配Resizing一起使用，會比較能達到有效的RWD效果 ### Resizing 基礎說明 ![](https://i.imgur.com/VvVyfOO.png) #### Resizing 都分別會有X軸與Y軸可以設定 ![](https://i.imgur.com/KoaiYml.png) 像這個例子就是X軸會讓內容符合寬度，而Y軸則會填滿容器 --- 整體來說，覺得跟css的flex有幾分神似，如果在設定上有什麼疑問，只要記得一個訣竅：**都是從父層設定內容物**會比較方便記憶喔！ 參考資料：https://www.youtube.com/watch?v=JR4N7cSJ54g ###### tags: `Figma` `Auto layout`