国产亚洲精_丰满老熟好大的大bbb_男男激情做爰视频免费观看_欧美一区二区三区精品国产

Figma高階技能卡②丨掌握自動布局，你的設計生產效率才能指數級提升！

2025-1-7    藍藍設計的小編 設計管理與成長

Figma高階技能卡②丨掌握自動布局，你的設計生產效率才能指數級提升！
 
 
  •  
    卡片的其他元素可以跟隨用戶評論的字符數自動調整。
Figma高階技能卡②丨掌握自動布局，你的設計生產效率才能指數級提升！
 
 
  •  
    表格的寬高可以跟隨畫框的變動而自動適配。
Figma高階技能卡②丨掌握自動布局，你的設計生產效率才能指數級提升！
 
 
  •  
    頁面的元素可以根據頁面的寬度自動響應適配。
Figma高階技能卡②丨掌握自動布局，你的設計生產效率才能指數級提升！
 
 
如果這些技巧你都掌握了，好的，你可以忽略這篇文章，但如果你還不會這些技巧，那么這篇文章分享的內容就特別適合你，接下來，
就讓我慢慢講解實現這些操作的技巧——自動布局（Auto Layout）。
 
什么是自動布局？
我們先來看官方的定義。
  •  
    自動布局（Auto Layout）是您可以添加到框架和組件的一項屬性。
    它允許您創建可放大或縮小以填充的設計，并隨著內容的變化重新布局。當您需要添加新圖層、容納更長的文本字符串或在設計演變過程中保持對齊時，此功能非常有用。
Figma高階技能卡②丨掌握自動布局，你的設計生產效率才能指數級提升！
 
 
不過要徹底弄懂這個概念，還需要我們一步一步來。
 
理解框架的概念
在講自動布局之前，
我們需要了解一下Figma中框架（Frame）的概念
。
我們先看一下框架的定義。
  •  
    所謂「框架」，也即是我們過去在Photoshop、Sketch等設計軟件中使用的畫板Artbord。
    我們在Figma中設計的元素，無論是文本、圖形、形狀都需要有一個容器來承載，這個容器即是「框架」。
  •  
    「框架」是Figma中的一個多功能容器，不僅可以用來模擬畫板，還可以作為布局的基礎單元，包含了更多的設計功能和靈活性。
Figma高階技能卡②丨掌握自動布局，你的設計生產效率才能指數級提升！
 
 
Figma為什么要引進「框架」的概念，而不是像Sketch這些軟件使用畫板呢？答案是
框架可以為設計師提供更高的靈活布局、協作效率以及響應支持，
不過這里有一個重要的前提，那就是這個框架添加了自動布局的屬性。
 
框架和組又有什么區別？
我們再來說一下框架（Frame）和組（Group）的區別，因為這將會關乎我們在Figma的設計邏輯和工作習慣。
和Sketch中的畫板不同，
「框架」可以無限嵌套，也即是在一個主框架的里面，可以無限創建框架，
這些框架可以用來組織和管理各種不同的設計元素。在過去，這個工作主要是由「組」來完成，但看完這篇文章以后，我希望你徹底改掉這個操作習慣。
Figma高階技能卡②丨掌握自動布局，你的設計生產效率才能指數級提升！
 
 
框架的功能屬性更豐富
「框架」的屬性非常豐富，比如支持填充、描邊、圓角半徑、裁剪等，但「組」并不支持，它只能作為簡單的容器來組織和管理元素。比如一個按鈕，如果用「組」來設計，需要形狀+文本兩個元素，但如果用框架來設計，則只需要文本一個元素，因為框架支持填充，還可以設置圓角半徑、描邊等。
Figma高階技能卡②丨掌握自動布局，你的設計生產效率才能指數級提升！
 
 
框架的設計效率更高效
「框架」在加入自動布局屬性以后，就可以實現適配多端的響應式設計，框架的內容元素可以根據設計師約束的規則進行靈活布局，這樣的設計效率是「組」完全不能相比的，這也是Figma最大的魅力之一。
Figma高階技能卡②丨掌握自動布局，你的設計生產效率才能指數級提升！
 
 
簡而言之，「組」只適用于對簡單的圖層整理和管理，它并不支持復雜的布局功能，屬于舊時代的軟件功能，和「框架」根本無法相比。
 
自動布局的本質
講解了以上概念，我們就能理解自動布局的本質了——
自動布局就是可以靈活高效布局的框架，它屬于一種功能屬性，就像變體之于組件，添加了變體屬性以后，組件才能實現高效的操作。
Figma高階技能卡②丨掌握自動布局，你的設計生產效率才能指數級提升！
 
 
自動布局的創建方式
自動布局的創建方式可以通過以下方式創建：
  •  
    快捷鍵：
    選中元素，Shift+A可直接創建；
  •  
    鼠標右鍵：
    選中框架，點擊右鍵，在屬性面板中可直接轉換成自動布局；
  •  
    屬性面板：
    選中框架，在框架屬性-布局，點擊右側圖標，即可創建自動布局。
Figma高階技能卡②丨掌握自動布局，你的設計生產效率才能指數級提升！
 
 
自動布局的功能屬性
在框架添加了自動布局屬性以后，我們就可以對框架添加功能屬性來排版布局。
 
大小
「大小」是指框架的寬高尺寸，可直接輸入數值，點擊下拉還有多個選項。
Figma高階技能卡②丨掌握自動布局，你的設計生產效率才能指數級提升！
 
 
  •  
    固定尺寸：
    尺寸的具體數值，可手動設置；
  •  
    適應內容：
    框架的尺寸會根據元素的增加或減少而自動適應；
  •  
    填充容器：
    觸發這個功能，需要一定的前置條件，那就是子框架處于父框架之中，而且兩者必須添加了自動布局屬性，當兩個框架的尺寸發生變化時，子框架就能根據約束的條件進行填充。
  •  
    最小尺寸：
    設置最小尺寸以后，框架不會跟隨外界條件而改變；
  •  
    最大尺寸：
    設置最大尺寸以后，框架不會跟隨外界條件而改變。
 
方向
「方向」是指自動布局的布局形式，分為垂直布局、水平邊距和換行布局。
Figma高階技能卡②丨掌握自動布局，你的設計生產效率才能指數級提升！
 
 
  •  
    垂直布局：
    框架內所有元素進行垂直布局；
  •  
    水平布局：
    框架內所有元素進行水平布局；
  •  
    換行布局：
    框架內所有元素將會根據約束設置排列成多行和多列；
 
間距
「間距」是指框架內各元素之間的距離。
Figma高階技能卡②丨掌握自動布局，你的設計生產效率才能指數級提升！
 
 
  •  
    固定數值：
    可手動調整框架內元素的間距；
  •  
    自動屬性：
    這個屬性是實現響應適配的關鍵，設置為自動后，框架內所有元素都不會被約束限制，將會跟隨框架的變化而自動調整。
 
對齊
「對齊」是指元素在框架內的對齊形式，分為上左對齊、上中對齊、上右對齊、左對齊、居中對齊、右對齊、下左對齊、下中對齊和下右對齊。
Figma高階技能卡②丨掌握自動布局，你的設計生產效率才能指數級提升！
 
 
邊距
「邊距」是指框架內元素距離框架的距離，分為水平邊距和垂直邊距。
Figma高階技能卡②丨掌握自動布局，你的設計生產效率才能指數級提升！
 
 
  •  
    水平邊距：
    元素距離框架的水平邊距；
  •  
    垂直邊距：
    元素距離框架的垂直邊距；
  •  
    獨立邊距：
    點擊獨立邊距后，可單獨設置上下左右四個邊距大小。
 
其他
  •  
    描邊：
    可設置描邊樣式是否包含在布局中；
  •  
    項目堆疊：
    框架內元素的堆疊排序，可設置前面在上和后面在上；
  •  
    文本基線對齊：
    基線對齊是一種對齊方式，專門用于處理包含文本的布局容器，它確保容器內的文本元素在垂直方向上按照基線對齊，而不是按照邊框或其他對齊方式，多數情況我們忽略此屬性，不用設置。
Figma高階技能卡②丨掌握自動布局，你的設計生產效率才能指數級提升！
 
 
忽略自動布局
如何在一個自動布局里面增加個性化的設計，比如一個圖標或者一個元素需要在右上角，它不需要受限于自動布局垂直或水平的布局方式，這個答案就是要給這個元素增加「忽略自動布局」的功能。
  •  
    如何添加：
    選中元素后，在右側屬性面板-位置右側，點擊「忽略自動布局」，該元素將不會受自動布局的約束限制。
Figma高階技能卡②丨掌握自動布局，你的設計生產效率才能指數級提升！
 
 
自動布局的使用原則及技巧
  •  
    所有的元素都必須在框架里面，無論是文本、圖片還是形狀；所有的框架都應該增加自動布局屬性，元素才能變得靈活高效。
  •  
    忘記「組」，除非有特殊的效果，不要用組，因為它會影響設計的靈活性。
  •  
    使用布局思維去設計，而非單個元素，這樣才能發揮Figma以及自動布局的高效。
  •  
    盡量用準確的數值去約束框架，比如邊距、間距和最大寬度等，這樣你的設計才會真正實現規范和高效。
總結
Figma的出現，不僅僅開創了多人實時協作、文件云端管理等設計模式，更是對設計生產效率帶來了突破性的飛躍，而自動布局正是保證高效設計生產效率的基準和保證，這也是我從最初的Photoshop轉到Sketch，再從Sketch轉到Figma最大感受。
自動布局是Figma的靈魂，也是發揮Figma無與倫比的生產效率的基礎，
希望大家一定要掌握這個功能，才能讓你的設計生產效率實現飛躍！

作者：廖爾摩斯
鏈接：https://www.zcool.com.cn/article/ZMTY0Nzc4MA==.html
來源：站酷
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。

蘭亭妙微(m.paul-jarrel.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內外優秀的設計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan

日歷

鏈接

個人資料

藍藍設計的小編 http://m.paul-jarrel.com

存檔