How to Start a Website Mockup in Figma
A beginner, interface-by-interface guide to start a website mockup in figma, including what each design term means, where to click and how to verify the exported/resulting asset.
By the end: You will complete start a website mockup in figma and keep an editable source plus a checked output.
You will complete start a website mockup in figma and keep an editable source plus a checked output.
Key terms before you start
These definitions make the steps easier to follow and help distinguish controls, files and concepts that can look similar at first.
What you need before starting
- Access to Figma
- A source/project you are allowed to edit
- A clear final destination/size/use for the result
Step-by-step tutorial
Every step is shown below. Work through them in order and use each checkpoint to confirm the result before moving on.
Open Figma and use a safe working copy
Open the real project in Figma. Duplicate the file/document first if the tutorial could alter important source work.
The editable source is different from the final exported asset; preserve recoverability.
Inspect export dimensions, transparency, crop, color and output format; judge the exported file as the final artifact.
Identify the final destination
Write where the result will be used: website width, social platform, handoff, print, prototype, etc.
Dimensions, color, format and responsive behavior depend on destination.
Inspect export dimensions, transparency, crop, color and output format; judge the exported file as the final artifact.
Create/open a Figma Design file
From Figma create a new Design file or open the approved project.
A Design file contains the canvas, frames, components and prototype connections.
Inspect export dimensions, transparency, crop, color and output format; judge the exported file as the final artifact.
Create the first page frame
Press F for Frame, then draw/choose a desktop-sized frame.
A Frame is a container with dimensions and layout behavior; do not use a loose rectangle as the screen container.
Undo, then select the target through Layers panel and verify its name before editing.
Rename the frame
Double-click the layer name and use “Home / Desktop”.
Names make multi-screen files navigable.
Undo, then select the target through Layers panel and verify its name before editing.
Create a mobile frame too
Press F and create a phone-width frame named “Home / Mobile”.
Do not assume desktop will automatically become mobile without layout decisions.
Undo, then select the target through Layers panel and verify its name before editing.
Add a Header frame
Inside Home / Desktop create a frame for header content.
Nested frames let you apply Auto Layout/constraints to logical regions.
Use Auto Layout/flexible components or revise layout constraints rather than shrinking type until it barely fits.
Apply Auto Layout to Header
Select Header and press Shift+A or use Add auto layout in the right sidebar.
Auto Layout arranges children using flow, gap, padding and alignment.
Use Auto Layout/flexible components or revise layout constraints rather than shrinking type until it barely fits.
Add real navigation labels
Use Text tool (T) for actual labels such as Services, Pricing, Contact.
Real text lengths expose layout problems earlier than placeholder words.
Use Auto Layout/flexible components or revise layout constraints rather than shrinking type until it barely fits.
Create hero content with real-length copy
Add H1-sized text, explanatory paragraph and CTA label.
You do not need final marketing copy, but use realistic lengths and line breaks.
Use Auto Layout/flexible components or revise layout constraints rather than shrinking type until it barely fits.
Create a reusable button
Make the CTA with Auto Layout, then Create component.
Buttons should expand when label changes rather than rely on fixed width.
Use Auto Layout/flexible components or revise layout constraints rather than shrinking type until it barely fits.
Use instances for repeated buttons
Insert/copy component instances for repeated CTAs.
Instances remain linked to the main component while supporting local text overrides.
Return to the layered/component source or backup. Keep future export/flatten operations on separate delivery copies.
Add content frames instead of decorative rectangles
Create actual Service/Card sections with frames and text/images.
A mockup should model structure, not only a screenshot-like collage.
Use Auto Layout/flexible components or revise layout constraints rather than shrinking type until it barely fits.
Test long labels
Replace one nav/button/card title with a much longer realistic label.
This stress-tests Auto Layout and text wrapping.
Use Auto Layout/flexible components or revise layout constraints rather than shrinking type until it barely fits.
Compare desktop and mobile deliberately
Rebuild/rearrange components for mobile using the same design system where possible.
Responsive design changes flow/priority; it is not simply scaling the desktop image smaller.
Use Auto Layout/flexible components or revise layout constraints rather than shrinking type until it barely fits.
Present/preview
Use Present/prototype preview to inspect the frame without editor chrome.
This exposes actual visual hierarchy.
Undo, then select the target through Layers panel and verify its name before editing.
Open the exported/result outside the editor
Inspect the actual PNG/JPEG/SVG/prototype/output rather than assuming it matches the canvas.
Exports can change dimensions, transparency, font rendering or compression.
Inspect export dimensions, transparency, crop, color and output format; judge the exported file as the final artifact.
Store source and delivery files predictably
Use clear names/versioning and keep the source separate from public delivery assets.
Future revisions should start from editable source.
Return to the layered/component source or backup. Keep future export/flatten operations on separate delivery copies.
Always know whether you are editing source structure or generating a delivery copy.
Concrete examples
Troubleshooting
Undo, then select the target through Layers panel and verify its name before editing.
Inspect export dimensions, transparency, crop, color and output format; judge the exported file as the final artifact.
Use Auto Layout/flexible components or revise layout constraints rather than shrinking type until it barely fits.
Return to the layered/component source or backup. Keep future export/flatten operations on separate delivery copies.
Files can be found/reused.
Continue with these tutorials
Documentation and references
Use these primary and supporting sources to verify current controls, browser behavior and product-specific details.