• Post category:StudyBullet-17
  • Reading time:6 mins read

Figma to WordPress: Learn to Design and Build Website
Learn how to design a modern portfolio website in Figma from scratch and convert it to WordPress website.

What you will learn

How to design beautiful and modern portfolio websites using Figma

How to convert Figma design to WordPress website

How to find design inspirations to create website from scratch

How to choose right colors, prototype and images for portfolio website

UI UX design best practices

How to build a WordPress website from scratch


Do you want to learn how to use Figma to design a modern & professional website from scratch and turn the Figma design into a fully functional WordPress website?

This course will help you to improve your web design skills and learn the Figma tool to design any type of website and convert any Figma design to WordPress using Elementor page builder.

This is a complete Figma to WordPress class.

In this class, you’ll learn,

  • How to use Figma software to design websites interface
  • Create a mood board to collect design inspirations
  • Pick the best colors, typography, images & content
  • Design the A-Z website according to UI/UX design principles
  • Convert Figma to WordPress
  • Use WordPress theme and plugins
  • Build a website with Elemento page builder free version

Also, I’ll show you the best practice and things that you should follow to speed up the process and give hassle-free service to your client.

This class is for,

  • Freelancer or individual web designer who likes to start a web design journey.
  • Anyone who likes to design their own custom portfolio website.
  • Anyone who likes to learn to convert Figma to a WordPress website

About me,

Get Instant Notification of New Courses on our Telegram channel.

I am Gihan Akalanka and I am a freelance web designer/developer. I will guild you through the step-by-step process of designing a complete portfolio website with Figma.

This is a beginner-friendly course,

Only you need a computer and internet connection to start this class. You can follow the steps with me and improve your skills and understand the tools that we use in this course.

By the end of this course,

You’ll have completed professional portfolio website design by you and you’ll have the knowledge to do the research to get design inspiration and create your own version of a website that can sell you for your clients.

Let’s get started!





Figma Basic

Pros and cons of Figma design tool
Create a Figma account and walkthrough
Figma frame and grid

First Design

Create sample hero section
Add colors and background image
Create different hero sections

First Project

Understand the project scope
Find designs inspirations to create mood board
Create the mood board
Arrange selected mood board designs to single frame
Select typography and colors
Create Figma library

Design Website

Design main menu
Design the hero section
Create the achievement section
Design the about section
Create the experience section
Add service section
Create the testimonials section
Add Font Awesome icons plugin
Add contact section
Create footer section
Adjust layouts of website