Figma构建组件化思维有哪些方法

组件化思维是什么？

无论是传统的工厂制造业，还是手机、计算机等模块化设计产品，组件化思维都可以理解为当代劳动分工的精细化产品，将原有的复杂结构成可复制的单个模块，最后组装成您的产品。组件思维可以有效地保证设计质量和标准量化，提高整体工作和生产效率。

对于互联网设计师来说，我们在实际工作中建立公司的设计规范，促进公司的实施是非常重要的。这需要从设计、产品和R&D的各个环节来确保思维的统一。因此，每个模块的沟通和交付方式都需要内部多次沟通，并根据公司的方式确定，这对设计成本和R&D成本有很大的参考价值。

设计组件化的构建保证了每个平台的体验和交互的统一性，无论是Apple、Material、IBMDegnstem还是国内的AntDesign。

组件是什么？

组件是可以在页面中重复使用的部分，如图标、按钮、模态窗、表单等，即功能设计模式。

样式是什么？

风格是一种从属于感知性设计模式的颜色、字体、投影、网格，可以修改或调整组件的风格属性。

接下来，我们将逐步告诉您，为了满足基本的复用性和未来的扩展性，如何通过figma创建一个能够满足自身业务需求的组件库。组件模块化设计体系需要符合自身的设计目标。

组件如何创建。

需要明确两个属性的Figma组件。

主要组件，即主要组件；主要组件是你自己创建的源组件，任何对主要组件的操作都会影响整体回收组件的场景。Instance，也就是例子；例子的修改可以于源组件进行单独的调整。例子将与主要组件相连，因此主要组件所做的任何改变都将应用于例子。

FigmaTips:将option+comman拖拽组件按住到相应组件，直接更换。

Constraints约束。

Figma和Sketch都有一个元素约束面板。这种面板实际上来自于iOS开发Xcode的面板。它可以定义组件的宽度和高度，上、右、下和左距离值，甚至水平或垂直居中。

约束确保了每个平台上一个组件的通用性，可以满足不同屏幕宽度和高度比的需求。对于构件构建良好的约束，它将用一半的努力达到两倍的效果。

样式如何创建。

Figma在初始状态下的右侧提供了所有样式的看板界面，因为样式的定义在Figma中变得轻松愉悦。

关于色彩的创建。

Figma创建颜色后，不仅可以在图形上使用颜色样式，还可以在字体上直接使用，而目前oursketch.com的颜色样式只能在图形上使用。

当我需要调整我自己的最新项目中的所有字体时，我只需要调整颜色值的属性。所有页面中的字体都刷新了所有的颜色风格。此时，您可以理解为什么笨拙操作为每个页面添加相应的颜色风格。

关于字体的创建。

为了创建一个字体，我们需要首先明确相应的字体梯度和字体重量。颜色的使用可以分开在figma中使用。例如，如果链接颜色需要蓝色，则可以单独添加。

Figma提供的组件图形界面更倾向于设计师，组件可以立即使用，同时也可以切换列表显示组件名称。

与Sketch相比，设计师对组件构建良好的苹果系统ketchRunner插件组件的使用。

团队合作

对许多设计师来说，免费试用是figma的绝对优势。在这里，我们想解释一下，figma是免费的，只有在不同项目中不使用组件的情况下！个人版本的颜色、字体和投影也可以上传到同步。

然而，如果设计团队使用组件，则需要收费。Figma为有隐私要求的客户提供了SSO的定制化验证方法。