Skip to content
An AI-driven
UX & UI masterclass
Back to course
Course intro Lesson 11 of 11

Optional Figma guide

Arrange reference images.

Arrange reference pictures so they are easy to review.

A bright editorial illustration about arrange reference images.

What you will learn.

Arrange three credited references so a viewer can compare useful details without losing source context.

Before you begin.

Optional guide. Finish Look at design every day first. Reuse three pictures from your credited daily collection where possible; do not collect another full daily set. Skip if you can already make a readable, credited comparison board and inspect its export.

Learn the concept.

A reference board is for comparison, not for claiming another person’s work as yours. Equal space, a purposeful crop, aligned edges, and consistent gaps help a viewer compare details. Keep the full source beside any crop so context is not lost.

Words to know.

Reference

Someone else’s design saved for study, with a source credit.

A source to study

Crop

A selected view of part of an image; keep the full image for context.

Show part of an image

Attribution

The creator and source link that credit a borrowed design.

Credit the original source

Export

A separate image of the comparison board that you reopen and inspect.

Create a shareable output
The idea in practice

See a worked example.

Start with three credited screenshots.

For exampleChoose three credited screenshots from the existing Daily practice set and keep each full image.

Align and crop only to support one comparison.

For exampleCompare the same detail in each: align the top edges, give equal space, and crop only if it makes the detail easier to see.

Reopen the export and inspect context and credits.

For exampleReopen the exported board at normal size. Check all three details and credits are readable, and keep the full sources for context.