Design & Media

Figma for web design

Figma is the free, browser-based tool most designers use to design websites and apps before they're built. Draw your screens, share a link, and hand off exact sizes and colors to code. Here's how it fits your workflow.

Why

What is Figma & why use it?

Think of it as a drawing tool built for screens. You design pages visually — drag shapes, add text, drop in images — without writing code. It runs in your browser, it's free for individuals, and multiple people can work in the same file live.

In your browser

Nothing to install (a desktop app exists too). Your files live in the cloud.

Collaborative

Share a link; others view or edit live and leave comments — like Google Docs for design.

Free to start

The free plan is plenty for learning and small projects.

Built for handoff

Devs can inspect any element to get its exact size, color, and even CSS.

figma.com
Heads up: create your own account at figma.com (sign up yourself — never share passwords). The free "Starter" plan is all you need to follow along.
Concepts

The handful of concepts to know

Figma has a lot of features, but you only need a few to design a web page.

Frames

A frame is a screen/canvas — e.g. a 1440px desktop page or a 390px phone. You design inside frames.

Shapes & text

Rectangles, lines, and text are your building blocks — like <div>s and headings.

Components

Design a button once, reuse it everywhere. Edit the original and every copy updates — like a CSS class.

Auto layout

Figma's version of flexbox — items space and resize automatically. Maps almost 1:1 to CSS flex.

Styles & variables

Save your colors and text styles once and apply them everywhere — your design system.

Prototype

Link frames together to click through a fake, working version before any code exists.

Get going

Design your first page

  1. Sign in at figma.com and click New design file.
  2. Press F and pick a Frame — choose "Desktop" (1440 wide) to start.
  3. Use the Rectangle (R) and Text (T) tools to block out your wireframe — header, hero, cards, footer.
  4. Add color and real type to turn the wireframe into a high-fidelity mockup.
  5. Wrap rows of items in Auto layout (Shift+A) so spacing behaves like flexbox.
  6. Turn repeated things (buttons, cards) into Components so they stay consistent.
Hand off

From Figma to code

Figma doesn't write your site for you — you still build it in HTML & CSS — but it tells you exactly what to type.

  1. Open the file and switch to Dev Mode (or just select an element).
  2. The right panel shows the exact size, color, font, and spacing — and suggested CSS you can copy.
  3. Recreate it with real CSS: those pixel values become your padding, font-size, colors, etc.
  4. Export images/icons with the Export panel (PNG, SVG, etc.).
Copy the values, not blindly the code. Figma's exported CSS is a starting point — rebuild it cleanly with the techniques in CSS Recipes and Layout so your markup stays tidy and responsive. Plan the page with wireframes and UX best practices first.