Code Basics for Designers

Why Does a Designer Need to Know Code?

There is an old debate in the design community: should designers know how to write code or not? The short answer: they should know the basics at least. Not to become developers, but to design things that are feasible and communicate better with developers.

When you know the basics of HTML and CSS:

• You design realistically: you understand that some things are easy to implement and some are hard, so you make smarter design decisions
• You communicate better with developers: instead of saying "I want this button to look like that," you can say "I want border-radius: 12px and padding: 16px 24px"
• You understand the constraints: the web has constraints — like text that expands and screens of different sizes. When you understand this, your design becomes better
• You can create real prototypes: sometimes a code prototype is better than a Figma prototype
• You increase your market value: a designer who understands code earns a higher salary and gets more opportunities

Let us start with the basics.

HTML Basics: Page Structure

HTML (HyperText Markup Language) is the language that builds the structure of a web page. Think of it as the skeleton — it defines what elements exist on the page and their order.

Essential elements:

<!-- Main heading -->
<h1>Welcome to our site</h1>

<!-- Subheading -->
<h2>Our Services</h2>

<!-- Text paragraph -->
<p>We are a company specialized in digital product design.</p>

<!-- Link -->
<a href="https://example.com">Visit our site</a>

<!-- Image -->
<img src="photo.jpg" alt="Photo description" />

<!-- Button -->
<button>Click here</button>

<!-- List -->
<ul>
  <li>First item</li>
  <li>Second item</li>
</ul>

Container elements:

<!-- General container -->
<div>Content here</div>

<!-- Semantic elements - convey meaning -->
<header>Page header</header>
<nav>Navigation menu</nav>
<main>Main content</main>
<section>A specific section</section>
<article>An article or standalone content</article>
<footer>Page footer</footer>

Why are semantic elements important?
When you use <header> instead of <div>, you are telling the browser and screen readers that this is the page header. This matters for accessibility and SEO. As a designer, you need to know that every part of your design translates into a specific HTML element.

CSS Basics: Styling the Appearance

CSS (Cascading Style Sheets) is what determines the look of elements — colors, sizes, spacing, and everything visual.

Core properties:

/* Colors */
color: #333333;              /* text color */
background-color: #f5f5f5;   /* background color */

/* Size */
width: 300px;
height: 200px;
max-width: 100%;             /* important for responsive */

/* Font */
font-family: 'Inter', sans-serif;
font-size: 16px;
font-weight: 700;            /* bold */
line-height: 1.6;            /* line spacing */

/* Spacing */
padding: 16px;               /* inner spacing */
margin: 24px;                /* outer spacing */

/* Borders */
border: 1px solid #e0e0e0;
border-radius: 12px;         /* rounded corners */

/* Shadows */
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

The difference between Padding and Margin:
This is one of the things that confuses designers most. Think of an HTML element like a box:

• Padding: the space between the content and the box's borders (inside)
• Margin: the space between the box and the elements around it (outside)
• Border: the box's own edge

This is called the Box Model, and it is the foundation of all layout in CSS.

Units in CSS

One of the things a designer must understand is the different units of measurement:

px (Pixels): a fixed unit. 16px is 16px on any screen. Suitable for things like border-width and base font-size.

rem: relative to the base font size of the page (usually 16px). So 1rem = 16px, 1.5rem = 24px. Very suitable for responsive design because it changes with the font size.

% (Percentage): relative to the parent element. width: 50% means half the container's width. Very important for responsive design.

vw and vh: relative to the screen size. 100vw is the full screen width, 100vh is the full screen height.

Tip for designers: in Figma, you design in px. But the developer will convert many values to rem or %. That is why you should design with numbers divisible by 8 or 4 (i.e., 8, 12, 16, 24, 32, 48, 64) — this makes the conversion easier.

Flexbox: Arranging Elements in a Row or Column

Flexbox is a layout system in CSS that arranges elements in one row (horizontal) or one column (vertical). It is the most similar thing to Auto Layout in Figma.

.container {
  display: flex;
  flex-direction: row;        /* horizontal (default) */
  /* flex-direction: column;  vertical */

  justify-content: center;    /* alignment on the main axis */
  align-items: center;        /* alignment on the secondary axis */
  gap: 16px;                  /* space between elements */
}

The relationship with Figma:

• Auto Layout in Figma = display: flex in CSS
• Horizontal in Figma = flex-direction: row
• Vertical in Figma = flex-direction: column
• Gap in Figma = gap in CSS
• Padding in Figma = padding in CSS
• Fill Container in Figma = flex: 1 or width: 100% in CSS
• Hug Contents in Figma = default size in CSS

When you understand this relationship, your Figma designs become easier to implement because you are thinking with the same logic.

Common justify-content values:

• flex-start: elements at the beginning
• center: elements in the middle
• flex-end: elements at the end
• space-between: elements distributed with equal spaces between them
• space-around: equal spaces around each element

CSS Grid: Two-Dimensional Layouts

Grid lets you arrange elements in rows and columns simultaneously. Perfect for large layouts.

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);  /* 3 equal columns */
  gap: 24px;
}

/* An element that spans two columns */
.wide-item {
  grid-column: span 2;
}

Flexbox vs Grid:

• Flexbox: for one-dimensional arrangement (row or column). Suitable for navigation bars, button groups, card rows
• Grid: for two-dimensional arrangement (rows and columns). Suitable for page layouts, image galleries, dashboards

In Figma: Auto Layout works like Flexbox. There is currently no direct Grid layout in Figma, but you can simulate it using nested Auto Layout.

Responsive Design

One of the most important things a designer must understand. Screens are different — mobile, tablet, laptop, desktop — and the design must adapt to every size.

Media Queries:

/* Mobile style (default) */
.container {
  padding: 16px;
  flex-direction: column;
}

/* Tablet and larger style */
@media (min-width: 768px) {
  .container {
    padding: 24px;
    flex-direction: row;
  }
}

/* Desktop style */
@media (min-width: 1024px) {
  .container {
    padding: 32px;
    max-width: 1200px;
    margin: 0 auto;
  }
}

Common breakpoints:

• 320px - 480px: small mobile
• 481px - 768px: large mobile / small tablet
• 769px - 1024px: tablet
• 1025px - 1200px: laptop
• 1201px+: desktop

Tip: design Mobile First. Start by designing for mobile and then expand to larger screens. This is the same logic CSS encourages through min-width media queries.

Why Developer Handoff Matters

Developer handoff is the process of passing the design to the developer to implement. This is where your code knowledge makes the biggest difference.

Common handoff problems:

• The designer uses random spacing (13px, 17px, 22px) instead of a regular system
• The design is not responsive — the designer made only one screen size
• No documentation for hover states, error states, loading states
• Colors and fonts are inconsistent
• The design has things that are hard to implement without the designer knowing

How to improve the handoff:

• Use a Design System: consistent colors, fonts, and components
• Use Auto Layout: every frame should have Auto Layout — this translates directly to Flexbox
• Use regular numbers: stick to multiples of 4 or 8 for all spacing
• Design all states: normal, hover, active, disabled, error, loading, empty
• Write notes: clarify the expected behavior for each interaction
• Use Dev Mode in Figma: shows the developer the codes and values directly

Code Tools for Designers

You do not need to learn everything at once. There are tools that make the start easier:

For learning:

• freeCodeCamp: comprehensive free courses
• Codecademy: interactive learning
• CSS-Tricks: an excellent CSS reference
• MDN Web Docs: the official and most comprehensive reference

For experimentation:

• CodePen: write HTML and CSS and see the result immediately in the browser
• VS Code: a free and powerful code editor
• Chrome DevTools: open it with F12 and you can temporarily edit any website and see its code

Practical exercise:

1. Open CodePen
2. Write simple HTML (heading, paragraph, button)
3. Add CSS to style it (colors, font, padding)
4. Try Flexbox to arrange the elements
5. Try changing the values and see the result

Using Chrome DevTools:
This is one of the most powerful tools for a designer. On any website:

1. Press F12 or Right-click > Inspect
2. Select any element and see its CSS
3. Edit the values and see the effect immediately
4. This teaches you a lot about how large websites are built

CSS Variables and Design Tokens

CSS Variables (or Custom Properties) let you define values once and use them everywhere — just like Design Tokens in Figma.

:root {
  /* Colors */
  --color-primary: #6366f1;
  --color-text: #1f2937;
  --color-background: #ffffff;

  /* Spacing */
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;

  /* Corners */
  --radius-md: 12px;
  --radius-lg: 16px;
}

.button {
  background-color: var(--color-primary);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-md);
}

When you understand this, you can design a Design System in Figma with the same logic and it becomes very easy for the developer to convert it to code.

Summary

You are not required as a designer to become a developer. What is required is that you understand the basics so you can design intelligently and communicate effectively.

Start with these steps:

1. Learn basic HTML — elements and page structure
2. Learn CSS — colors, spacing, fonts
3. Understand Flexbox — because it is the same logic as Auto Layout in Figma
4. Try Chrome DevTools on the sites you like
5. Design in Figma and try to implement it in code on CodePen

The more you know about code, the better your designs will become and the easier implementation will be, and communication with developers will become smoother. You do not need to be an expert — you just need to speak the same language.