Screens

Jul 21 2021- POSTED BY projecth 0 Comment

Device-Sized Screens

✨ Project Check-in:

In our project file, we’re designing a specific component; not an entire screen. So for this use case, we will not be setting up screens sized to a device. The component is already sized to fit within a desktop-sized app. For your future reference, here are tips for setting up device screens.

Responsive web breakpoints

If you’re designing for the web, you’ll want to design for several screen sizes. These can include mobile, tablet, desktop, or HD desktop. To view popular screen sizes, check out this updated list. There aren’t any hard rules for which screen sizes to design for; it depends on the screen size at which your website’s content needs to be adjusted to fill the available space. These are commonly referred to as breakpoints, as they represent the points where the content “breaks” for a certain screen size. Further reading, check out this Treehouse workshop: Responsive Design.

It’s up to you how you’d like to organize these screens. Depending on how your development team works, there are different preferences. You could have separate pages for each device type. Or, if you’re working on something small, like a specific new component, you could put all of the device frames together on one page.

Native mobile apps

If you’re designing for native iOS or Android apps, you’ll need screens for the devices supported by the app. Typically, an app’s UI/UX on iPhone will be different than the iPad app. The music app Spotify has iOS apps for iPad, iMessage, Apple Watch, and Apple TV.

While there are significant differences between these device experiences, there are minute resolution differences when comparing the UI for two similarly sized Android phones, for instance. Similar to designing for the responsive web, it’s not always necessary to design for all of the devices; just the ones where key changes are needed. TV.

While there are significant differences between these device experiences, there are minute resolution differences when comparing the UI for two similarly sized Android phones, for instance. Similar to designing for the responsive web, it’s not always necessary to design for all of the devices; just the ones where key changes are needed.

Design at 1x

Set up screen Frames to be 1x in scale. For example, the resolution of an iPhone 12 Pro 6.7″ is 1242 x 2688. But since it has a Retina HD display, it needs assets rendered at 3x scale (it has three times the pixels compared to a non-Retina display!). So, to get the 1x scale you’d divide by three to get: 414px wide by 896px tall. That should be the size of your screen’s Frame.

If you use Figma’s built-in screen sizes, you’re all set! Those are at 1x scale. Designing at 1x scale will set you up for success later when you export assets for different screen densities. If you design at a scale other than 1x, it will be challenging and the assets will come out blurry.

✨ Project Check-in:

In our project file, it’s already set to 1x scale so no action is needed. This information is purely for your future reference.

Add Screen Labels

While you can use Frame names as labels for screens, they are small and easily overlooked, especially when zoomed out. You can add labels above each Frame to provide context, such as:

  • Name of the screen
  • Key purpose of the screen
  • Status

✨ Project Check-in:

In the project file, add a screen label for the trip card on the “? v1.0 – MVP” page.

Align to the Pixel Grid

Ensure elements are aligned to the pixel grid. Sometimes elements get misaligned. You’ll be able to spot this by seeing X, Y, width, and height values not having whole pixel numbers in the Design panel on the top right when an element is selected.

By default, Figma aligns everything to the pixel grid. To confirm it is enabled for you, go to Menu > Preferences > Snap to Pixel Grid and ensure it is checked. If it’s turned off by accident, here’s a plugin that can help you snap everything into place: Pixel Perfect

Flow

It’s helpful to indicate the relationship between the screens. When a user clicks on a button in one screen, what screen should be shown next? You can draw a user flow to represent these interactions in a diagram, but it’s also helpful to draw arrows on the screens themselves.

There’s a Figma plugin to help with this: Autoflow

  1. Install the Autoflow plugin
  2. Select a Frame (or any object)
  3. Press the Shift key
  4. Select another Frame (or any object). You’ll see an arrow appear.

Be specific as possible. You can make the line draw from a specific object, such as a button. If you’re documenting a transition without a user trigger, such as a notification that appears on the screen then disappears after 10 seconds, then draw an arrow from the center edge of one screen to another screen.

✨ Project Check-in:

In our project file, add arrows to indicate the flow when cycling through the image carousel.

Figma Resources: