Sujay Kundu

Full Stack Web Developer, Blockchain, Security

Posted by : at

Category : react   web-development   javascript

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

Components

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 !

Operating System

Ubuntu LTS

Ubuntu 18.04

Web Browser

Google Chrome

Google Chrome

Code Editor

Microsoft Visual Studio Code

VSCode

Javascript Library for building Interfaces

Facebook ReactJS

ReactJS

UI Prototyping tool

Figma

ReactJS

Colors and Brand

curls

Culrs

CSS in JS

React JSS

React JSS

Styleguide and Documentation

React Styleguidist

React Styleguidist

Code Transpiling for Development

Babel

Babel

Managing our Shared UI components

Bit

Bit

Testing UI Components

Jest

Jest

Code Linting and Formatting

ESLint

ESLint

Code Bundler

Webpack

Webpack

Version Control System

Git

Github

git

Tasks Management

Gitkrakken

Gitkrakken

Static Site Generator for React

Gatsby

Gatsby

In the next part we will deal of information related to why Design Language and System is required.