Design Tool, Meet Developer SDK
Spring roundup: new releases, features, and company news 🌸✨
We’re excited to announce a brand new Lightwell for professional mobile design and development!
This means that we’re focused solely on making Lightwell the best tool for designers to build high fidelity mobile prototypes that developers can implement with a few lines of code.
True designer-to-developer handoff 🎨📲
A visual tool for designers to prototype everything from layouts to animations. A native SDK for developers to access all design as native iOS elements.
A Few New Things
To better streamline the designer to developer workflow, there are a few things that we’ve released as beta features.
1:1 Design Import
We’ve been adding support for design files from Sketch and Figma in addition to Photoshop. This includes importing combined shapes, shadows, blurs, fills, and masks.
Just click on the ‘Import’ icon and select the Sketch file that you’d like to start with. For Figma, use the unique file key as described in this article. Each artboard imports as a separate screen in Lightwell.
Here’s an example of a food ordering app built in Lightwell from design to code. Download the Sketch source file, Lightwell File, and Xcode file here to try for yourself!
Dynamic Layouts
Designing for multiple devices and screen sizes is quick and easy with dynamic layouts. You can make your entire screen layout responsive with just a few clicks.
Under Layer Controls, each layer has a layout section that lets you create a set of constraints to calculate the position and size of all the views in the screen. Each layer can be pinned to the screen or to a parent layer.
All the dynamic layouts you set up on your layers will automatically be exported with your layers properties for developer handoff. This means that developers don’t need to programmatically create Auto Layout Constraints in Xcode anymore. 👍
Animation Spring Timing
Animations take a curve that describe the type of animation. You can use pre-defined curves like ‘linear’ or ‘ease-in’, custom bezier curves and now, spring animations! Just in time for spring! 😉
A timing curve gives you control over the velocity at which layers animate over the duration of the animation. However it’s almost impossible to simulate a realistic elastic spring-like animation with basic timing functions.
The new ‘Spring’ timing lets you implement a realistic spring-like animation, that the SDK translates into animations using CAMediaTimingFunction. For fun, this is what our developers used to use to manually code timing curves. 👀
Lightwell SDK
The Lightwell SDK provides programmatic access to designs created in the Lightwell editor. After setting up a project in Lightwell, you can click on the ‘Export’ icon on the top right of the window to get:
- Folders of *Assets* (all sliced images, screen data, etc.)
- The *LightwellKit* framework
This asset package includes layers, layouts, and animations as assets that a developer can access and use in a completely new or preexisting iOS app.
Here are some examples of how you can use the SDK in an app. ⬇️
You’ll also notice that we’ve updated our version numbers, so all of our previous versions will be rebased to “0.x” as we work towards our launch of Lightwell v1.0 this year.
Make sure to update to Lightwell: Version 0.6. If you don’t see an automatic update reminder, you can “Check for Updates” in your main menu.
—
Download Lightwell for Mac OS X
Download the Lightwell Previewer for iOS
