👇 Why is this important?
A website is the result of code, not just visual artistry. Features like Flexbox (more on that below) are our digital equivalent of offset printing – systems we need to understand for our designs to actually appear in browsers. 🪄
Learning the basics of coding allows us to design better and more efficiently in the digital space. We’re not designing websites in the traditional sense – what we see is the result of front-end developers' work. As designers, we need to be able to view our projects from their perspective. 👀
We have to understand that we’re not creating final websites, but rather detailed instructions for developers. It’s a subtle but crucial distinction.
Our work in Figma isn’t a finished website – it’s a set of guidelines that developers use to build a functioning site.
For developers to translate our designs effectively into code, they need clear, well-organised instructions from us.
In the past, we’d send JPG files of website designs, but today we have tools that bridge the gap between design and development – like Figma.
🤝 Figma and coding
Thanks to dev mode in Figma, developers can inspect our designs, measure spacing between elements, and analyse auto layout. They get complete systems they can translate directly into HTML and CSS.
And just to be clear: not every designer needs to know how to code.
You only need to grasp the basics of HTML and CSS. HTML is a simple language made up of tags, and CSS controls its visual styling. Understanding these tools helps you create designs that are easier to interpret and implement.
🔧 How does it work in practice?
When designing in Figma, our goal should be to create interfaces that closely reflect HTML and CSS structure. Figma doesn’t just let us build visual layouts – it also offers tools for reviewing the design from a technical perspective.
📄 This means developers can quickly access key information such as dimensions, spacing, colours, and typography.
In dev mode, developers can:
- Precisely measure distances between elements
- Check properties like auto layout
- Understand the layout and hierarchy of components
As a result, our Figma files aren’t just pretty visuals – they’re precise instructions that can be efficiently turned into code.
🎨 Styling elements in Figma
Let’s have a look at how we style elements in Figma. It allows you to manage text styles, colours, and spacing – just like in CSS.
Creating style documentation – for text, components, and colours – helps others quickly grasp your system. In Figma, we can start thinking like developers by using master components and their instances.
Any change to a master component automatically updates all instances, making your system flexible and easy to maintain. 💪
1️⃣ Text styles
Each style includes a defined font, size, line height, spacing, and letter tracking.
By standardising these styles and assigning them to elements across the page, we keep things consistent and maintainable.
2️⃣ Colour styles
In Figma, colours are defined once and reused throughout the design. Simple, efficient.
3️⃣ Variables
You can also use variables for spacing.
Let’s say you’re repeatedly using a 32-pixel gap. You can assign that to a variable, called padding-M instead of typing 32px every time. It’s super practical – if you later decide to change 32px to 40px, just update the variable and it changes everywhere. Easy-peasy!
📦 Understanding the box model
Now we come to a key concept in web design – the box model.
Everything on a webpage is essentially a rectangle. Every element – whether it's text, an image, or a button – sits inside an invisible box.
Even elements that look irregular – like an image with rounded corners – are still wrapped inside this invisible box.
🔧 The structure of the box model:
- Content – The actual content, like text or an image
- Padding – The space between the content and the border
- Border – The edge that wraps around the padding and content
- Margin – The space outside the border, separating it from other elements
ℹ️ What is padding?
Padding is the inner spacing of a box in CSS that pushes the content away from the edges of the box, creating internal space. Unlike a margin, which pushes elements away from the outside, padding works inside the box to create breathing room between the content and the border.
💡 It’s worth using tools like Outliner CSS in practice to help you visualise the box structure of a website.
→ Outliner is a Google Chrome extension that highlights how HTML elements are laid out on the page as boxes. It’s incredibly useful for hands-on learning, analysing page structures, and even debugging.
👀 Learning by example
Take a look at this page: 🔗 Vitra Chair Finder. Open it up on your screen.
At first glance, it might look like the opposite of a clean, box-based layout – with elements scattered across the page like confetti. 🎊
But the longer you look at the page, the more you notice that each chair is actually enclosed in its own box. The entire layout – even though it appears loose and asymmetrical – is still built on the box model.
🏋️ Practise by observing
Training yourself to spot the box model at work on websites is a valuable habit. It helps you realise that even the most creative, seemingly structure-free designs are grounded in the mathematical logic of boxes and spacing.
🤸♂️ Flexbox – an extension of the box model
Flexbox is a layout method in CSS that controls how elements are arranged within a box. It allows us to build layouts that are more flexible compared to traditional approaches.
📃 The basic principles of Flexbox:
- Flex container – The element that holds other elements, known as flex items.
- Main axis – The default horizontal axis along which the flex items are laid out.
- Cross axis – The vertical axis that runs perpendicular to the main axis.
- Justify content – Controls how the flex items are spaced along the main axis.
- Align items – Controls how items are aligned along the cross axis.
- Flex direction – Determines whether the items are laid out in rows or columns.
→ This graphic illustrates it well.
⚒️ Prefer learning by doing? Try this game! 🎮 It’ll help you get the hang of Flexbox way faster than reading about it or staring at diagrams.
💡 Flexbox vs Auto Layout in Figma
Auto Layout in Figma mimics the functionality of Flexbox.
It allows for dynamic resizing, spacing, and arrangement of components without the need to manually adjust each element. It’s essentially Figma’s equivalent of Flexbox in the UI design environment – speeding up the design process and making it easier to build advanced, responsive layouts.
Thanks to this feature, designers can be confident that the solutions they create are easy for the development team to implement.
After all – we’re working towards the same goal as one team! ❤️🔥
ℹ️ A quick recap:
1️⃣ The box model is the foundation that helps us understand how elements are organised on a webpage.
2️⃣ Flexbox is a tool that extends the capabilities of the box model, allowing more dynamic and flexible control over elements on the page.
3️⃣ Auto Layout in Figma mirrors the principles of Flexbox, enabling quick creation and adjustment of layouts without needing to manually tweak every change.
