Prototyping with Code

Collaborating better with engineers

Prototyping with code can have many advantages when it comes to working with engineers. You can prototype your ideas and show the developer a complete view of what you would like to achieve in your design. There are different tools like CSS, SwiftUI and more to help you achieve that goal.

Production-ready code

Some tools like SwiftUI, Framer or CSS can have production-ready code. So, you can be more efficient and effective with your team and be one step closer to coding your own designs.

More Powerful

Having an idea about the development process can be vital to becoming a better designer. With this skill, you are more likely to design things that will make sense to be put in production. It will also help you prioritize your design tasks. With this, you will become a designer with extraordinary powers.

SwfitUI

With Apple Silicon, you will be able to run iOS and iPad OS apps on the Mac. SwiftUI is also a game changer, since this framework allows you to build apps for all of Apple's five platforms: iOS, iPadOS, macOS, tvOS and watchOS with the same codebase. SwiftUI is a framework that is easy to get onboard. Many designers are using it to create real prototypes and in some cases they are crossing the bridge and creating real life apps. We have different courses at D+C that can help you learn more about SwiftUI.

Framer

Framer was one of the first tools that combined the concept of using code to empower the prototyping process. It helps with adding complex user interactions inside your prototype, taking your design and code components to the next level. You can run Framer on the web and it has a team collaboration feature to create high-fidelity prototypes.

Flutter

Flutter is a relatively new framework similar to SwiftUI. You can use the platform to create native components and build cross-platform apps. Flutter provides us with native performance, hot reload for fast development, and access to beautiful, native components. We have a course that will teach you different tips and tricks about Flutter.

CSS

There are many ways in which you can prototype your designs using CSS. It can be a good practice to test your designs and understand the performance of what you are trying to implement. At D+C, we have a CSS course where you can learn more about how to animate in CSS.

Quick prototype with Xcode

In this example, we will create a small prototype in Xcode. We will create a tab bar where the user will navigate between two screens from the tab bar. Let's open Xcode and select Create a new Xcode project, then choose from the templates iOS. In Application, select App. Enter Product Name and press Enter.

Now that we have our project created. Let's click on Main.storyboard and you will see the View Controller. Select the View Controller Scene and delete it because we want to create a Tab Bar Controller instead. To add a Tab Bar Controller, click on the Library, the plus icon + on the UI's top right corner. Then, let's write Tab Bar Controller in the search field, drag and drop the small asset to the canvas.

Next, you will see that we have three new screens on the canvas. Select the Tab Bar Controller Scene, and from the right sidebar, click on the settings tab. From there, let's check the box in Is Initial View Controller, so we can set up that screen as the main screen of our prototype.

Then, from the library let’s drag and drop an Image View, an Item 1 Scene and an Item 2 Scene. Image View will allow us to host the images that we have prepared for each one of the screens

Next, from the right side bar let’s select assets.xcassets. Then from our exercise files, drag the images we have on the folder Section.png and Tutorials.png and drop them.

Then, from the right side bar, let’s select the option Single Scale from the Scales drop down.

Now, go back to the Main.storyboard and go to Item 2 Scene. Here, select Image View.

From the right side bar, on the Image drop down, let’s select our images. For Item 1 Scene select Section and for Item 2 Scene select Tutorials.

Now let’s add some icons. Before adding some icons make sure that you are selecting Item inside the Item Scene from the second column of the UI.

Then, go to the right side bar of the UI. Here, let’s focus on the Bar Item section. You will notice some parameters like Title, Image, Landscape. Image is the icon inside the screen and Lanscape will display the icon inside the tab bar. Let’s use the icons that are provided by Xcode. For Item 1 we will title it: Courses, for Image and Landscape we will use books.vertical.fill. For Item 2 we will title it: Tutorials, for Image and Landscape we will use the books.fill.

Now that we have everything setup, let’s run our mock-up by hitting on the play button at the top left corner. Make sure that the prototype is set for iPhone 11. The Simulator will appear and now we can test our prototype and click on the icons in the tab bar. This will redirect you to their respective screens.

Conclusion

Many of the workflows nowadays are turning more and more into a design and development collaboration environment. SwiftUI is maybe the best and the most mature out of all of them. As designers, it is recommended to learn more about the development process and as developers we need to know more about the design process. The beauty about learning these frameworks is that you are one step closer from prototype to a real app.