Lona
A tool for defining design systems and generating cross-platform UI code, Sketch files, and other artifacts.
What is Lona?
Lona is a toolset for creating and managing design systems, enabling teams to define components in a structured JSON format and automatically generate UI code for multiple platforms like iOS, macOS, and React. It solves the problem of maintaining visual and functional consistency across different platforms and design tools.
Design system architects, UI/UX designers, and frontend developers working in cross-platform environments who need to synchronize design and code.
Developers choose Lona for its integrated approach that combines a visual design tool with a code compiler, reducing manual translation errors and speeding up the design-to-development workflow.
Overview
A tool for defining design systems and using them to generate cross-platform UI code, Sketch files, and other artifacts.
Use Cases
Best For
- Building and maintaining cross-platform design systems
- Generating Swift code for iOS and macOS apps from design components
- Creating React components for web and native applications
- Automating the production of Sketch files from a central design system
- Mocking up screens and experimenting with designs across multiple screen sizes
- Localizing screenshots and exporting batches of images for different languages
Not Ideal For
- Teams requiring immediate production-ready tools with comprehensive documentation and support
- Projects where Android development is a primary focus, as Kotlin support is only planned
- Organizations without Mac OS infrastructure, since Lona Studio is a native Mac app
- Small-scale projects where the overhead of a full design system toolset isn't justified
Pros & Cons
Pros
Lona combines Lona Studio (a GUI design tool) with the Lona Compiler, enabling seamless translation of design components into production code, bridging the gap between design and engineering as per its philosophy.
It generates UI code for iOS/macOS in Swift and React for web/native, allowing consistent implementation across multiple platforms from a single .component source.
Lona Studio can automate design tasks like localizing screenshots and exporting hundreds of images, speeding up workflows for large-scale projects.
Components are defined in a JSON-based .component format, providing a standardized, version-controllable way to manage design systems with colors, text styles, and data types.
Cons
The project is in 'Developer Preview' with admitted lack of documentation and code that isn't as rigorous as other Airbnb projects, making it unstable for production use.
Android support is only planned, not implemented, and the Swift code generation is described as 'fairly rough,' restricting its usefulness for current cross-platform needs.
Lona Studio is a native Mac app, excluding Windows or Linux users from the visual design interface without alternatives, as noted in the FAQ about why it's a Mac app.
Open Source Alternative To
Lona is an open-source alternative to the following products:
Frequently Asked Questions
Related Projects
inferA static analyzer for Java, C, C++, and Objective-C
R.swiftStrong typed, autocompleted resources like images, fonts and segues in Swift projects
SwiftGenThe Swift code generator for your assets, storyboards, Localizable.strings, … — Get rid of all String-based APIs!
XcodeGenA Swift command line tool for generating your Xcode project
Found a gem we're missing?
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.