A primer for doing iOS designs with Figma.

Primer: iOS Design with Figma.md

Primer: iOS Design with Figma

Disclaimer: I am definitely not an expert on either design or iOS development.

I recently had to use Figma to do the designs for an iOS app. Here's a quick primer you might find useful.

Topics covered: app screens, icons, iPhone mockups, and App Store previews.

Step 1: App Screens

You're obviously going to want to design various screens. Here's how you do that.

1. Open the frame tool by either clicking its icon in the menu bar or pressing (F)
2. Choose the desired screen resolution
3. Enjoy!

Live Mirroring

The ability to view your designs on a physical device as you work on them is incredibly useful. IMO, it's Figma's best feature. Here's how you do it.

1. Download the Figma Mirror app from the app store
2. Connect it to Figma account and complete setup
3. When prompted, keep the app open on your phone and select the desired frame on your laptop
4. Voilà! You can now preview your designs live

Step 2: App Icons

This was a huge pain for me. There are a litany of icon templates that do nothing. Here's how you actually design your app icon in Figma.

1. Use the iOS icon template from here
2. Create your design in the Single Export section as instructed
3. When you're done, select the icon-ios frame, scroll down in the sidebar, and hit the Export button
4. Good to go!

Note that by default, I think it only exports the sizes required for the iPhone. If you wish to generate icons for the iPad, Macbook, or Apple Watch you'll have to manually add the appropriate sizes. You can find Apple's official guidance here and here.

Pro-tip: if you're designing with text, the template's previewing won't work well. Just get it as good as you can in the Single Export bit, then select the text, right-click, and hit "Outline Stroke." The preview should work after that. You won't be able to edit the text after that, so undo if required.

Interlude: iPhone Mockups

At some point, you'll need to use iPhone mockups. It might be for your App Store previews, or maybe just for yourself. Here are the two templates that have worked for me.

• iPhone X: Link
• iPhone 8: Link
  • This has an alternative iPhone X one you might want to try.

Step 3: App Store Previews

App store previews are actually fairly straightforward.

1. Find out the appropriate screenshot dimensions from here
2. Create a frame that size in Figma
3. Make your design
4. Export it as a JPEG - this is very important, because App Store screenshots cannot contain any transparency
5. All done!

Conclusion

Figma is powerful and incredibly easy to use. I personally prefer it to alternatives like Sketch or (shudder) Photoshop/Illustrator. I recommend checking out their official Best Practises and Templates to learn more.