Published on <a href="https://blog.prototypr.io/how-to-make-a-screen-by-screen-prototype-in-swift-7bbbe6543924?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Kenzo Nawa 
<h4>Ever wish you could export your screens from Sketch into XCode?</h4>
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*V-OO7aBIGl-tFLvoE803Cg.jpeg">
Creating a prototype in Swift is not as hard as you think. A lot of people get intimidated by XCode’s interface because of its huge amount of buttons and options, but I’ve got good news for you: You can create a prototype without writing any code.
I’ll be giving you a step-by-step guide on how you can create a basic prototype using Swift’s Storyboard. You’ll see that storyboards actually look similar to the design tools we use.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*RBu1JYeoEbKg_74gqsJggw.png">
<h3>What you’ll need</h3>
This prototype will be just like the ones made in inVision. We’re gonna add in our screens and place hotspots that link to other screens. All you’re gonna need is <a href="https://developer.apple.com/xcode/">XCode</a> and your screens as image files. If you don’t have screens to work on, you can <a href="http://kenzonawa.com/outsource/sketch-screens.zip">download</a> the ones I’ll be using.
<blockquote>Tip: Have your screens named name@1x, name@2x, name@3x so that XCode can automatically process them.</blockquote>
<h3>1. Creating a project</h3>
When you open XCode, you should see a screen like this (without all the projects on the side). Let’s click on Create a new XCode project.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*d1OT-_69OZ6ed4KeVIEdzg.png">
You’ll see a bunch of options here, but don’t worry about them. Single View App is the most widely used and can accommodate almost any app. Note that single view doesn’t mean it only handles one screen (which is what I thought at first).
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*8HnRvUEUJHiuviLubneTRw.png">
You can name your project anything. For this example, I’ll be naming it Prototype.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*CE-cZRlJ5FxCSWBOhx78tw.png">
<h3>Don’t be overwhelmed</h3>
When you create the project, this is the first screen you’re gonna see
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*pTVf2bTVKQfi5-k3y2yRdw.png">wow, that’s a lot to take in
Here’s what I want you to see
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*lZ9nw44icvDk-Ol0GLitLQ.png">That’s a little easier, right?
<ol>
<li>These are the only two files we’ll be working with.</li>
<li>You’re probably familiar with this layout. The left panel shows document hierarchy and the right shows more information.</li>
<li>This is where you choose on which device you want to run your app.</li>
</ol>
<img alt="" src="https://cdn-images-1.medium.com/max/604/1*4AJ7K6lmOIKcZTa3C02mlg.png">
Let’s switch to iPhone 8 because that’s the default screen size on the Storyboard.
<h3>2. Importing your screens from Sketch</h3>
Click on Assets.xcassets and drag your images files
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*24f7apY1BtSANc61gAFS7w.png">
Once they’re imported, you should see that XCode automatically groups them by resolution type.
<img alt="" src="https://cdn-images-1.medium.com/max/1004/1*EE6D8r3rmv3m7O48BZ_42g.png">
Now let’s move on to the Storyboard!
<h3>Storyboards</h3>
Here’s what it looks like
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*ROFyAO8HHoKOgpnxaPBjmw.png">
You can hide the left panel because we won’t be navigating our project anymore.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*5J4ge-GnMCz88agl5FjlZQ.png">
<ol>
<li>Close the left panel</li>
<li>The Object Library — This is where we add elements to our View Controller.</li>
</ol>
<h4>What’s a View Controller?</h4>
In storyboards, you can think of view controllers as artboards in Sketch. If you have 5 different screens, you’re gonna have 5 different view controllers.
If you get into coding, however, view controllers are much more than that. They are the ones that handle all the logic for a given screen.
<h3>3. Adding a screen</h3>
Search for “Image” in the Object library. You should see Image View as the only result. Let’s drag it from the library to inside the view controller. You should see your image somewhere inside the view controller.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*eDK2g5tucS9_WcpjAr1s_w.png">
<ol>
<li>Constraints — This is where you add your Auto Layout constraints, so that your app is responsive.</li>
</ol>
Let’s can click on the Add New Constraints and add 0’s to the top, bottom, leading(left) and trailing(right) constraints.
<img alt="" src="https://cdn-images-1.medium.com/max/720/1*HtZB1KY0VtkVhabAozlq_g.png">
<h4>Auto Layout</h4>
Auto Layout works by specifying how far your chosen element should be from another element. XCode automatically detects the other element given the visual layout. So in this example, we are saying this image should be 0 pts apart from the edges of the screen.
<h3>4. Selecting the image</h3>
On the right panel, make sure you’re in the Attributes Inspector(it should be the default) and choose your screen from the Image dropdown.
<img alt="" src="https://cdn-images-1.medium.com/max/514/1*N8wj4uvhvukvLz7l5U6WAQ.png">
You should now see your first screen!
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*msCanNdK8g9zGbVuRa5IrA.png">
<h3>5. Creating hotspots</h3>
We’re gonna be creating hotspots with invisible buttons. Back in the Object Library, search for “button”.
<img alt="" src="https://cdn-images-1.medium.com/max/512/1*50JfOxyBeiBuKbRJa4EcxQ.png">
Drag it into wherever you want your hotspot to be and then resize it as you wish. Also, double click on it and delete the text, we don’t need that.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*LrChu3z2jARiJYPeIfkXWA.png">
<h3>6. Creating another screen</h3>
To add another screen, we just need to drag and drop a View Controller from the Object library.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*EZO8wAjaCghb3nudjszU5Q.png">
From here, let’s repeat steps 3- Adding a screen and 4- Selecting the image for our second screen.
<h3>7. Making the transition</h3>
To make a transition from the hotspot to another screen, click and drag with your right mouse button from the invisible button to the destination screen.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*i602hI1ikaoQKthawfrfVg.png">
When you let go, choose Present Modally as your option.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*p2w9xUMRDn0yuxOYfUNDLw.png">
<ol>
<li>Segue — Segues are the name Swift has for screen transitions. You should now see a connection between your two screens and be able to see its attributes.</li>
<li>Transition — Storyboards don’t have the fanciest built-in transition animations. The one I recommend is Cross Dissolve.</li>
</ol>
<h3>8. Rinse and Repeat</h3>
Now you know how to create screens and make connections between them! Just repeat the steps until you have your entire flow.
<img alt="" src="https://cdn-images-1.medium.com/max/854/1*UgI2GVlONb7Gl3y3Ybfi2A.gif">
At this point, feel free to run your project on the simulator. It should be working!
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*7GleobdsMELVljfQkGfn3A.gif">
<h3>That’s it!</h3>
This was a basic prototype, but I hope you’re a bit more familiar with XCode and Swift now. I’d never thought of Swift as a prototyping tool, but I accidentally got the hang of it when I was building an app for myself, and realized that it’s much easier than I expected.
I think prototyping in Swift has a lot of unspoken benefits. Next time, I’ll show you a prototype that was only made possible with Swift (hint: it uses maps).
If you liked this guide and would like to learn other stuff with Swift, let me know in the comments!
<iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fupscri.be%2Ff51076%3Fas_embed%3Dtrue&amp;dntp=1&amp;url=https%3A%2F%2Fupscri.be%2Ff51076%2F&#038;image=https%3A%2F%2Fe.enpose.co%2F%3Fkey%3DdRXnS9Gplk%26w%3D700%26h%3D425%26url%3Dhttps%253A%252F%252Fupscri.be%252Ff51076%252F%253Fenpose&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=upscri" width="800" height="400" frameborder="0"><a href="https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href">https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href</a></iframe><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=7bbbe6543924" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="https://blog.prototypr.io/how-to-make-a-screen-by-screen-prototype-in-swift-7bbbe6543924">How to make a screen-by-screen prototype in Swift</a> was originally published in <a href="https://blog.prototypr.io">Prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

How to make a screen-by-screen prototype in Swift

Ever wish you could export your screens from Sketch into XCode?

Top Stories