1. 首页
  2. css

CSS在Figma中嵌套组件

在过去的几周里,我一直在Gusto(我工作的地方)构建我们的UI工具包,这是一个Figma文档,它包含了我们所有的设计模式和组件,这样我们团队中的设计师就可以加入进来,购买他们需要的组件,然后继续解决他们试图解决的问题。

我从一开始就学到了一些东西。首先,构建一个UI工具包是非常微妙的工作,需要很长的时间(尽管它碰巧一直非常令人满意)。但是,最重要的是,在其他组件中嵌入Figma组件有点神奇。

这就是原因。

首先,重要的是要注意,我试图将我们的组件分解成最小、最小的块。例如,我们的Breadcrumbs、Tabs和进度条组件都是相互独立的,我把它们都放到了一个Symbols页面中。

以下是我如何开始构建表单元素的一个示例:

据我所知,许多UI工具包就是这样设计的-有一个欢迎页面介绍了此文档的内容和使用方法;设计系统人员会维护一个\”符号\”页面,其中包含从按钮到表单的所有内容,作为符号或组件;然后通常还有另一个页面包含这些符号的示例,代表最终的应用程序。

Shopify的设计系统Polaris也会使用它们的草图文件来实现这一点,但同样的还有一个页面我从其他大型设计团队看到了很多例子:

</Figma中的设计-注意下面的正斜杠(/)用在了ProgressBar/TwoProgressBar/Three组件的名称中,这就是Figma用于识别实例的命名约定。这意味着,当设计师从UI工具包中拖拽ProgressBar组件时,他们可以在不同的选项之间切换,比如:

,真漂亮!但当我把UI分解成这些小组件后,我开始思考如何将这些组件组合在一起,让我们的设计团队更轻松。我很快意识到,在我们的应用程序中,我们有导航项目,如面包屑或进度条,但他们总是有一个标题与之相关。一旦我弄明白了这一点,我就开始了一系列新的组件,叫做Header/DefaultHeader/BreadcrumbsHeader/ProgressBar,等等,它们都嵌入了这些组件。

所以,现在当设计师把Header组件拖进他们的模型中,他们可以这样做:

我们在不同的Header实例之间切换,看起来还不算多。但是!由于我们在Header组件中嵌套组件,设计师可以跳转到子组件中,比如ProgressBar并对其进行更新:

这有多整洁?再说一次,这看起来还不是特别有用,但是在更大的组件中嵌套组件意味着您可以开始以巧妙的方式使用它们。

有趣的地方在于:在Gusto,我们为我们的客户类型提供了两种不同的UI。我们有负责管理工资单的管理员,然后他们的员工可以访问他们的帐户来查看他们的工资。这两个组件有不同的导航和选项,所以我为它们创建了两个组件:Frame/AdminFrame/Employee

这两个组件有侧边栏和导航项,但随后被放置到一个名为Layout/Default的单独组件中,我们在其中放置了Header组件。但是,由于这些组件是实例并嵌套在一起,我们可以开始单击UI中的clack位以获得所需的精确界面。

现在,每当设计师需要在不同UI之间切换时,他们都可以使用这些嵌套组件和实例在它们之间进行超快速切换。我刚刚开始尝试这个方法,但是我的想法是通过使用这些嵌套组件,你可以让人们在不同的变体之间切换,同时也为更大的布局提供了一个很好的API。

如果您正在使用Figma、Sketch或其他设计工具中的实例,请告诉我!我一直在寻求改进,但我认为这无疑是一个好的开始

CSS在Figma中嵌套组件 为WP2原创文章,链接:https://www.wp2.cn/css/css%e5%9c%a8figma%e4%b8%ad%e5%b5%8c%e5%a5%97%e7%bb%84%e4%bb%b6/

发表评论

您的电子邮箱地址不会被公开。