組件化思維是什么？

無(wú)論是傳統(tǒng)的工廠制造業(yè)，還是手機(jī)、計(jì)算機(jī)等模塊化設(shè)計(jì)產(chǎn)品，組件化思維都可以理解為當(dāng)代勞動(dòng)分工的精細(xì)化產(chǎn)品，將原有的復(fù)雜結(jié)構(gòu)成可復(fù)制的單個(gè)模塊，最后組裝成您的產(chǎn)品。組件思維可以有效地保證設(shè)計(jì)質(zhì)量和標(biāo)準(zhǔn)量化，提高整體工作和生產(chǎn)效率。

對(duì)于互聯(lián)網(wǎng)設(shè)計(jì)師來(lái)說(shuō)，我們?cè)趯?shí)際工作中建立公司的設(shè)計(jì)規(guī)范，促進(jìn)公司的實(shí)施是非常重要的。這需要從設(shè)計(jì)、產(chǎn)品和R&D的各個(gè)環(huán)節(jié)來(lái)確保思維的統(tǒng)一。因此，每個(gè)模塊的溝通和交付方式都需要內(nèi)部多次溝通，并根據(jù)公司的方式確定，這對(duì)設(shè)計(jì)成本和R&D成本有很大的參考價(jià)值。

設(shè)計(jì)組件化的構(gòu)建保證了每個(gè)平臺(tái)的體驗(yàn)和交互的統(tǒng)一性，無(wú)論是Apple、Material、IBMDegnstem還是國(guó)內(nèi)的AntDesign。

組件是什么？

組件是可以在頁(yè)面中重復(fù)使用的部分，如圖標(biāo)、按鈕、模態(tài)窗、表單等，即功能設(shè)計(jì)模式。

樣式是什么？

風(fēng)格是一種從屬于感知性設(shè)計(jì)模式的顏色、字體、投影、網(wǎng)格，可以修改或調(diào)整組件的風(fēng)格屬性。

接下來(lái)，我們將逐步告訴您，為了滿足基本的復(fù)用性和未來(lái)的擴(kuò)展性，如何通過(guò)figma創(chuàng)建一個(gè)能夠滿足自身業(yè)務(wù)需求的組件庫(kù)。組件模塊化設(shè)計(jì)體系需要符合自身的設(shè)計(jì)目標(biāo)。

組件如何創(chuàng)建。

需要明確兩個(gè)屬性的Figma組件。

主要組件，即主要組件；主要組件是你自己創(chuàng)建的源組件，任何對(duì)主要組件的操作都會(huì)影響整體回收組件的場(chǎng)景。Instance，也就是例子；例子的修改可以于源組件進(jìn)行單獨(dú)的調(diào)整。例子將與主要組件相連，因此主要組件所做的任何改變都將應(yīng)用于例子。

FigmaTips:將option+comman拖拽組件按住到相應(yīng)組件，直接更換。

Constraints約束。

Figma和Sketch都有一個(gè)元素約束面板。這種面板實(shí)際上來(lái)自于iOS開(kāi)發(fā)Xcode的面板。它可以定義組件的寬度和高度，上、右、下和左距離值，甚至水平或垂直居中。

約束確保了每個(gè)平臺(tái)上一個(gè)組件的通用性，可以滿足不同屏幕寬度和高度比的需求。對(duì)于構(gòu)件構(gòu)建良好的約束，它將用一半的努力達(dá)到兩倍的效果。

樣式如何創(chuàng)建。

Figma在初始狀態(tài)下的右側(cè)提供了所有樣式的看板界面，因?yàn)闃邮降亩x在Figma中變得輕松愉悅。

關(guān)于色彩的創(chuàng)建。

Figma創(chuàng)建顏色后，不僅可以在圖形上使用顏色樣式，還可以在字體上直接使用，而目前oursketch.com的顏色樣式只能在圖形上使用。

當(dāng)我需要調(diào)整我自己的最新項(xiàng)目中的所有字體時(shí)，我只需要調(diào)整顏色值的屬性。所有頁(yè)面中的字體都刷新了所有的顏色風(fēng)格。此時(shí)，您可以理解為什么笨拙操作為每個(gè)頁(yè)面添加相應(yīng)的顏色風(fēng)格。

關(guān)于字體的創(chuàng)建。

為了創(chuàng)建一個(gè)字體，我們需要首先明確相應(yīng)的字體梯度和字體重量。顏色的使用可以分開(kāi)在figma中使用。例如，如果鏈接顏色需要藍(lán)色，則可以單獨(dú)添加。

Figma提供的組件圖形界面更傾向于設(shè)計(jì)師，組件可以立即使用，同時(shí)也可以切換列表顯示組件名稱。

與Sketch相比，設(shè)計(jì)師對(duì)組件構(gòu)建良好的蘋果系統(tǒng)ketchRunner插件組件的使用。

團(tuán)隊(duì)合作

對(duì)許多設(shè)計(jì)師來(lái)說(shuō)，免費(fèi)試用是figma的絕對(duì)優(yōu)勢(shì)。在這里，我們想解釋一下，figma是免費(fèi)的，只有在不同項(xiàng)目中不使用組件的情況下！個(gè)人版本的顏色、字體和投影也可以上傳到同步。

然而，如果設(shè)計(jì)團(tuán)隊(duì)使用組件，則需要收費(fèi)。Figma為有隱私要求的客戶提供了SSO的定制化驗(yàn)證方法。