Modern Web Design with Figma and Bootstrap 5 is a course in designing web pages in Figma with layout grids, components and prototypes that match Bootstrap, then building them as real pages with Bootstrap 5.3, custom themes and dark mode. It suits UX/UI designers, front-end developers and website maintainers, and you leave with a responsive landing page.
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 work goes back and forth for several rounds. Designing in Figma with a structure that matches Bootstrap's grid and components from the start lets design and code speak the same language.
This course takes learners through designing web pages in Figma, from wireframes, a 12-column layout grid, styles, variables and components to prototypes that link pages together. Learners then build the design as a real site with Bootstrap 5.3 on Vite, using the grid, utilities and components such as the navbar, cards, modals and forms, and customise the theme with Sass and CSS variables, including dark mode. The course closes with a workshop that turns a Figma landing page into a responsive web page and checks its quality with Lighthouse. (1 day, 6 hours, Beginner level.)
Course Details
This is the 2026 edition of the Modern Web Design with Figma and Bootstrap 5 course. It runs for 1 day, 6 hours (09:00-16:00), as lectures with labs, at Beginner level. The content has been updated for Bootstrap 5.3, which uses CSS variables and supports dark mode, sets projects up with Vite and Sass, and brings the Figma side up to date with Auto Layout, variables and components in the current interface, with layout grids that match Bootstrap's grid from the start. Learners use their own Figma account; the free Starter plan is enough for the labs, while Dev Mode needs a paid plan and is shown as an overview. Learners take home the course handbook, sample Figma files and solution code for every lab.
Day 1: From Figma to a Real Website with Bootstrap 5.3
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
A wireframe is a simple sketch of a page layout, using boxes and lines in place of content to decide where each section sits and how the eye moves through the page, without real colours, images or fonts. In this course you wireframe in Figma on a 12-column layout grid that matches Bootstrap, so the team agrees on structure quickly and developers can build it accurately from the start.
Design each page as a separate frame, then switch to the Prototype tab, select a button or menu item and drag a connection to the destination frame. Set a trigger such as On click and an action such as Navigate to, or Open overlay for a mobile menu or modal, and choose a transition such as Smart Animate. Then press Present to click through it like a real site and share the link for the team to comment.
The course uses Bootstrap 5.3, the current stable release. Compared with the first Bootstrap 5 release, it relies more on CSS variables so themes can be adjusted without recompiling each time, supports dark mode through data-bs-theme and adds subtle and emphasis colour classes. The 12-column grid and the jQuery-free JavaScript stay the same. Bootstrap 6 is still in development, so it is covered only as an overview.
It suits UX/UI designers who want their designs built accurately, front-end developers who turn designs into web pages, corporate website maintainers and freelancers. You should know basic HTML and CSS, have a Figma account (the free Starter plan is fine) and bring a laptop that can run Node.js and VS Code.
You will be able to design web pages in Figma that match Bootstrap's grid and components, build linked prototypes, hand files over to developers, set up a Bootstrap 5.3 project with Vite, use the grid, utilities and components, and theme a site with Sass, CSS variables and dark mode. You also leave with a responsive landing page from the workshop, checked with Lighthouse.
Yes. IT Genius Institute runs in-house training for design and web development teams, and can adapt the examples and workshop to your organisation's website or design system. Sessions can be held onsite or online. Contact the institute for details and a quotation.
Articles are published in Thai.
Every website we open today, whatever tool or framework built it, ends up in the browser as HTML and CSS. People who understand these two languages can edit pages, adapt templates and talk to development teams with confidence. Yet many beginners learn from…
JavaScript is the one language every browser understands, so it sits behind almost every button, menu, form and interactive screen on the web, and it is also the foundation of React, Vue, Node.js and many other modern tools. Yet many beginners learn from…
Good photographs are at the heart of PR work, product images and portraits on websites and social media, but pictures from cameras and phones often come out underexposed, with colour casts, distractions in the scene, or skin and details that need cleaning up.…
