Figma to HTML & CSS Workshop is a hands-on course in turning Figma designs into real web pages with semantic HTML and modern CSS, including Flexbox, Grid and mobile-first responsive layouts, with Bootstrap 5.3 when speed matters. It suits developers and anyone with a web design background, and you leave able to convert Figma files into working websites yourself.
Most web teams receive designs as Figma files, but turning a design into a web page that matches it, works well on every screen size and is easy to change takes both the ability to read design files and a sound understanding of modern HTML and CSS. Writing code without a plan, or leaning on a framework without understanding the basics, usually produces pages that look close to the design but are hard to adjust when the design changes.
This workshop converts Figma designs into real web pages step by step. Learners read a Figma file, export images and icons, turn Variables and Styles into CSS custom properties, write semantic HTML, build layouts with Flexbox and Grid that match Auto Layout, make pages responsive mobile-first, and build buttons, cards and forms. They learn when Bootstrap 5.3 is the right choice, then finish with a workshop converting a three-page website, checking its quality and publishing it. (2 days, 6 hours per day, 12 hours in total, Beginner to Intermediate level.)
Course Details
This course is the 2026 edition of Figma to HTML&CSS Workshop. It runs for 2 days, 6 hours per day (12 hours in total, 09:00-16:00), as a hands-on workshop. Beginner to Intermediate level. This edition moves away from mainly learning Bootstrap tags and components towards semantic HTML and modern CSS, including custom properties, Flexbox, Grid, clamp() and container queries, with values taken from Figma Variables. Bootstrap 5.3 becomes an option for when speed
matters, and quality checks with Lighthouse and publishing have been added. It keeps the step-by-step workshop converting a Figma file into a website, from starter file to live site. The course focuses on developers who receive Figma files and write the code, unlike Modern Web Design with Figma and Bootstrap 5, which focuses on designing in Figma. Learners use their own Figma and GitHub accounts, and take home a lab guide, starter Figma files and solution code.
Section 1: Lab: Setting Up Tools and Reading a Figma File
Section 2: Planning Before You Code
Section 3: Lab: Semantic HTML
Section 4: The CSS You Need to Convert a Design
Section 5: Lab: Layouts with Flexbox and Grid
Section 6: Mobile-First Responsive Design
Section 7: Lab: Buttons, Cards, Forms and Interaction
Section 8: Bootstrap 5.3 When You Need Speed
Section 9: Workshop: Converting a Three-Page Website from Figma
Section 10: Workshop: Quality Checks and Publishing
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
Start by studying the whole design and dividing it into sections such as header, content and footer. Export images and icons from Figma and set global values such as colours, fonts and spacing as CSS custom properties first. Then write semantic HTML section by section, build layouts with Flexbox or Grid to match Auto Layout, make it responsive mobile-first and check it on several screen sizes. This course practises every step from starter file to publishing.
Select an object and check the right-hand panel, which shows its size, colour, font, weight and line height. To measure the gap between objects, select one and hold Alt on Windows or Option on Mac while hovering over another, and Figma shows the distance in pixels. If the design uses Variables or Styles, turn their names and values into CSS custom properties. Dev Mode shows values as code more conveniently but needs a paid plan.
Auto Layout in Figma behaves much like Flexbox in CSS. Horizontal or vertical direction maps to flex-direction, spacing between items to gap, inner spacing to padding, and alignment to justify-content and align-items. Fill container and Hug contents correspond to letting an item stretch to fill the space or size to its content. For layouts with several rows and columns, CSS Grid is the better fit.
If the design is distinctive, must match pixel for pixel and should stay lightweight, writing your own CSS with Flexbox, Grid and custom properties is usually simpler and gives more control. Bootstrap 5.3 suits designs built on a standard grid and components, tight deadlines, or teams already using Bootstrap, and you can adjust colours and fonts through its CSS variables. This course teaches both and practises choosing between them.
It suits anyone who wants to turn Figma designs into web pages, developers who receive designs from UX/UI teams, web designers who want to code their own work and general learners with some web design background. You should be able to use a Windows or macOS computer and have some web design knowledge. Previous HTML or CSS experience helps you move faster, and you need your own Figma account, where the free plan is enough for the labs.
Yes. It can be run in-house for your team, with examples adapted to your work, such as using Figma files from a real project or your organisation's design system as the workshop brief. You can request a quotation from this page, or contact us on LINE @itgenius or by phone on 02-570-8449.
Articles are published in Thai.
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.…
HTML and CSS can now do far more than lay out pages. Much of what once needed large JavaScript libraries, such as tooltips that stay attached to a button, scroll-linked animation, smooth page transitions or reusable components, is now built into the browser.…
HTML and CSS are the foundation of every web page. HTML5 lets you build forms, add audio and video and structure pages without plug-ins such as Flash, while modern CSS brings Flexbox, Grid and media queries so sites look good on every screen size. Add…
