DEV Community

Cover image for Building a UI from scratch, based on a design with ReactJS
Germán Llorente
Germán Llorente

Posted on • Updated on

Building a UI from scratch, based on a design with ReactJS

#react #javascript #tutorial #design

This is the first article of the Building a UI from scratch series:

In this article we will build a UI following a design. We will use Figma to visualize the design, but is also possible to use any other tool that allows you to extract the CSS code from the elements, such as invisionapp, zeplin, etc.

Read this in Spanish

Live demo: https://llorentegerman.github.io/react-admin-dashboard/

Repository: https://github.com/llorentegerman/react-admin-dashboard

Uploading a design to Figma

I will not enter in details about the tool, we only need a design.

  1. Create an account in https://www.figma.com (free).
  2. I have selected a random Figma file from https://www.figmafreebies.com (free). The selected file is: Figma Admin Dashboard UI Kit. I'm using the web version of Figma, so, you have to click DOWNLOAD FREEBIES button, and the design will be added to your account.
  3. You can double click on each element and see the css code related to it in the code tab that is in the right column.

screenshot3

Creating the app

For this step we will use Create React App:



npx create-react-app react-admin-dashboard
Enter fullscreen mode Exit fullscreen mode

We will use aphrodite for the styles and simple-flexbox to make the layout.

yarn add aphrodite simple-flexbox or npm install aphrodite simple-flexbox

Folder structure:

For this case we can keep a simple structure:



/src
    /assets
    /components
    App.js
Enter fullscreen mode Exit fullscreen mode

Let's do it

We are ready to start, first we need to identify the main blocks of the design. I have decided to split it into 4 main blocks as follows:



1- Sidebar
2- Main Block
    3- Header
    4- Content
Enter fullscreen mode Exit fullscreen mode

As you can see in the image, blocks 3 and 4 are inside block 2.

Screenshot1

Sidebar

We can split the Sidebar in 2 parts, Logo block, and MenuItem list.
We need 3 components for this:



1- SidebarComponent
    2- LogoComponent
    3- MenuItemComponent (list)
Enter fullscreen mode Exit fullscreen mode

We will start defining the Logo and Menu Items

LogoComponent.js

First we need to download the Logo (double click on the logo, go to the Design tab and click on export button bellow). I downloaded it in svg format and imported it as a React Component, to copy it click here.

LogoComponent.js is a Row centered vertically and horizontally, with the Logo and the title.

For styles, we need to import Muli font family, the easy way is include this line in App.css (we can remove the rest of the content, we don't need it):



@import url('https://fonts.googleapis.com/css?family=Muli');
Enter fullscreen mode Exit fullscreen mode

These are the styles for container and title



container: {
    marginLeft: 32,
    marginRight: 32
},
title: {
    fontFamily: 'Muli',
    fontStyle: 'normal',
    fontWeight: 'bold',
    fontSize: 19,
    lineHeight: '24px',
    letterSpacing: '0.4px',
    color: '#A4A6B3',
    opacity: 0.7,
    marginLeft: 12 // <--- necessary to separate title and logo
}
Enter fullscreen mode Exit fullscreen mode

View full file: LogoComponent.js

MenuItemComponent.js

It represents an item of the menu, it's composed by an icon, a title and has different styles depending of its own state (active, unactive, hover). If it's active, has a white bar at the left.

As you can see, there are some special styles depending on active property, for example the title has a different color when active is true. For the icons, default fill is #9FA2B4 and default opacity is 1, these values change depending on the state of the above mentioned property.
A special element that appears when the item is active, is that white bar on the left (activeBar).

These are the styles:



activeBar: {
    height: 56,
    width: 3,
    backgroundColor: '#DDE2FF',
    position: 'absolute',
    left: 0
},
activeContainer: {
    backgroundColor: 'rgba(221,226,255, 0.08)'
},
activeTitle: {
    color: '#DDE2FF'
},
container: {
    height: 56,
    cursor: 'pointer',
    ':hover': {
        backgroundColor: 'rgba(221,226,255, 0.08)'
    },
    paddingLeft: 32,
    paddingRight: 32
},
title: {
    fontFamily: 'Muli',
    fontSize: 16,
    lineHeight: '20px',
    letterSpacing: '0.2px',
    color: '#A4A6B3',
    marginLeft: 24
}
Enter fullscreen mode Exit fullscreen mode

View full file: MenuItemComponent.js

SidebarComponent.js

As we did with the Logo, we need to download the icons that we will use in this component, it's possible do it from the design or you can copy them from the folder assets of the repository clicking here.

Based on css extracted from the design, we can define the styles with these 3 classes:



container: {
    backgroundColor: '#363740',
    width: 255,
    paddingTop: 32
},
menuItemList: {
    marginTop: 52
},
separator: {
    borderTop: '1px solid #DFE0EB',
    marginTop: 16,
    marginBottom: 16,
    opacity: 0.06
}
Enter fullscreen mode Exit fullscreen mode

View full file: SidebarComponent.js

SidebarComponent is ready, in the repository I have added some onClick events and a state to do it interactive, so you can select the differents menu items.

MainComponent (App.js)

Now we only need to work in App.js, as we said, has the following structure:



1- Sidebar
2- Main Block
    3- Header
    4- Content
Enter fullscreen mode Exit fullscreen mode

It can be defined as follows:

Styles:



container: {
    height: '100vh' // menu has to take all the height of the screen
},
content: {
    marginTop: 54
},
mainBlock: {
    backgroundColor: '#F7F8FC',
    padding: 30
}
Enter fullscreen mode Exit fullscreen mode

View full file: App.js

HeaderComponent.js

To finish, we will define the Header, with the following structure.



1- Row ({ vertical: center, horizontal: space-between })
    2- Title
    3- Row ({ vertical: center })
        4- Icons
        5- Separator
        6- Row ({ vertical: center })
            7- Name
            8- Avatar
Enter fullscreen mode Exit fullscreen mode

screenshot4

Header styles:



avatar: {
    height: 35,
    width: 35,
    borderRadius: 50,
    marginLeft: 14,
    border: '1px solid #DFE0EB',
},
container: {
    height: 40
},
cursorPointer: {
    cursor: 'pointer'
},
name: {
    fontFamily: 'Muli',
    fontStyle: 'normal',
    fontWeight: 600,
    fontSize: 14,
    lineHeight: '20px',
    textAlign: 'right',
    letterSpacing: 0.2
},
separator: {
    borderLeft: '1px solid #DFE0EB',
    marginLeft: 32,
    marginRight: 32,
    height: 32,
    width: 2
},
title: {
    fontFamily: 'Muli',
    fontStyle: 'normal',
    fontWeight: 'bold',
    fontSize: 24,
    lineHeight: '30px',
    letterSpacing: 0.3
}
Enter fullscreen mode Exit fullscreen mode

View full file: HeaderComponent.js

Content will be explained in another article

Thanks for reading

Top comments (3)

Collapse
 
dance2die profile image
Sung M. Kim • • Edited

Thanks for the post.
Would you have a plan to make the dashboard responsive in another article?

Currently, the dashboard just seems to scale down.
demo

Collapse
 
llorentegerman profile image
Germán Llorente •

Yes, absolutely, the main idea was to build a UI from a design, but I will include a responsive design in a future article, probably using the breakpoints property of simple-flexbox.
Thanks for your comment!

Collapse
 
dance2die profile image
Sung M. Kim •

Thank you, Germán for the explanation.
Looking forward to the series~ 😀

Read next

dinesh-se profile image

Managing Multiple Dialogs in Angular Material

Dinesh Haribabu -

egeaytin profile image

What is SCIM Provisioning: In-Depth Guide [2024]

Ege Aytin -

thepracticaldev profile image

Congrats to the Wix Studio Challenge: Community Edition Winner!

dev.to staff -

sunnyss profile image

Java Programming

sunny -