Skip to content
A tool for defining design systems and using them to generate cross-platform UI code, Sketch files, and other artifacts.
Swift OCaml HTML JavaScript C++ CSS Other
Branch: master
Clone or download
Latest commit d65bf68 Sep 11, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github Update PULL_REQUEST_TEMPLATE.md Dec 12, 2017
compiler Use bundled compiler if the user hasn't configured a compiler path Aug 15, 2019
config Consolidate config files and add prettierignore Jul 3, 2019
docs consistent linting defined at the root Apr 1, 2019
examples Update Logic, handle separate core libraries Jul 23, 2019
studio Update command to extract version number from app bundle Sep 10, 2019
.gitignore
.travis.yml Consolidate config files and add prettierignore Jul 3, 2019
LICENSE Updated Oct 11, 2017
README.md consistent linting defined at the root Apr 1, 2019
package.json Consolidate config files and add prettierignore Jul 3, 2019
yarn.lock consistent linting defined at the root Apr 1, 2019

README.md

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. 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

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 - A data format, .component, for cross-platform components
  • Lona Studio - A GUI tool for designing .component files
  • 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.

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.

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.

Wondering if this replaces Sketch? Why a native Mac App? I answer some common questions here in the FAQ.

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.

If you're looking for a sample of the generated code, check out the test cases

Core Team

Contributors

You can’t perform that action at this time.