In this article, we'll walk through how to setup and import your Sketch files into Lightwell, create a high-fidelity prototype, and export the prototype into an asset package that a developer can implement with the Lightwell SDK. Download the Sketch source file, Lightwell File, and Xcode file to try it for yourself!
Download the following files:
- Sketch source file (for designers)
- Lightwell project file (for designers)
- Exported asset package and framework (for developers)
- Xcode file (for developers)
Prepping Sketch Files 🎨
Once the screen states for the application have been created, a review should be conducted to optimize for the prototyping phase.
Traditionally, designers create multiple artboards for each screen state. To optimize this for the prototyping stage, the artboards should be combined into one single artboard that holds all the required components.
To achieve this, make sure that every element and asset that will be used in the final screen is included in the combined artboard that will be imported into Lightwell.
Note: Give your layers unique names. This helps establish organized hierarchies and speeds up both the prototyping and implementation phases.
Import Into Lightwell 💫
When the Sketch design file is ready, import it into Lightwell with the "Import" icon on the top left of the application. In Lightwell, you will add actions (animations, transitions, audio, etc.) and triggers (touch or device inputs) to your production-ready prototype.
It's important to have good naming conventions for the different content layers in your designs. With iconography, grouped and combined shapes will import in the exact way they were set up. This means that every shape or line in your layers will import as separate layers in Lightwell.
Note: If you're not planning on animating an icon, it's best to flatten that icon into one single combined shape in order to optimize your file size.
Prototype in Lightwell 📲
In Lightwell, there are three main sections to set up your high fidelity prototype: Layout, Actions, and Prototype.
Layout is where you set up your layer hierarchy, dynamic layout constraints, ambient motion, and scroll views. To learn how to do this, read more here.
Actions is where you can bring your layers to life with single or grouped animations, screen transitions, and audio.
Each animation is a keyframe animation that allow you to customize values and timing. A new animation window will appear after you select from among four types of actions: opacity, rotation, position, and scale. To learn how do this, read more here.
Prototype is where you set up inputs to trigger actions. There are eight different interaction types for you to create within Lightwell. They fall into the following three categories: Touch Triggers, Device Triggers, and Action Triggers. To learn how to do this, read more here.
Export Into Xcode 🔨
Once the prototype is ready for development, simply export the asset folder by clicking the "Export Project Folder" button. Then send the full project folder to a developer for handoff and implementation.
Lightwell will do any necessary preparation of assets, like ensuring a rasterized image per device family – iPad or iPhone – and per screen density – non-retina, retina, and super retina. Then all of your rasterized images, vector files, audio clips, and screen data will be packaged together, ready to be included into an Xcode application bundle.
Integrating Designs into Code 🖥
Once all of the exported assets are included in the Xcode project, be sure to include the LightwellKit framework as an embedded framework. Lightwell will export a version of the framework with the assets. For other installation options, check out our documentation.
Integrating this design into the Xcode project uses a wide range of features from the Lightwell SDK. The basic structure for this app is the initial branded launch screen, then a series of quizzes.
For the launch screen (LaunchViewController.swift) we can use the default initialization. We'll create a loading context for the screen, add all of its views to the screen, and trigger the launch animation.
The app has a reusable hub as its central teaching and testing component (QuestionViewController.swift). This hub has different views for handling navigation, showing progress, and managing the core logic. To integrate this we'll set up a loading context for the screen, and add the specific views we want in viewDidLoad. We'll hook up any logic handling, and add some functions for managing the quizzes.
Since most of the uniqueness of this app is built around the internal workings of the quiz, we will manually code that one up (QuestionView.swift). Since LightwellKit uses native runtime types, we can build this however we want to mix and match with views initialized from Lightwell.
In this example the image based question is using vector assets, which are preserved as vectors at runtime. We pull the example answers directly out from Lightwell, understanding that in a production environment this will most likely be pulled from a server, randomized, or some other way be served dynamically (ExampleData.swift).
This was a great project since it is fairly straight forward to get the structure of the app up and running. Being able to implement some of the designs directly using the Lightwell SDK let us focus on the core features of the app.
Great work! 🚀