Figma for Beginners: Design a Simple Website Mockup Before You Build

Building a website straight in code (or a page builder) without planning often leads to rework: sections move, content changes, and the layout gets rebuilt three times. A simple mockup in Figma lets you, your team and your developer agree on the design first. Figma runs in the browser and has a free plan, so it's easy to start.

Key concepts in five minutes

• Frame: a container, like an artboard. Use a frame for each screen (e.g. "Desktop 1440" and "Mobile 390")
• Layers: every shape, text and image appears in the layers panel on the left
• Auto layout: makes elements stack and space themselves automatically, like a real website
• Components: reusable elements (buttons, cards); edit once, update everywhere
• Styles/variables: saved colours and text styles for consistency

Step 1: Start with a wireframe

Before colours and photos, sketch the structure with grey boxes: 1. Header: logo, menu, button 2. Hero: headline, sub-line, two buttons, image 3. Services: three cards 4. Why choose us: four points 5. Testimonials or proof 6. Call-to-action band 7. Footer

Wireframes keep the conversation on content and order rather than colours.

Step 2: Set up a grid

Select your desktop frame and add a layout grid: 12 columns, 24 px gutter, with margins. On mobile, use 4 columns with 16 px margins. See grid basics.

Step 3: Define text styles and colours

Create text styles for H1, H2, H3, body and small text, and colour styles for your brand colours, text, background and borders. Every element you create should use these. It's what makes the final design consistent.

Step 4: Build a button component with auto layout

1. Type the button text
2. Select it and press Shift + A to add auto layout
3. Set padding (e.g. 14 px top/bottom, 28 px sides) and a corner radius
4. Fill it with your accent colour
5. Right-click → Create component

Now every button you place is an instance of this component. Change the main one, and all update.

Step 5: Build a service card

Use auto layout vertically: icon, title, short text, link. Make it a component, then duplicate it three times inside a horizontal auto layout frame. Spacing stays consistent automatically.

Step 6: Add real content

Replace placeholder text with your real headlines and descriptions as early as possible. Real content reveals layout problems that "Lorem ipsum" hides. See website content checklist.

Step 7: Design the mobile version

Copy sections into the mobile frame and stack them. Check that headlines aren't too large, buttons are full-width or easy to tap, and nothing important is missing on mobile.

Step 8: Share and collect feedback

Click Share to send a view link. People can leave comments directly on the design. Ask one decision-maker to consolidate feedback (see avoiding scope creep).

Step 9: Hand off to development

Developers can inspect sizes, spacing, colours and export assets directly from Figma. A clean file with styles and components makes building faster and more accurate.

Tips for beginners

• Name your layers and frames ("Hero", "Services")
• Use a few colours and two fonts at most
• Don't design every page at once. Start with the homepage and one inner page
• Look at good websites for structure ideas, but don't copy them

Figma is also useful for designing social media templates and presentations once your styles are set.

Prefer to leave design to us? Every Joboo Web project includes a design preview for your approval before development. Start your project.