Developer mode
Opens components on the React tab by default.
Your bookmarks

Desktop

Shows content only on desktop viewports.

When you’re designing for large screens, you’ll want your designs to fill up the space. Often you’ll include expansive content to capture attention. But you don’t want that same content overwhelming smaller screens and crowding out the main focus.

In such cases, you can use Desktop components to show your larger content only on screens where it will fit.

If you want content only on smaller screens, use a Mobile component. To vary content based on screen size, you can also use Hide components.

Component status

Figma
n/a
Web (React)
Released
iOS (Swift)
n/a
Android (Kotlin)
n/a
Docs
Released

Guidelines

Offer similar content to everyone

Users approach their interactions with your content similarly no matter their device. They are looking for information or to accomplish a task. If a user can’t find that information or feature on your mobile site or app, they’ll assume you don’t have it.

Make sure your content is available everywhere. Change its form so it fits best in the space available and fits user expectations for the device. But keep it present.

Don’t hide anything essential

Even with differently sized screens, users still have the same basic needs. Make sure that even if you hide things, users can still accomplish their main tasks.

Use progressive disclosure to keep content available, but initially out of sight. In this way you hide content on specific screens but offer clear alternatives to get to it.

Related components

Mobile

For content only on small screens, use a Mobile component.

Hide

For more control over what appears on different screen sizes, see the Hide component.