7 Tools for Building Your Design System in 2020

blog.bitsrc.io blog.bitsrc.io3 years ago in #UX Love185

Building a component design system? Seeking better designer-developer collaboration? Here are some awesome tools ⭐️ Legend has it that the first design system was introduced by NASA in 1976. Since then, design systems turned into a widely common practice used to standardize design and development of a visual language in multiple instances across different teams, projects and applications. Today, modern components take the notion of design systems beyond visual elements, opening the door to the true consolidation of component-based design and development. However, the current ecosystem is still gapped between design tools and developer tools. Through tools built to bridge this gap from both design and development ends, we can bring together designers and developers to collaborate like never before, in one unified system. In this post we’ll explore some of the most popular and most promising tools and technologies that pave the way into this future. We’ll explore how familiar design tools like Invision and Sketch manage component design systems, introduce groundbreaking developer-first component collaboration tools like Bit and component-based design tools like Framer, and beyond. Feel free to comment below and share your own ideas and insights! Manage your visual language as a component design system. Invision DSM Invision Design System manager empowers designers to manage the design angle of their system in a way built for standardized and unifed systems. It provides tools such as component drag & drop, component search, enhanced team sharing, management of version history and a semi-automatically generated style guide to complete the visual system you build. It even integrates into your Sketch libraries to create a unified workflow. Sounds useful? it is, and just think of the potential if combined with component platforms like Bit on the developer’s side, to turn the visual design system into a managed, reusable and cross-project controlled set of visualized and consumable components which can be used and updated anywhere. Sketch Libraries If you’re working as part of a team with other designers, Sketch’s Libraries let you place your document somewhere where your colleagues have read-access such as a Dropbox folder, or repository in GitHub, etc, have them add the document to their Libraries in Preferences, and they will have quick and easy access to the styles and Symbols in that document. You can receive updates made to the file. And, it works with Invision DSM too, and hopefully soon it will integrate with platforms like Bit for an utopian component experience. A Library is just an ordinary Sketch document that contains Symbols, Text Styles and Layer Styles, which you can then use in any other Sketch document. If you update any of the Symbols or styles in your Library file, documents containing instances of those Symbols, or any of your predefined styles, will receive a notification telling you that they can be updated. Definitely a mandatory option to explore when building a design system. Easily share and manage reusable components across projects and teams. Let everyone collaborate over your actual components. Design systems made from real code components in bit.dev Bit is a popular developer-first platform for managing and collaborating over components across projects and teams. It’s built for components written in any JS framework, or without a framework. Through Bit you can seamlessly isolate components from different GitHub projects, and export them into a unified collection in the bit.dev platform. From there, everyone can discover, install and update components anywhere. When building a design system, Bit lets your colalborate and reuse components to keep your UI/UX consistent and development standardized. It also brings everyone together over your actual managed code, in a visual way. ->…

Like to keep reading?

This article first appeared on blog.bitsrc.io. If you'd like to keep reading, follow the white rabbit.

View Full Article

Leave a Reply