1、搭建組件庫的意義是幫你快速復用，而搭建自動布局化的組件庫，就能完美結合組件和自動布局這兩個功能的絕對優勢，即能快速復用，又能大幅提升布局效率！但是，要將這兩個核心功能進行結合并去使用，并沒有你想象得那么順利。01一個可怕的誤區先說一個90%以上的人都可能會存在的嚴重誤區：單向不可逆誤區。覺得要制作自動布局化的組件，必須先自動布局，再制作組件。一旦先做了組件，如果后面要再自動布局，只能重新制作。這是個非常、非常可怕的誤區，因為一旦形成這樣的認知，那么以往所有未進行自動布局的組件，你都需要重新花費第二份時間重新制作！我就是一個鮮活的例子。因為團隊以往的組件庫全部沒有施加自動布局，我因為受制于這個錯

2、誤認知，花了非常非常多的時間進行重新制作。而當我發現組件和自動布局這兩個步驟完全可逆時，我笑的像個傻子。總之，要制作自動布局化的組件，并不需要遵循組件和自動布局的先后順序。你既可以先自動布局再組件化，又可以先組件化再自動布局！那么問題來了。02如何對組件創建自動布局？很簡單，選中組件，直接shift+A就行了！但是，如果當前對象已經擁有了frame這個父級，那么創建組件或自動布局時，將直接以這個frame父級為底，新加組件或自動布局的屬性，而不會額外給你嵌套。比如這個尚未進行組件化的按鈕，制作組件后并沒有額外新增嵌套的父級。再比如這是個尚未進行自動布局的按鈕組件，我們選中它施加一層自動布局。你

3、會發現組件同樣沒有被額外施加父級，而原父級也沒有任何改變。但你瞅下右側欄，就會看見多出來一塊auto layout面板。正是因為這樣，所有自動布局后的組件，都能完美實現自動布局的所有功能。但，也僅限于組件而已。03實例與自動布局一旦設定好了自動布局規則，那么在進行增減、拉伸和調序這些操作時，父、子級都會基于規則進行帥到爆的自適應變化。但是！一旦自動布局好的元素做成了組件，由組件拷貝而來的實例在自動布局下會存在很多限制。以這個自動布局化的卡片實例為例，我們看看它不能干啥？1.實例無法調序實例中無法實現順序的調換。2.實例無法增加對象實例中無法拷貝或者新增對象，就算你強行這么做，你會發現新增的對象

4、都會跑到實例父級的外部。3.實例無法拉伸比如頭像、圖片以及文本框，都是無法像之前那樣自由拉伸的。那么實例能干啥呢？1.實例可以刪除任意的元素，都可以直接del刪除。為什么標引號，是因為即便你del刪掉了某個對象，但是實例中其實會以隱藏的形式來讓它消失。這一點其實很友好，能避免我們誤刪了某個元素后無法恢復。2.實例可以增減文本即便是實例，自動布局的文本自適應規則依然適用，這一點很棒。3.實例可以動態響應上一篇文章已經講過，只要對頭像外的所有子級設置fill container劇本，子級就會跟隨父級實現動態響應。在實例中，這個原則同樣適用。可以看到，figma為了保證主組件的絕對地位，因此在實例中杜絕了所有頁面布局的改動（更改位置、增加對象、元素拉伸），但在布局固定的前提下允許內容的diy和整體布局的響應（隱藏對象、文本變更和動態響應）。這允許我們在有限的組件數量之下，能通過多個不同的實例來