3 Foundations of a Reusable Component Design System

栏目: IT技术 · 发布时间: 4年前

内容简介:Many teams face the need to create a reusable component system. The need for such a system often rises from three main reasons: a) Keeping a consistent UI/UX b) Standardizing the frontend codebase c) Speeding development.In the modern development workflow,

The 3 essential pillars of a modern reusable component system.

3 Foundations of a Reusable Component Design System
Compose apps from independent components with Bit.dev

Many teams face the need to create a reusable component system. The need for such a system often rises from three main reasons: a) Keeping a consistent UI/UX b) Standardizing the frontend codebase c) Speeding development.

In the modern development workflow, your reusable component system serves another important purpose. It creates a common collaborative common ground between designers, product and developers.

To achieve these goals, and set the foundations for a sustainable design system, there are three essential foundations to set in place:

  • A design library — where components are designed.
  • A GitHub repository — where components are written.
  • A Bit.dev collection — where components are shared and reused.

Through these elements, put together, you can effectively enable the reuse of components in one collaborative and scalable system. Here’s how and why.

Design elements style guide

This is the first step in your reusable component system. Nearly every company building a tool you love has such a visual language system . To dive into the merits and hows of such a system, I’d advise reading the wonderful Nathan Curtis and particularly this blog series . It’s A+.

3 Foundations of a Reusable Component Design System
The stunning Slack Engineering design system (source)

What: Commonly, this includes a series of consistent visual elements created using tools like Sketch , Figma etc and uploaded to tools like Zeplin in concrete designs. This system also includes a written style-guide.

Why: Creating a visual language is much more than creating some image. It’s creating a consistent brand at every touchpoint, that gives users a warm familiar feeling. Through a component-based design system, we aim to achieve both visual and functional consistency.

Functional consistencymakes your product more predictable. Users know how an element behaves, and therefore will also feel more safe and secure to interact with it even on a page/screen they visit for the first time.

Visual consistencyincludes the colors, fonts, sizes, positions and other visual aspects of your UI which help your users cognitively identify and classify UI elements. A certain font color, for example, could be strategically used to help your users understand what they will get if they push a specific button.

4 Examples:

GitHub source-code repository

Many will jump and say “why GitHub? I’m on GitLab/BitBucket!”. Well, because I think you should open-source your library. And that’s GitHub.

3 Foundations of a Reusable Component Design System
Shopify’s Polaris design system; a developer’s perspective

What: Your GitHub component repo reflects the code implementation of your visual elements. It’s a Git-based project containing components written with our without modern frameworks (React, Vue, Angular). It also contains the required configurations, styling etc of the components. It’s often single-versioned and published as a package. Using tools like Bit component can be developed, versioned and published with modularity. It can be enhanced with visual example documentation using tools like Storybook or Styleguidist .

Why: Separating your components’ from the source-code of your consuming applications encourages modularity and reuse. If done right. A standalone repository makes it easier to develop all shared components in one place.

4 Examples:

Bit.dev reusable components

Bit.dev is the holy grail of your reusable component system.

It hosts the actual code of every component in the cloud and lets you reuse it in different projects. It manages everything from versions and updates to visual interactive documentation for all your components. All in one place.

3 Foundations of a Reusable Component Design System
Bit.dev — host, share and reuse any component

What: Bit.dev is the cloud for reusable components. It’s where all your components are hosted, managed, visualized and reused off the cloud. Through Bit.dev every developer can instantly find and consume any component into new projects, get updates, and stay in sync.

Why: A dedicated system for reusable components that makes every component independently available to develop, use and update. It also makes all your components discoverable in one place for everyone: developers, product and designers alike. It’s simple, scalable and collaborative.

4 Examples:

Conclusion

A reusable component system is key to scaling frontend development without losing control over UI consistency or codebase standardization. The three parts described above fall short on their own, but put together hold the power to create a collaborative component economy and compose UIs together.


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

学习Web设计

学习Web设计

罗宾斯 / 靳志伟 / 机械工业出版社 / 2009-1 / 65.00元

《学习Web设计(第3版)》从说明网站和网页是如何工作开始,逐步深入。当你看完《学习Web设计(第3版)》时,你将掌握使用优化的图像文件来创建多列CSS布局的技术,而且你将知道如何创建网页。这一版经过了彻底的修订,它可以教你如何根据现代设计的实践经验和专业标准来创建网站。《学习Web设计(第3版)》包含了一些练习,可以帮助你学习各种技术,还有一些小测验可以确保你及时掌握重要的概念。如果你对网站设计......一起来看看 《学习Web设计》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器