Designers and developers have different languages to describe the same things. Utilizing Sympli, can help keep both on the same page when building iOS apps. In this video, we discuss how to use Sympli in Xcode.
- View Offline
- [Narrator] In this video, we'll cover Sympli with Xcode. Inside of Xcode, we need to go to File, New, Project, choose a single view application and click Next. We'll call the product name the Landon Hotel and we'll call the organizational identifier the Landon. Go ahead and click Next. Now, we need to pick where it's gonna sit. And in this case, it should sit inside our exercise files, in 05_07.
Now, our Sympli plugin should already be installed and should be sitting between Navigate and Editor. Go ahead and select iPhone 6, cuz that's what we designed, and go to our main story board. Here we'll see our view controller, which, while it doesn't look like an iPhone 6, because it's gonna show everything outside and around the space of a iPhone 6, we can change that by going to our folded piece of paper, here, and scroll down and un-click Use Auto Layout.
And make sure to keep it on iPhone and go ahead and click Disable Size Classes. Now, it looks more like an iPhone 6. Go to our Sympli icon, over here on the right corner and click it, and you'll see this project open up. Go ahead and click Auto Sync and then double click on Landon. Now, you'll see all our designs in front of us. Let's go ahead and pick iOS Landon Home. Now from here, the developer has quick access to all of the text, icons, pictures, literally everything they're gonna need.
The reason for exporting assets separately, is so that we have it available to us when we need to go ahead and build the project, as you can see, with the splash hotel photo. You'll also note that the colors have been brought in, as has the fonts, as has they layers. So, it's following the same structure that we had seen in the Sympli web app. And that's a quick overview of Sympli with an Xcode. Up next, we'll move in the next steps.
- Extending Sketch
- Building a style guide
- Using styles and symbols
- Working with artboards
- Making responsive wireframes
- Using responsive design plugins: Artboard Zoom, Sketch Focus, Craft, and more
- Exporting your design
- Building a mobile app for iOS, Android, or watchOS
- Integrating other tools in your Sketch workflow