Bonnie studio's react components plan and strategy in place

#Figma Components
#React Components
How we built Bonnie studio and the importance of having strategy in place for components in development process.
7 min readΒ·
Published on March 22, 2021 by
Author Image
Ugi Stelmokaitis
Developer of Bonnie studio
About Header Image

Many people reached out to us and asked how we built Bonnie.studio with Next.js. From my experience developing with Next.js can be difficult and complicated, because planning how many components you will have in your website is hard to predict as well as where to start from. It's like making pancakes πŸ₯ž with more toppings till everything gets messy... So I decided to sit down this morning to write a blog about how we built Bonnie studio and how important components are in development process.

What is component and how do you use it?

When our designer Bonnie finished design on Figma, I started writing components as a code base. Then I refactored the code about 60 times 😬 and, eventually I deleted everything and went back to stage one which is Figma design files. I'm just joking... No I'm not πŸ˜’!

This is a common mistake for beginners as they often tend to rush into writing code straight away instead of planning, structuring and building components in the beginning stage. To avoid wasting time and putting so much of effort into the project, it's really important to have good strategy allowing you to keep things clean and neat.

Alright, let's dig out more about how I used components to build Bonnie studio website and how everything eventually came in place. I'm going to share 5 tips to utilise components to build website easier, simpler and clearer.

Components

1. Identifying components from Figma design file

Once the UI design of website is completed on Figma, we go through whole design to identify design elements which can be built into components. Components can be header, footer, button and any other element that is repeated over and over again throughout web design or things that do similar function in a website. As our goal is to keep everything tidy, as we focused on building with a clear code so people find it easy to read. We believe that each component must do only one function at a time, as components can take huge space in coding. It's better to make them as one function that does all the job for you and maintains the tidy and clean look. If you have noticed that you tend to overwrite same code over and over again, that is a huge indicator that this must be one piece of code for multiple pages as they are running same task.

2. Simplicity is the key to save your time and effort

We can not stress enough that having good structure in your planning is really important to save tons of your time and effort to develop a website. As we mentioned above, our goal in this project was to ensure clarity and simplicity no matter how complex the design studio is. So, we focused on breaking the design elements down and making components at the beginning of development process. This helped us have better control and flexibility to utilise primary components to add variations or modifiers on easily whenever needed without any further hustle.

3. Building Figma to Next.js

Next.js is a JavaScript framework created by Zeit, which helps you to build server-side rendering and static web applications using React. It is a great tool to build a website as it ensures that updating design won't overwrite any custom code we have written to make the website functional. It also helps to seperate Figma generated design code and functional code in compartments. This is not the end! It's also helpful to have our functional code reusable across designs. It's basically as same as how you reuse React components.

I will let the image speak for itself!

Components

Here, you can see what we have on Figma:

  • Header and footer
  • Different types of button
  • Different types of style (Font, drop shadow, etc.)
  • Color palette

We turned the visual design elements on Figma including components, styles and colors to Front end code which are features that are directly viewable and accessible by the end user.

4. Component ranking in specific order

Once the components are identified, we arrange items in hierarchical structure where each item is represented as being above, below or at the same level as another element.

  Bonnie.studio 
		β”œβ”€β”€β”€β”€β”€β”€β”€ .next
		└─────── .vscode
		└─────── components
		|	  β”œβ”€β”€β”€β”€β”€ footer
		|	  β”œβ”€β”€β”€β”€β”€ header
		|	  β”œβ”€β”€β”€β”€β”€ layout
		|	  β”œβ”€β”€β”€β”€β”€ mailchimp
		|	  β”œβ”€β”€β”€β”€β”€ meta
		|	  β”œβ”€β”€β”€β”€β”€ mobileMenu
		|	  β”œβ”€β”€β”€β”€β”€ modal
		|	  └───── pagination
        β”œβ”€β”€β”€β”€β”€β”€β”€β”€ pages
        └──────── post

		 

This folder structure contains a simple example of a similar structure we have used in place to split our code into multiple bundles, which allows us to keep things clean and avoid component naming problems and confusion from developing updates in the future. The most interesting part is that we had around 250 files and more than 30 pages in early stage of this big project - building bonnie studio website. But after setting up the strategy, it came down to around 200 files, 20 pages and 9 primary components for the whole website, which is pretty damn good if you got a big project for start up company. What we are trying to say here is this is just another proof that route based directory structure in place matters and we can't stress enough how important to have it in planning at the begging of development process.

5. The layout of the components

When it comes to building website layout, it must be symmetrical, clear and orderly. The common repeated items I used for layout are components such as

<Header /> 
 <Footer /> 
 <Meta /> 

And here is the example of component folder which I have built - pages/layout/index.js

import React from 'react';
import Footer from '../footer';
import Header from '../header';
import Meta from "../meta";

export default function Layout({ children, ...props }) {

    return (
      <>
        <Meta {...props} />

        <Header />

        {children}

        <Footer />
      </>
    );
}

In the image below, you can see that there is Container to add the space on either side of the page. Each item is positioned in the Center under the control of Grid columns.

GidColumns

Going forward

All of this giant mess was done with few simple commands in terminal

yarn create next-app
"What is your project named?>" bonnie.studio
yarn add next react-dom

As following we have used Next.js, Vercel, GitHub, Post Css and our own code of course, to get this thing running. The Bonnie studio website was built with Β πŸ’œ ,πŸ’§, β˜•οΈ and lots of late night work till 2am and so on.

funnyImage

Take away: Keep it consistent!

Whatever program you use for wireframe or whatever the design is on Figma / Sketch, each visual elements must match with the development code names for .js files. What does It mean by that? If an image is called as bonnie.png on Figma, then you should name that image as bonnie.png in your code. This will help you find the file easily on code base as developers mirror the design. Remember, keeping it simple and consistent is the key to build a strong website with less issues. You can break that component into more pieces later when needed. I hope you find what you are looking for in this article. Now it's time for you to play with components!

Author
Service Header Image
Ugi Stelmokaitis
Developer of Bonnie studio
Similar articles by Bonnie studio

Apple’s Future: Bold Types in iOS

There is nothing bolder than sharing your new designs with the world.

The Power of Storytelling in Your Graphic Design Portfolio: 7 Techniques

The portfolio is an invaluable tool that can make or break your career. This guide teaches you the power of storytelling in your own graphic design portfolio.

Bonnie studio's react components plan and strategy in place

How we built Bonnie studio and the importance of having strategy in place for components in development process.

What You Need to Know for Designing Priceless User Experiences

The steps you take to make your work professional, when designing apps and websites.

Don't want to miss anything?

Get weekly updates on the newest articles about design and tips right in your mailbox.


Bonnie.Studio