卓越飞翔博客卓越飞翔博客

卓越飞翔 - 您值得收藏的技术分享站
技术文章65686本站已运行420

构建可重用 UI 套件的百分比

构建可重用 ui 套件的百分比

嘿开发者:)

简介

凭借 15 年以上的 UI 套件构建和设计系统经验,我的团队正在推出一个平台(免费测试版访问),允许开发人员在几天而不是几个月内构建一致且功能齐全的 UI 套件/设计系统。为您提供最先进的系统设计/系统设计的最佳实践,以重用 UI 组件,并结合访问 500 多个开源组件,您可以使用它们构建任何东西。

是的,它是开源技术,没有供应商锁定。这意味着您可以随时导出 UI 套件/项目的任何部分。我们的目标不是增强您的技术堆栈,也不是锁定您。

无论如何,你为什么要关心?

首先我们要解决的问题是什么,我们怎样才能这么快地构建一个 UI 套件?

可重用性和一致性是开发人员每天面临的总体挑战。

例如一些常见问题……

  • 如何为具有完全不同的品牌要求集的新项目重新品牌我的整个组件库?
  • 与非开发人员(例如设计师)合作使用可用的属性(颜色标记)是一种痛苦
  • 如何轻松组织和检查我的库,以避免重建已经可用的组件(尤其是作为一个团队)
  • 如果组件的属性太多,就很难扩展和重用。因此鼓励制造新组件,从而降低设计系统的效率
  • 虽然 Tailwind 和 Bootstrap 等组件库都是很好的现成组件库,但根据您自己的个人需求进行定制通常很困难且耗时,因为它们是针对某些用例和样式而构建的
  • Storybook、Zero height等设计系统和文档工具的兴起解决了部分问题,主要是团队之间的沟通。然而,设计系统的有效性取决于系统设计本身,而这些都不能提供。因此,您仍然需要花费大量的时间和金钱来开发一个系统,以促进整个 UI 套件的可重用性并设计系统代码架构。

Symbols 如何解决这些挑战?

几个关键点...

  • 除了提供 500 多个组件供您构建您想要的任何组件之外,您还可以构建 100% 可定制的组件。这些属性可以随时轻松覆盖
  • 检查组件库并将其组织到标签中,以避免构建现有的组件库
  • 一个高度先进的设计系统,可以在代码级别完成繁重的复杂任务,例如自动生成版式和间距的字体比例。这使得创建响应式设计变得更加容易,因为您不再需要为每个组件设置间距顺序。应用全局设计更改,例如在整个库等中应用深色模式
  • 在整个 UI 套件中使用和获取令牌名称,这显着减少了代码行数 = 代码变得更加可重用和可扩展
  • 轻松构建、测试、记录项目的任何部分,包括设计系统中的功能、页面、单个组件和颜色
  • 只需重新配置设计系统菜单,即可通过自动间距/响应式更改来重新命名整个 UI 套件/项目
  • 通过实时协作和无代码/低代码工具,您可以与其他开发人员和非开发人员同时构建您的项目
  • 避免设置和维护多个设计系统工具/文档,因为平台用户体验的设置可以轻松地将您的项目视为所有技术/非技术团队的文档
  • 在发布到生产环境之前,立即看到 Web 项目的开发版本的变化

需要注意的是,该平台可以根据您的喜好进行高度配置。如果您选择不遵循设计系统,则无需遵循设计系统,并且您可以关闭设计系统的某些设置,因为它被视为覆盖。

本月,我们在平台上添加了画布模式。制作符号,“面向开发人员的 Figma”,您的整个功能/动画/交互式 UI 套件都可以在画布上使用。这也意味着能够在不同模式下测试整个 UI 套件,例如从左到右的可访问性、响应式设备、全局模式等等。

要查看更多功能并尝试一下吗?

这是我整理的一个快速登陆页面(我是营销创始人),通过视频展示了符号的实际应用。

https://symbolsapp.framer.website/

感谢反馈!
有任何问题请告诉我:)

卓越飞翔博客
上一篇: 了解分支机构覆盖范围:综合指南
下一篇: 返回列表
留言与评论(共有 0 条评论)
   
验证码:
隐藏边栏