iPhone Quick Start Design Template for Figma

A simple design template for iPhone 12 through 15 Pro and Max.

Nov 25, 2023

Go to the Figma File

Template

I found that it took quite some time pulling up device specs and getting everything setup. Which is all needed to be able to start designing, of course. I was able to find some resources to speed up the process. Those resources have been mentioned on the Resources page.

The templates in this file support iPhone 12-15 Pro and Max. The different device sizes are on different pages, so you can begin to build out your different states on the same page.

Backstory

I’ve been pecking away at an app build recently, and it came time to start the design process in Figma. I know, I know... That sounds a little backwards, but I’m also teaching myself Swift at the same time. So, I’ve been poking around in Xcode to see if I could even pull it off. My coding experience is in HTML, CSS, JS, and PHP (and actionscript, lolz). I did a short course on Python a couple of years ago at the start of the pandemic shutdown, and that felt familiar. I had very little issue with it even though my skills are definitely dusty on top of rusty.

Jumping into an OOP (object-oriented programming) model in Objective-C with a massive framework and new syntax to learn, however, was a bit of a shock. OOP models were the last thing I was studying about 8 years ago or so. So, I wanted to see how quickly I could get up to speed in Swift.

Well, so far, so good. I’m also using ChatGPT to help me learn faster and in layers, while biting off bigger pieces more quickly. I plan to share about that process as well, soon. Hence, why I’m now moving forward into the design phase. Which is why you’re here, so let’s get back to that! Here’s the link: