Web Design with Figma and WordPress is a beginner course in designing web pages in Figma with Auto Layout, components and prototypes, then building them as a real WordPress site with the drag-and-drop Elementor editor that works on every screen size. It suits newcomers, UX/UI designers and corporate website maintainers, and you leave with a three-page site that matches your Figma design.
A website that looks good and is easy to use does not always have to start with code. Designing the pages in Figma first helps the team agree on layout, colours and type, and the design can then be built as a real site with WordPress and Elementor, a widely used drag-and-drop page builder, so site managers can keep editing content without relying on a developer every time.
This course lays the foundations of good web design, then takes learners through designing web pages in Figma with layout grids, Auto Layout, styles, variables, components and prototypes. Learners install WordPress 7.1 locally, create pages and menus, use the current Elementor editor with variables and classes to build pages that match the Figma design and work at every screen size, and finish with a workshop that builds a three-page website from a Figma file. (1 day, 6 hours, Beginner level.)
Course Details
This is the 2026 edition of the Web Design with Figma and WordPress course. It runs for 1 day, 6 hours (09:00-16:00), as lectures with labs, at Beginner level. The content is updated for WordPress 7.1 and Elementor V4, which styles pages with variables, classes and components, and the Figma side uses Auto Layout, variables and components in the current interface. Every lab uses the free version of Elementor, and Elementor Pro features are shown as an overview. Learners use their own Figma account, where the free Starter plan is enough, and take home the course handbook, sample Figma files and Elementor template files.
Day 1: From Figma to a WordPress Site with Elementor
No public rounds are open right now. Join the waiting list and we will contact you first when the next round opens, or ask us on LINE. Or call 02-570-8449 or 088-807-9770
Elementor is a page builder plugin for WordPress that lets you design pages by dragging and dropping on a live preview. The current Editor V4 styles pages with variables for colours and fonts and classes for reusable styles, so the whole site stays consistent and can be changed in one place. You can save frequently used parts as templates or components and switch between desktop, tablet and mobile views to fine-tune each screen size. This course uses the free version of Elementor in every lab.
A component is a master element you create once and reuse in many places, such as a button, card or menu. Each copy is an instance, and when you edit the main component every instance updates, while you can still override text or colour locally. Used with colour and text styles and variables, components keep the whole site consistent, make changes quick and map neatly onto classes and components in Elementor.
Start by exporting images and icons from Figma and recording the colours, fonts and spacing in a spec sheet. Then set colour and font variables and create classes in Elementor to match the design, create a new page, build it section by section with containers, add headings, text, images and buttons, and match the spacing to the design. Finally check and adjust the tablet and mobile views. This course follows these steps until you have a three-page site.
It suits beginners who want to design and build a website themselves, UX/UI designers who want to turn Figma designs into real sites, business owners and corporate website maintainers. No coding or design experience is needed: you just need to be comfortable with a computer and have a Figma account, where the free Starter plan is enough.
You will be able to design web pages in Figma following good practice, use Auto Layout, styles, variables and components, link pages with prototypes, install WordPress 7.1 locally, create pages and menus, and use Elementor to build pages that match the design and work on every screen size. Participants who complete the training receive a Certificate of Completion with its own number, which can be verified online.
Yes. IT Genius Institute runs in-house training for teams, with examples adapted to your own work, such as designing and building pages for your organisation's site or a project your team manages. Sessions can be held onsite or online. Contact the institute for details and a quotation.
Articles are published in Thai.
Web design today has to look good, work on every screen size, load quickly and be easy for a team to keep editing. Writing all the CSS by hand often ends in long files nobody dares to touch, while component-based CSS frameworks make sites look alike and are…
Websites today must look good on phones, tablets and desktops, and writing fully responsive CSS from scratch takes a long time to learn. Bootstrap 5 is a CSS framework that makes responsive layouts quick with its grid system, utility classes and ready-made…
Websites today must look good on every screen size, load quickly and work for everyone. Yet many teams still design pages as static pictures and leave developers to guess, so spacing, colours and type sizes drift from the design, pages break on mobile and…
