Figma Auto Layout 3.0 發布啦!請看草帽的視頻講解

2021-02-20 codesigner

終於發布啦，新 AL 更強大也更加靈活。可以說，新版 Auto Layout 是在設計工具中實現了一個 CSS Flex[1] 可視化編輯器。

視頻來源：https://twitter.com/figmadesign/status/1329455521355730945

下面，我給大家匯總一下這次更新帶來的功能。

•獨立的四個方向內邊距•更靈活的對齊方式•元素 Rezing 和 Constraints

獨立的四個方向內邊距

之前的 Auto Layout 元素內邊距只能分別定義水平和垂直方向上的，如果你想實現左邊 10px 右邊 2px 這種是不行的。但是現在四個方向的內邊距都可以單獨定義啦。

點擊右邊的圖標，就可以單獨填寫四個內邊距啦，按 Tab 鍵還可以快速跳到下一個輸入框。

獨立內邊距

在外面的輸入框中還可以輸入逗號分隔的數字來快速定義四個方向的內邊距，其順序是按照上右下左順時針走的，和 CSS padding[2] 簡寫一樣。比如 8,10,8,10 就可以設置上下為 8px 左右為 10px 的內邊距。

快速設置內邊距

更靈活的對齊方式

伴隨著獨立內邊距一起的，是對齊方式的更新。以前 Auto Layout 內元素的對齊方式是在內部元素身上控制的，現在所有的對齊控制都從父元素控制（不能使用方向鍵快速切換元素的對齊方式了）。

在設置獨立內邊距的面板中間就是設置對齊方式的地方，這些圖標含義很清晰，可以直接選取你需要的對齊方式。

設置對齊方式

值得一提的是，我們還可以設置元素是抱在一團還是平均分布，如果抱團就是上圖的效果，元素擠在一起，如果選擇了 space between，元素會被自動分開，中間的間距是自動變化的，保持它們平均分布在一條線上。

元素抱團還是分開

元素 Rezing 和 Constraints

現在 Auto Layout 元素多了一個 Rezing 控制，主要用來控制元素尺寸變化行為。以前 Auto Layout 元素尺寸隨著內部元素變化而變化，現在更靈活了，我們既可以靠內部元素撐開父元素，也可以讓父元素控制內部。

如下圖，我們設置外部容器寬度固定，高度 Hug Content，也就是「適應內容」，那麼當我們修改內部元素時它的寬度不會變，而高度會隨著內部元素被撐高或縮小。

Rezing

對於內部元素來說，我們除了可以設置「固定寬高」和「適應內容」，還可以設置填滿整個容器。比如下圖，我們想讓左邊頭像固定大小，右邊文字自動填滿剩餘空間，就可以設置它為 Fill Container。

fill container

更厲害的是，現在的 Auto Layout 和 Constraints 可以結合使用啦。如果你把一個 Auto Layout 放在一個普通 Frame 內部，可以給它設置響應式約束，比如下圖中讓卡片左右跟隨屏幕寬度變化拉伸，同時又可以保持自己的自動布局特性。

Rezing and Constraints

總的來說，新的 Auto Layout 非常強大了，基本上各種效果都可以實現了，我們再也不用一層層嵌套了。

如果你想了解更詳細的內容，可以查看幫助文檔和示例文件：

•幫助文檔[3]•Auto Layout 使用說明[4]•Auto Layout 使用說明中文版[5]•介紹博文[6]

更詳細的細節讓我們看這個叫做超能銅草帽的男人錄製的最新講解視頻吧。

Bilibili 視頻地址：https://www.bilibili.com/video/BV1Uv411r7iD

References

[1] CSS Flex: https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex
[2] CSS padding: https://developer.mozilla.org/zh-CN/docs/Web/CSS/padding
[3] 幫助文檔: https://help.figma.com/hc/en-us/articles/360040451373
[4] Auto Layout 使用說明: https://www.figma.com/community/file/784448220678228461
[5] Auto Layout 使用說明中文版: https://www.figma.com/community/file/911267393900607489
[6] 介紹博文: https://www.figma.com/blog/behind-the-feature-the-making-of-the-new-auto-layout/

相關焦點

  • Figma新功能發布,看看什麼是才是真正的自動布局
    ，所以為了大家能夠準時收到我們的文章推送，請記得猛戳右下角的「在看」，並點擊文章右上角的「...」將72PX設為星標～這樣就不會錯過每一篇精彩的推送啦🦆終於發布啦，新 AL 更強大也更加靈活。可以說，新版 Auto Layout 是在設計工具中實現了一個 CSS Flex[1] 可視化編輯器。
  • Figma 學習資源匯總
    幫助文檔https://help.figma.com十分詳細的幫助文檔，適合邊使用邊查閱，還能看到很多小技巧，算是對視頻的補充。如果看不太懂英文，可以藉助瀏覽器的自動翻譯功能。最佳實踐https://www.figma.com/best-practices最佳實踐會針對某一些點進行講解
  • Figma 常見問題與基礎操作
    推薦看一下草帽的這個視頻[5]，以後遇到字體問題就不怕了。為什麼不支持中文輸入呢？其實是支持的，因為默認是一個英文字體，你只需要切換為一個中文字體就可以了。目前 Figma 字體列表這裡顯示的都還是英文，你可以手動輸入 PingFang SC 或者 Noto Sans SC。基礎操作Frame 是什麼？它和組（Group）有什麼區別？
  • Masonry介紹與使用實踐:快速上手Autolayout
    因為還要支持ios5唄) 簡單的適配一下即可 在 iphone6+時代 window的width也發生了變化(相對5和5s的屏幕比例沒有變化) 終於是時候拋棄autoresizingMask改用autolayout了(不用支持ios5了 相對於屏幕適配的多樣性來說autoresizingMask也已經過時了) 那如何快速的上手autolayout呢?
  • Figma 社區遊玩指南
    社區簡介Figma 社區從去年十月份開始內測[2]，簡單來說，就是設計師可以將自己的 Figma 文件直接發布到社區，發布的源文件採用 CC BY 4.0[3] 協議，其他設計師可以基於此自由創作，甚至商業使用，只要你對作品按照作者要求的方式進行署名。它有點像 Dribbble[4] 這種展示設計作品的網站，不同之處在於你每次發布的是設計的源文件。
  • Figma插件推薦(21.12)
    「 簡單推薦幾個figma插件。」
  • 使用 Auto Layout 的典型痛點和技巧
    作者：seedantehttp://www.jianshu.com/p/0f031606e5f2公眾號Vip交流群見文末！ 大神班視頻一鍵獲取！180//動畫從 190 變化到 200UIView.animateWithDuration(0.5, animations: {        testView.center.x += 10})//儘管從 Auto Layout 的角度看 center.x 是 180，修改約束後該值為 190，這個動畫應該是從 180 變化到
  • Auto Layout In iOS Developing Part 2
    You can refer to figure 3 for the steps.」3.Adding a LabelNow that you have some ideas about auto layout and the preview feature, let's add a label to the lower-right part of the view and
  • 深入剖析Auto Layout,iOS各版本新增特性分析
    ## Debuggerpo [[UIWindow keyWindow] _autolayoutTrace] ## 參考 參考官方文檔：https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/AutolayoutPG/TypesofErrors.htmlMasonry
  • Android FlexboxLayout 聰明的UI布局
    layout_flexGrow 屬性定義項目的放大比例，默認為0，即如果存在剩餘空間，也不放大。如果一個項目的 flex-shrink 屬性為0，其他項目都為1，則空間不足時，前者不縮小。負值對該屬性無效。layout_alignSelf 屬性允許單個子元素有與其他子元素不一樣的對齊方式，可覆蓋 alignItems 屬性。默認值為 auto，表示繼承父元素的 alignItems 屬性，如果沒有父元素，則等同於stretch。
  • Figma Plugin 插件平臺正式發布!
    插件平臺：https://www.figma.com/c官方文檔：http://figma.com/plugin-docs插件實例：https://github.com/figma/plugin-samplesFigma UI Kit：https://www.figma.com/file/Gj9iMcTbFbHrFq1ZWbDBuyc9/UI2
  • 從 Chrome 源碼看瀏覽器如何 layout 布局
    width的大小是50，類型是百分比，而margin值是0，類型是auto，這兩種都不能直接用來畫的。所以需要通過layout計算出具體的數字。01建立layout樹《從Chrome源碼看瀏覽器如何構建DOM樹》這篇文章介紹了如何html文本的過程。
  • ConstraintLayout,看完一篇真的就夠了麼?
    技術一直在不停的更新迭代，看一篇永遠是不夠的，建議再看一遍官網的，可以看到被作者過濾掉的信息或者最新的更新。這就是我為什麼會在文末放官網連結的原因，如果有的話。2.<TextView    android:text="Hello"    app:layout_constraintDimensionRatio="3:1"    android:layout_width="0dp"    android:layout_height="100dp"    />這裡設置寬高比為
  • 從 Auto Layout 的布局算法談性能
    由於在 2012 年蘋果發布了 4.0 寸的 iPhone5，在 iOS 平臺上出現了不同尺寸的行動裝置，使得原有的 frame 布局方式無法很好地適配不同尺寸的屏幕，所以，為了解決這一問題 Auto Layout 就誕生了。
  • 史上最全ConstraintLayout使用詳解
    0.3（30%），垂直方向偏移0.8（80%）注意：在使用百分比偏移時，需要指定對應位置的約束條件這裡藉助constraintlayout網站(https://constraintlayout.github.io/basics/barriers.html)來講解Barrier。當我們創建布局時，有時會遇到布局可以根據本地化而更改的情況。這裡藉助有一個非常簡單的例子：這裡有三個文本視圖：左邊的textView1和textView2；右邊的textView3。
  • 【視頻教程免費】layout大神小剛老師:2.4G-RF藍牙模塊-天線講解!
    歡迎layout大神小剛老師入駐「問問硬體網」！今天小剛老師給大家送layout技術視頻來了（下方有視頻）！小剛老師是什麼人物？認識的請點讚小剛老師原名覃綱固，現居於深圳,有10多年的PCB設計經驗。PCB layout設計熟練。
  • Constraint Layout 2.0 用法詳解
    Constraint Layout 是最受歡迎的 Jetpack 庫之一，它的 2.0 正式版本也發布啦 (目前最新版本 2.1.0-alpha1)！
  • 史上最全ConstraintLayout使用詳解!(建議收藏)
    0.3（30%），垂直方向偏移0.8（80%）注意：在使用百分比偏移時，需要指定對應位置的約束條件這裡藉助constraintlayout網站(https://constraintlayout.github.io/basics/barriers.html)來講解Barrier。當我們創建布局時，有時會遇到布局可以根據本地化而更改的情況。這裡藉助有一個非常簡單的例子：這裡有三個文本視圖：左邊的textView1和textView2；右邊的textView3。
  • Android AutoCompleteTextView:自動完成文本框控制項
    下面用一個簡單的實例講解 AutoCompleteTextView 的使用方法。在工程 WidgetDemo 的布局文件 main.xml 中添加一個 Button，用以啟動 AutoCompleteTextViewActivity。
  • 50 個 Figma 技巧,讓設計快如閃電
    下面開始欣賞視頻吧，看看有沒有你不知道的。詳細文字版：複製圖層要複製圖層，只需要選擇圖層並按住 Option（Windows 下是 Alt，下同） 拖動就可以複製一個出來。之後，你就可以使用 Cmd + D 進行更多的複製。