How to Create a Moodboard for UI/UX Design (Step-by-Step Beginner Workflow in Figma), by David Emulo on YouTube. 5 min 14 s.
- Video length
- 5 min 14 s
- Time to do it
- 30 minutes
- Difficulty
- Easy
- Steps
- 9
What you need
Steps
Write a short brief first: who the product is for, the feeling you want, and any brand colors or fonts you must keep. This keeps the board focused.
Collect 8 to 15 references from Dribbble, Behance, Mobbin, Pinterest and real apps on your phone. Save full screens you like, not just pretty images.
Sort the references into groups: color, typography, imagery, layout and UI components. Drop anything that does not fit the brief.
Pick two or three colors that repeat across your references and note the hex codes. Add one accent color for buttons and links.
Choose one heading font and one body font, then paste sample text in Figma so you can judge the pairing at real size.
Create a new Figma file and a frame around 1440 by 1024 pixels. Name it something like Project moodboard v1.
Lay out labelled sections for colors, type, imagery and UI patterns. Keep to a grid and leave white space so the board stays readable.
Add a short note beside each block saying why it belongs. Clients and teammates then follow your thinking without asking.
Check the board against your brief, remove duplicates, then share the Figma link for feedback before you design screens.
Tips and common mistakes
Keep the whole board to roughly one screen so it can be read at a glance.
Write the hex codes and font names inside the file so developers can copy them later.
Stick to two font families at most, since mixing more muddies the visual direction.
Reopen the moodboard when a screen starts drifting off style and compare the two.
Questions
How many images should a moodboard have?
Around 8 to 15 strong references is enough. A small, well chosen set says more than a wall of random screenshots.
Do I need Figma to make a moodboard?
No, any tool with a canvas works. Figma is handy because the board sits next to your design file and is easy to share.
How is a moodboard different from a style guide?
A moodboard sets the feel with references, colors and type samples. A style guide turns that into exact rules for colors, sizes and components.
This guide was drafted from the video's details and general task knowledge. It has not been checked against the full video. Check the video and relevant product instructions before following a procedure. Report a correction.
