A New Approach to Develop Native iOS Applications

If you ever turned a design file into a native iOS app, or if you plan to do so, this article is for you. In this article we will tackle a new and easier approach developers can use to turn their design into native application source code.

In this article we will show you how you can easily develop a native iOS application from a Photoshop (PSD) file in a few minutes using Yotako.

From a Photoshop design to Xcode in just a few minutes

This new approach has been made possible thanks to Yotako, our online tool to convert design into code (currently in beta — find tips to get a private invite at the end of this article).

Yotako aims at providing quality source code to all web and mobile developers, whatever the design tool they use or the stack they choose to develop their app.

Starting with Swift

After we released our HTML/CSS stack for mobile applications, we received many requests to add native programming languages in the stacks available. This is now partly achieved with Swift available in Yotako. No need to worry if you are an Android or an Objective-C developer: the 2 stacks will be available in our next release!

A few words about Swift. Swift was launched by Apple in 2014 as a new native programming language for iOS. Their intent was to replace Objective-C with a safer, more concise and easier to learn language. For many developers, modernizing the iOS native ecosystem was a necessity considering that Objective-C dated back to the 80’s.

Originally created as an Apple proprietary language, Swift is now open-source since 2015 and the release of version 2.2. This contributed greatly to its popularity. In 2017 Swift ranked 4th for “Most Loved Programming Language” in the Stack Overflow Developer Survey.

To maintain such a popularity, Apple even launched Swift Playground, an application to help kids and wannabe developers learning Swift in a fun way.

Now let’s have a look on how you can get custom Swift code with Yotako.

It all starts with the design

In order to create an application, we first need a design. For this example we redesigned the Shazam app directly in Photoshop (you can download the PSD file here).

Replicate of the Shazam iOS app designed in Photoshop

Get a Swift code in 4 easy steps

In this example we will develop a replicate of the Shazam iOS app using Photoshop and Swift.

1. Import our design

Once we are logged into Yotako, we go to “Create a project” and drag and drop our design file.
Yotako currently works with Photoshop and Balsamiq, Sketch is still under development. For more information about the designs Yotako currently supports you can have a look at our documentation.

2. Select the stack of our choice

After the design import we can directly select the mobile stack of our choice in this second step. In this case we selected iOS/Swift.

3. Choose a repository

In the third step we have to choose where we want to get our code. It could be either in Yotako’s public repository on Github or on the Github or Bitbucket account of our choice.

In this example we selected Yotako’s repository on Github.

4. Get the code

After we gave a name to our project we just have to click on “create” and the project is available in our repository (in this example here is the Github project we get).

All we have to do is download the project on Github and open App.xcodeproj directly with Xcode.

Here is the result you will get in Xcode

The code of our application is accessible and remains modifiable for any further improvements or changes we may want.

What’s next?

Our team is working hard to bring new features and stacks available in Yotako. If you want to receive updates on what we add you can subscribe to our newsletter or join our community on Twitter and Facebook.

Stay tuned! In a next post we will discuss how you can turn a design into an Android native application using the same method.

Surprise surprise!

To reward you for reading this through here is the link you can use to have a direct access to our private beta. We are currently looking for feedback on how you want us to improve Yotako so feel free to share your opinion with us!

Happy coding!

The team at Yotako