From Figma to WordPress (Bricks Edition)

Duration: 3+ hoursCourse type: Design, UI/UXCourse instructor: Paul C
Course Description

The From Figma to WordPress course is here to help you become more efficient by taking your design process from inefficient tools or your page builder of choice and moving to a rapid design platform – Figma!

Design Faster

Spend less time fighting with the wrong tools like your page builder, and use a dedicated design and prototyping tool like Figma.

Once you’ve worked through the initial module to gain a solid understanding of the fundamentals of Figma, you’ll soon be up and running, creating amazing-looking designs with minimal effort.

Smooth Collaboration

Smooth collaboration is the key to a streamlined workflow, and using tools like Figma can help guarantee that your workflow is seamless and helps your clients become a part of the whole process.

Once you’ve agreed on the final design, making simple changes or global alterations becomes much easier; making it a reality using your WordPress design tools of choice is even easier.

From Design To Reality

Learn how to design with the end result at the forefront of the process. Taking your design visions to a fully realised and interactive end result has never been easier.

Learn the process I use to achieve this and immediately add your new-found skills to your workflow. You’ll love the flexibility, and your clients will love the ease with which you realise their visions.

Course Modules

Module 1: Designing With Figma

This first module focuses on covering the basics of working in Figma. You’ll learn how to set up your artboard, add frames, configure your colours, configure your typography, set up your 8-point grid, and create reusable components to speed up your design process. Once you’ve learnt the basics of working with Figma, I’ll take you through the complete design process, focusing on building a one-page design for a UI/UX designer.

By the time you’ve worked your way through the entire process of building the design we’ll be using for each of the subsequent modules, you’ll have a solid understanding of the fundamental tools and skills needed and some awesome time-saving ones.

  • Module introduction
  • What is Figma?
  • Figma basics
  • Setting up Figma
  • Component library
  • Building the hero section
  • Creating the Call to Action section
  • Building the portfolio gallery
  • Designing an about me section
  • Current skills section
  • Adding a contact form section
  • Creating the global footer
  • Bonus: Understanding Auto Layout in Figma
  • Bonus: Using the Inspect tools

Module 2: Building the design with Bricks Builder

This module focuses on taking the Figma design and building it using Bricks Builder for WordPress. You’ll benefit from using global styling and other methods to smooth and streamline your design process.

The final stage will ensure the design is fully responsive to mobile devices.

  • Module introduction
  • Hero section (part 1)
  • Hero section (part 2)
  • Call to Action section
  • Building the Portfolio section
  • Creating the About Me section
  • Adding the Current Skills section
  • Adding the Contact Me section and form
  • Building the footer
  • Responsive setup
  • Wrapping up the course

About the course

Learn how to use Figma to build a clean & professional landing page design and convert it to WordPress using Bricks Builder.

The course will take you step-by-step through the entire process in an easy to follow format.

Each lesson builds on the previous to ensure you not only learn but understand the ‘how and why’ of the tools used.

Parity pricing available in supported countries.

Lessons: 25

Software used: Bricks, Figma
  • Duration: 3+ hours

Cost $97

Purchase Course

Community

Join the WPTuts
Academy Today

Join over 400 members and gain access to a vibrant community of web designers today.

Join Today
WPTuts Academy Screenshot