Sketch & Figma Import, Screen Transitions, and Scroll Views
#LightwellinAction is a monthly roundup of the newest features 🥳
It’s been a busy quarter for the team at Lightwell, and we’re excited to dive into some of the latest features with you! In our last post, we talked about our vision to enable a more streamlined workflow for designers and developers building amazing mobile experiences.
The first step in doing that is supporting design file import and making that experience as butter smooth as possible, so without further ado…
Sketch & Figma Import (Beta)
Today, we’re releasing a fast and easy way to import your designs from Sketch and Figma. All your beautiful designs are now only a couple clicks away to building them into Lightwell.*
*Both file imports support custom vectors, combined shapes, gradients, shadows, blurs, nested symbols and overrides. All things vector-related are supported. Custom text fonts and components coming soon!
Screen Transitions
Adding screen transitions is now as easy as adding an animation to a layer. In your Actions section, you can select “Transition” and choose from Slide, Push, and Fade transitions between screens.
Each transition can be further customized with direction, time duration, and timing curves. With this in place, designers can create powerful screen transitions effortlessly.👌
If you want to see for yourself, download the included Sample Project and check out how we set up a screen transition that fades right into a new screen animation on load.
Scroll Views ↔️↕️
Scroll views is a feature in Lightwell that allows you to, well, scroll. Using your settings correctly, you can make it scroll in any direction you want.
Once you know what layers you want to be scrollable, you can create a scroll in two simple steps:
- Group layers that you want in your scroll view ✔️
- Check ‘Make Scroll Area’ in your Layer Controls ✔️
That’s it! To make your scroll content behave the way you want, you can edit the scroll area to the right of your canvas.
A couple of things that are already built in: Overdrag (when you can drag the scroll’s content too farther than the boundary) and Bounce (a bounciness that automatically brings your content back to the original position).
Linear Path Animation
Animations have always been one of the powerhouse features in Lightwell. They are especially useful when creating micro-interactions and high fidelity animations on a particular layer instead of just screen-to-screen animations.
With the latest release, you can create position animations as linear or curved paths right on your canvas. Each keyframe has control point handles to change the curvature path of each animation.
💡 Double clicking on the keyframe control points switch between curve handles and linear path animations.
What’s Next
We have even more exciting news for you in the coming weeks! *ahem ahem* Developer access to designs via SDK, anyone? Be the first one to hear about new features and updates by following us on twitter @lightwellpro!🐤
We can’t wait to see the amazing things you build, and help you bring your ideas to life on mobile. If you have any questions or run into any issues when using Lightwell, please let us know! We’d love to hear from you. 💌
Make sure to update to the newest version of Lightwell: Version 5.5. If you don’t see an automatic update reminder, you can always “Check for Updates” in your main menu.
Until next time Lightwellers! Happy Creating! ✨
—
Download Lightwell for Mac OS X
Download the Lightwell Previewer for iOS
