标志设计的表现形式的核心价值在于为企业打造独特的品牌,标志设计的表现形式可以给企业带来良好的社会声誉和经济效益。
注:配图为本公司设计作品
上个月,在配置2022大会期间菲格玛宣布了一系列令人兴奋的新功能。其中之一无疑是组件属性的推出,它为菲格玛中创建和管理组件的方式带来了重大变化。
在此版本之前,我们使用变体来创建组件的每一种可能的变体,并将其包含到组件集中,能够设置广泛的属性和值组合(大小、颜色、状态、图标可见性、元素定位,等等)。
变体固然很好,但问题在于更大、更复杂的项目和设计系统,在这些系统中,一个组件可能会有数百个变体,导致菲格玛文件过大且难以管理,这也会导致性能问题。
组件属性的引入为组件的处理方式带来了3个主要优势:
它极大地减少了每个组件所需的变体数量,让您拥有一个更加精简的设计系统
对于加入一个团队并且不了解现有设计系统的新设计师来说,理解一个组件的哪些部分可以被改变会容易得多
您将使用属性创建的组件将更接近前端开发人员在编码阶段使用的属性,这将最终导致设计和代码之间更好的对齐
目录
隐藏
3个新的组件属性
文本属性
布尔属性
实例交换属性
组件属性教程
3个新的组件属性
让我们深入了解一下哪些是新的组件属性:
文本属性
它允许您直接从侧边栏属性面板更改组件中包含的层的文本,而不必单击画布中的每个单独的文本层并编辑它。当您需要更改多个组件的文本时,这非常方便。
在线电子邮件模板生成器
有了明信片,你可以在线创建和编辑电子邮件模板,无需任何编码技能!包括100多个组件,帮助您以前所未有的速度创建自定义电子邮件模板。
免费试用其他产品
布尔属性
它允许您直接从侧边栏面板轻松切换组件中层的可见性Figma通过让你设置一个真或假的值到一个特定的层,这将使它可见或隐藏。在发布的3个组件属性中,这可能是使您能够显著减少所需变量数量的一个。
实例交换属性
该属性允许您直接从侧边栏面板的下拉菜单中快速交换组件内的实例,从本地或共享库中包含的所有实例中进行选择。
最常见的例子是文本旁边带有图标的按钮。由于这个属性,你可以很容易地将这个图标与你的库中的其他图标进行交换。
组件属性教程
在本教程中,我们将通过创建一个按钮组件来展示新的菲格玛组件属性,该组件将允许您通过调整侧边栏面板中的组件属性来轻松创建许多变体。
我们将能够:
轻松交换左侧和右侧的图标
更改按钮文本
创建一个按钮版本,图标在右边,一个在左边,一个没有图标。所有这些,同时由于自动布局设置,保持按钮间距漂亮整洁。
我们不会在本教程中使用变体,只有组件属性!
让我们开始吧:
首先,让我们将两个图标添加到我们的文件中,并为每个图标创建一个组件。对于本教程,我们将使用一个心形图标和一个箭头图标(如果你需要一个免费的图标集,可以去UXCrush,在那里你可以找到大量的图标)。
让我们使用自动布局特性创建一个按钮。我们可以很容易地做到这一点,通过创建一个文本层,然后在选中该层的情况下按轮班A .
注:配图为本公司设计作品


总监微信咨询 舒先生

业务咨询 张小姐

业务咨询 付小姐