Step 1.3 · Plan and prepare

Design in Figma

Build a small design system first, then use it to design all four pages at phone, tablet and desktop sizes.

You will work in: Figma
Learning outcome: Designing for responsive screens in Figma

Before you start, you need your four paragraphs (see below), your images from step 1.2, and a Google Fonts pairing (one or two families). Open the Triad Website template from the Class Resources project in Figma.

New to Figma?

Review the Figma Workflow lesson for style guides, Auto Layout, components, responsive frames and prototyping.

Write your content

Write four paragraphs in a document in your resources folder: one theme introduction and one paragraph for each topic, 75–120 words each. Designing with your real text shows you how much space it needs.
Write a short teaser (one or two sentences) for each topic card on the home page.

Build the style guide

Create color styles (or variables): background, surface, text, accent and one color per topic. Check every text color against its background in the WebAIM Contrast Checker: body text needs at least 4.5:1.
Create text styles from your Google Fonts: H1, H2, body, caption and navigation. Keep body text at 16 px or larger.
Create components: navigation button (default, hover and current-page variants), gallery thumbnail, topic card and footer.

These styles become the design tokens at the top of your CSS file in step 3.3. A well-built style guide makes the code much faster to write.

Design for developer handoff

Define and consistently apply color and text styles, components, and Auto Layout. These give developers clear, reusable values and layout behavior to translate into CSS, and make the design easier to inspect and share. Figma does not automatically export finished, production-ready CSS for this project: your code will implement the design system you define here.

Design the pages

Layout	Figma frame	Screen widths	Home page	Gallery page
Phone	375 px	up to 599 px	One column, cards stacked	Text above the gallery, about 2 thumbnails per row
Tablet	768 px	600–999 px	Cards in 2 columns	Text above the gallery, about 4 per row
Desktop	1440 px, 1080 px content	1000 px and up	3 cards in a row	Text column (about 280 px) beside the gallery

These widths are design targets, not fixed sizes. Real screens come in every width in between, so your code will use flexible grids that stretch and reflow (step 3.5). Design with that in mind: Auto Layout set to Fill container behaves the way the CSS will.

Design all four pages at all three sizes: 12 frames in total.
Use Auto Layout for the navigation, cards and footer, and a layout grid on every frame. Set thumbnails to Fill container so they resize the way the CSS will.
Name your layers after the HTML you will write: header, nav, main, footer, gallery.

Export design assets

Export only graphics that are not gallery photos. Photos are prepared in Photoshop (step 1.2) and fonts are loaded with code (step 3.2).

Information

Export static designs from Figma

Export the logotype and icons as SVG into site/images, for example logo.svg. SVG stays sharp at any size and is usually a tiny file.
Export background textures or patterns as JPG or PNG at 2×.
Design a favicon (the tiny icon in the browser tab): a simple 512 × 512 px frame exported as favicon.png into site. Use one bold shape or letter; detail disappears at 16 px.

Due at critique

Style guide, 12 frames and a working desktop and phone prototype. Bring one question you want feedback on.