Figma to bootstrap: Learn The Complete Web Design Process

Figma UI UX Design to Front End Web Development | Learn How to Use Figma to Design Eye Catching Modern Websites

What you'll learn

How to use Figma
How to do UI UX designing using Figma
How to convert a Figma template into a Bootstrap static website
The basics of UI UX design

Requirements

No previous knowledge in Figma is required
Basic front end knowledge will be helpful
A computer with internet connection is needed

Description

Hi everyone. I'm Sofiullah and I'm a full-stack web developer. I started this career as a front end web developer.

In the beginning, I was not so good with the user interface designing. Do you know that most of the front and back end web developers are terrible in the case of designing skills? But without a great UI design, there is no chance of getting any user satisfaction at all. For those reasons, developers are dependent on UI UX designers. They use complex tools like adobe photoshop to create UI designs.

At that time, I don't have enough money to hire a designer or to buy a website design template. So, I tried to create the HTML template based on my own design and to sell it. I used to create an imaginary design in my mind or do a basic sketch or mockup on a piece of paper. Then I would just jump into the coding process. But that was very tough. If I don't like a style I have to change the code to change the style. And I had to keep changing the codes until the style feels good.

But that was a terrible way of doing things. It was very time-consuming and not productive at all. Because as you already know…coding takes a lot of time. Then I decided to create the basic design first then to code this.

Although, most of the graphics designers use adobe photoshop to create a PSD website template. But the problem with photoshop is…it is a bit costly and not easy to learn. I don't need to learn all the complex functionality of photoshop to create a basic template of a website. That's why I have chosen figma…its totally free and extremely easy to work with. You can create your own UI design also by using simpler tools like Figma. Figma is an innovative and brilliant tool for User Interface design. It's used by everyone from entrepreneurs and start-ups to Apple, Airbnb, Facebook, etc.

So, that's what this course is about. In this course, we will create a mockup using Figma. We will use almost all of the functionality of the Figma UI to create this template. We will learn by creating real-world template design. No boring stuff needed to learn anything, right?

After creating the UI design by Figma, we will move on to the front end part. We will convert the template in a static bootstrap template. In this course we will design a template from scratch by using Figma and than we will convert it into a bootstrap template. If you are stuck with designing or just starting out your web design career then this course is a great start for you. I have tried to share all the experiences I have gathered on my journey as a web developer and tried to explain everything very simply for your better understanding.

So guys….see you in the course. Take care!

Who this course is for:

Web developers who are really bad in designing.
Beginner UX UI designers who want to know about the complete web design process
Anyone who wants to design beautiful websites with Figma