Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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` files

Why 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 Types

The 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)