Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/airbnb/lona
A tool for defining design systems and using them to generate cross-platform UI code, Sketch files, and other artifacts.
https://github.com/airbnb/lona
Last synced: 3 months ago
JSON representation
A tool for defining design systems and using them to generate cross-platform UI code, Sketch files, and other artifacts.
- Host: GitHub
- URL: https://github.com/airbnb/lona
- Owner: Lona
- License: mit
- Created: 2017-10-11T23:05:08.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T21:40:53.000Z (almost 2 years ago)
- Last Synced: 2024-05-19T07:40:40.526Z (6 months ago)
- Language: Swift
- Homepage:
- Size: 29 MB
- Stars: 7,526
- Watchers: 174
- Forks: 265
- Open Issues: 120
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: .github/CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
Lona (Developer Preview)
> This project is in an early stage and lacks documentation – however, with some effort, it can be used very effectively. If you're interested in contributing or using it at your company, feel free to open a GitHub issue or get in touch with me on Twitter [@dvnabbott](https://twitter.com/dvnabbott). I'm currently supporting a few early adopters.
>
> Airbnb doesn't provide support for this project. The code and automated tests are not at the same degree of technical rigor as other Airbnb projects.## Overview
[![Build Status](https://travis-ci.org/airbnb/Lona.svg?branch=master)](https://travis-ci.org/airbnb/Lona)
Lona is a collection of tools for building design systems and using them to generate cross-platform UI code, Sketch files, and other artifacts.
Lona consists primarily of 3 parts:
- [Lona Components](#lona-components) - A data format, `.component`, for cross-platform components
- [Lona Studio](#lona-studio) - A GUI tool for designing `.component` files
- [Lona Compiler](#lona-compiler) - A CLI tool & API for generating UI code from `.component` filesWhy Lona? Read more about challenges with cross-platform design systems at scale, and how Lona solves them [here](./docs/overview/background.md).
### Lona Components
A design system is defined in JSON as a collection of:
- Components (can be nested)
- Colors, Text Styles, Gradients, and Shadows
- Data TypesThe specification for these files can be found in the [docs](./docs/file-formats/README.md).
### Lona Studio
Lona Studio provides a graphical interface for working with `.component` files.
Lona Studio is primarily for building component systems, but can also be used for:
- Quickly mocking up new screens from existing components
- Viewing designs with real data from JSON files or APIs
- Experimenting with designs across multiple screen sizes
- Automating design tasks - e.g. localizing screenshots for different languages and exporting hundreds of images
- Working with animations (Lottie) and rendering videos from them
- and more!If you have Xcode installed, you can try it out by following the [installation instructions](./studio/README.md).
> Wondering if this replaces Sketch? Why a native Mac App? I answer some common questions here in the [FAQ](./docs/overview/faq.md).
### Lona Compiler
The Lona Compiler converts .component files to UI code for various targets.
Currently, these targets are supported:
- iOS / macOS (Swift)
- React DOM / React Native / React Sketchapp (JavaScript)Support is planned for:
- Android (Kotlin)
The target with the most features currently is Swift. However, it's still fairly rough. If you want to try it out, check out the [installation instructions](./compiler/core/README.md).
If you're looking for a sample of the generated code, check out [the test cases](./examples/generated/test)
## Core Team
- Created by [@dvnabbott](https://twitter.com/dvnabbott)
- Design tool integrations and infrastructure by [@mathieudutour](https://twitter.com/mathieudutour)### Contributors
- Lona Compiler development by [@outdooricon](https://github.com/outdooricon)
- Design & development help by [@ryngonzalez](https://twitter.com/ryngonzalez)
- Gorgeous logo by [@pablocar0](https://twitter.com/pablocar0)
- Lona Studio development by [Nghia Tran](https://github.com/NghiaTranUIT)
- Swift code generation help by [Laura Skelton](https://twitter.com/skelovenko)
- Lona Compiler development by [Jason Zurita](https://twitter.com/jasonalexzurita)