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

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

• Part #1: Building a UI from scratch, based on a design with ReactJS.
• Part #2: Building a UI from scratch, Responsive Sidebar and Header.
• Part #3: Building a UI from scratch, Responsive Content.

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.

Creating the app

For this step we will use Create React App:

npx create-react-app react-admin-dashboard

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

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

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

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)

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');

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
}

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
}

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
}

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

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
}

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

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
}

View full file: HeaderComponent.js

Content will be explained in another article

Thanks for reading

Comments

[Sung M. Kim]

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.

[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!

[Sung M. Kim]

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