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 screens for each screen state. For example, five different screens were created to represent the various states of the "Order Screen." To optimize this for the prototyping stage, the five 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 divs 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 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 frame-by-frame animation with a starting keyframe and an ending keyframe. 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 to happen occur on the screen. 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.
This is what it looks like after a developer integrates part of the menu designs from Lightwell and the associated code.
Integrating Designs into Code 🖥
Integrating the designs into the Xcode project uses a wide range of features from the Lightwell SDK. For the simpler pages like the initial launch screen we can leverage the convenience generators from LightwellKit.
The app has a complex input as its central navigation element. In this case we can create the input and navigation as we would without Lightwell, get the touch driven components feeling right, and then fill in the designs and internal layouts.
Similarly, features around the menu itself are design as samples of the real data. In this case we utilize the layouts and animations built onto those samples, and replace the text and images with real data at run time.
This was a great project since it has a wide range of requirements. Some parts were best handled by custom developer code, while the rest could use the easy to mix-in features of the Lightwell SDK to save time.
Great work! 🚀