如何在初创公司中建立设计系统
2024 年 5 月 28 日

在初创公司中,如果你是唯一的设计师,构建设计系统总是很困难的。你的工作可能非常繁忙,因为你同时处理多个事务。你必须为产品设计制定高层战略,交付功能,与产品人员合作,支持开发人员和质量保证人员,进行用户访谈等等。

此外,你还必须不断提升自己的技能。Figma是我们用于所有与产品相关功能的主要工具:所有设计、探索和头脑风暴都在那里进行。

在我加入Statflo后不久,我们开始着手重新设计应用程序。在这个过程中,我需要一个设计系统,让我能够快速移动并在几次点击内创建原型。

不要犹豫使用现有的开源设计系统。 #

起初,你并不需要太多。大部分元素 您将使用的设计系统组件是原子组件:按钮、下拉菜单、表单、字体、颜色等。系统的初始样式并不重要-您可以在几次点击后轻松更改样式。

在第三方设计系统中,您需要关注的最重要的事情是灵活性和正确的组件嵌套。

以下是一些您可以开始使用的设计系统:

免费Ant Design 开源 (opens new window), Lexicon DSL (opens new window)

付费Tetrisly (opens new window), Venus Design System (opens new window), 73px (opens new window)

基本组件、颜色和排版 #

如果您决定继续使用自己的设计系统,您应该首先专注于几个简单的事情:颜色、排版和基本组件。

这种策略将使您能够更快地创建设计。例如,如果您需要创建一个输入字段,您可以使用一些预定义的样式和组件来简化这个过程。 您可以从默认状态开始,并在以后的阶段添加其他内容。

例如,如果您不确定在输入字段内使用哪种图标,只需创建一个16x16的正方形,填充灰色,然后将其设置为组件。这将让您可以继续前进,并且将更容易在将来更新此图标。

始终从一个组件开始

当您是初创公司中唯一的设计师时,有时可能没有专门的时间来构建设计系统。如果您想节省时间,我建议开始构建用户界面,并在进行的过程中将所有元素转换为组件。

通过这样做,您将节省大量时间,并且有助于您决定哪些元素在开始阶段最为关键。

理想情况下,您应该从创建一个元素开始,并将其转换为组件作为下一步,这样您就不需要花时间替换组件。

使用Figma的“Master”插件

有时,当您匆忙时,可能会忘记创建一个组件,最终导致重复复制几个画板。 对于拥有相同元素的多个设计,手动逐个更改非常繁琐。有一个很棒的插件可以帮助将所有常规元素转换为一个组件。这个插件叫做“Master” (opens new window),由Gleb Sabirzyanov创建。

此外,为了转换不同画板上的所有元素,您需要选择它们所有。Similayer (opens new window)插件将帮助您完成这项任务:只需一次点击,您就可以指定多个画板内带有任何规格的UI部分的选择。

有时候在任务/项目之间有一些空闲时间,最好的方式就是用这段时间来改进和完善设计系统。相信我,您在此过程中所花费的时间将在创建新功能或组装另一个原型时得到回报。

我经常试图在一周的日历中预留几个小时,以确保我能够进行设计系统的改进。这样做会在设计新功能或组装另一个原型时给您带来帮助。 在设计系统中逐步进行改进和优化。

在创建用户界面时,当您刚开始为设计系统制作组件时,通常没有时间考虑适当的组件命名。我强烈建议将这一步移到后期阶段,当您有更多组件时再考虑适当的路径、命名和嵌套。

有几个很好的插件可以帮助您批量重命名元素:Rename It (opens new window)Ultra Renamer 2 (opens new window)Regulator (opens new window)甚至在Figma中的开箱即用功能 (opens new window)

UX Collective为我们发布的每篇文章捐赠1美元。本故事为[世界级设计师学校](ht 位于非洲的设计学院(https://www.wcd.school/)是一所大学水平的免费设计学校,致力于为年轻有才华的非洲设计师准备好进入本地和国际数字产品市场的能力。打造您所信仰的设计社区。