古詩詞大全網 - 成語查詢 - Figma(壹):Components和instances

Figma(壹):Components和instances

和React中組件化的思想壹致,Figma 將 UI 拆分成許多小的有機體,這些有機體尤其指那些承擔了交互任務、會重復出現的內容,例如:按鈕、表單、表格,以及壹些無形的樣式、配色等。Figma 的思想是,重復的東西我們只要在最初創造壹遍就夠了,然後我們就可以在界面中無限復制它。

當我們希望改變某個組件時,只需修改 master component,所有的 instances 都會同步改變,但只修改某個 instance 是不會給 master component 帶來改變的,這不同於ps中的智能對象。

這種模式給使用者帶來了極大的便利。

component 的圖標是四個小菱形。

可以從任何對象或圖層集合中創建壹個 Component。可以是簡單的按鈕或字段,或更復雜的設計,如菜單。創建方法(先創建,再轉化成組件):

所有組件都可在Assets中查看。

instance 的圖標是壹個菱形。創建方法:

通過 instance 找到 component:

在希望用壹個 instance 替換另壹個時,使用右側屬性面板,找到 instance 部分的下拉菜單,選擇替換者實例的名稱,點擊後完成替換。

為簡化替換,可借助用 “/” 命名的方式將組件分組,例如:Button/Plan、Button/Login 等,在替換時,這兩個組件都會顯示在名為 Button 的目錄下。

對 instances 的修改稱為 override。這在我們想要創建壹個現有組件的變體時非常有用,例如:登錄按鈕和註冊按鈕。

註意:有關組件布局的屬性是無法修改的,例如:組件內部元素的位置、大小、角度、圖層順序等。

修改可以隨時通過上方菜單的 reset instance 按鈕重新和 component 保持同步。也可以通過右鍵菜單的 reset instance只同步部分屬性。

將某個 instance 和 component 分離。instance將嵌套在常規的 Frame 中,和 component沒有任何關系。

方法:

References:

Figma-Components