Reactive - A Design System built with React - Part 1
What will happen if you combine the power of Design and Engineering together ? Reaction ! That’s what Reactive is all about !
When you build a react website or app. What’s the first thing that comes to your mind ? You are right ! Its how our website or app should “look and work” in other words “UI UX”. Without UI UX the website or app will be unusable and people hate bad user experiences when it comes to using a website or app.This can lead to engineers spending a lot of time and effort reinventing the wheel instead of leveraging a universal design system across the company.
Design System is a important part of any company building a product. Because design systems, there is always a large gap of ideas and work when it comes for team work between the Designers and Developers. To reduce this huge gap, we require a Design System or Language that is followed by both the Designers and Developers. Now both can sync between each other and will be working on the same page knowing which UI’s will be better and give a better UX for the apps or websites.
What is a design system?
A design system is a set of reusable components that, in combination with a set of rules and design tokens (referred to as entities), stores visual design information, like colors or spacing, and enables you to build consistent and accessible applications quickly.
A design system serves as a common language between teams of engineers, designers, and product managers, making it easier or them to work together. It fosters productivity through this shared understanding of building blocks. Design systems also help onboard new engineers and designers—they can quickly go through all the possible components and design tokens used by a given engineering organization.
Requirements for a Design System
Development environment to view components
Documentation (with prop-types and examples)
Unit testing (and ideally visual regression)
Automated code linting and formatting
If you wantt to learn more on this topic : click [here]
We will be using the following tools to build our System.
We will be building - “REACTIVE”
BTW ! Sorry Guys, No Mac this time. I am using Ubuntu on a HP Laptop !! So we wont be using those highly popular Macbook only tools like Sketch or Zeplin in our journey, But Not to Worry ! We will be using open-source free to use tools that works with Linux and Windows too :P
So here, I am listing down the tools i will be using for the process !
UI Prototyping tool
Colors and Brand
CSS in JS
Styleguide and Documentation
Code Transpiling for Development
Managing our Shared UI components
Testing UI Components
Code Linting and Formatting
Version Control System
Static Site Generator for React
In the next part we will deal of information related to why Design Language and System is required.