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.
- Open the frame tool by either clicking its icon in the menu bar or pressing (F)
- Choose the desired screen resolution
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.
- Download the Figma Mirror app from the app store
- Connect it to Figma account and complete setup
- When prompted, keep the app open on your phone and select the desired frame on your laptop
- 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.
- Use the iOS icon template from here
- Create your design in the Single Export section as instructed
- When you're done, select the
icon-iosframe, scroll down in the sidebar, and hit the Export button
- 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.
Step 3: App Store Previews
App store previews are actually fairly straightforward.
- Find out the appropriate screenshot dimensions from here
- Create a frame that size in Figma
- Make your design
- Export it as a JPEG - this is very important, because App Store screenshots cannot contain any transparency
- All done!
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.