Mobile-first design workflow in Figma - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the main idea behind mobile-first design?

Mobile-first design means starting your design with the smallest screen (mobile) first, then scaling up to larger screens like tablets and desktops.

beginner

Why is mobile-first design important in BI dashboards?

Because many users access dashboards on phones, designing for mobile first ensures the dashboard is clear, fast, and easy to use on small screens.

beginner

In Figma, what is a common first step in a mobile-first workflow?

Create a frame with mobile screen dimensions (like 375x812 px) to start designing the smallest view first.

intermediate

How does mobile-first design affect content prioritization?

It forces you to focus on the most important content first, because mobile screens have limited space.

intermediate

What is a key advantage of designing mobile-first when scaling up to desktop?

It’s easier to add more features and content for bigger screens than to remove or simplify content designed for desktop when shrinking to mobile.

What screen size do you start with in a mobile-first design workflow?

A Smallest screen (mobile)

B Desktop screen

C Tablet screen

D Any screen size

Mobile-first means starting with the smallest screen to ensure usability on mobile devices.

Why should you prioritize content in mobile-first design?

A Because mobile screens have limited space

B Because desktop screens are smaller

C Because tablets don’t need content

D Because mobile users don’t read

Limited screen space on mobile means you must focus on the most important content first.

In Figma, what is a typical mobile frame size to start with?

A 1920x1080 px

B 375x812 px

C 1024x768 px

D 800x600 px

375x812 px is a common size for mobile screens like iPhone X.

What is a benefit of designing mobile-first for BI dashboards?

A Ignores tablet users

B Makes desktop design harder

C Requires more colors

D Ensures dashboards work well on phones

Designing mobile-first ensures dashboards are clear and usable on phones.

When scaling up from mobile to desktop, what is easier?

A Removing features

B Shrinking content

C Adding features and content

D Ignoring mobile design

It’s easier to add content for bigger screens than to simplify desktop designs for mobile.

Explain the steps you would take to start a mobile-first design workflow in Figma.

Think about starting small and adding more later.

Why is mobile-first design especially useful for business intelligence dashboards?

Consider how people use dashboards on their phones.