Automotive Design for Compose is an extension to Jetpack Compose

Related tags

Mobile android compose
Overview

Automotive Design for Compose

OpenSSF Scorecard

Introduction

Automotive Design for Compose (also called DesignCompose in the source) is an extension to Jetpack Compose that allows every screen, component, and overlay of your Android App to be defined in Figma, and lets you see the latest changes to your Figma design in your app, immediately!

To use Automotive Design for Compose in an app, a developer specifies the Composables that they’d like to be defined by Figma, and a designer uses Figma to draw them. Most Figma features, including Auto Layout, Interactions, Variants, and Blend Modes are fully supported. This repo includes the DesignCompose library, an interactive tutorial app (in reference-apps/Tutorial), and a sample customizable Media Center for Android Automotive OS (in reference-apps/aaos-unbundled).

Find our documentation on the Android Automotive partner website.

Getting Started

Automotive Design for Compose is currently only available as source code. Stay with us as we get closer to our 1.0 release and add more documentation, begin publishing releases, and make things even easier to use!

If you'd like to begin working with Automotive Design for Compose or would like to run the Tutorial App, you will need to perform some initial setup:

Android Studio

Currently testing with Android Studio Electric Eel | 2022.1.1

Android NDK

Version 25.2.9519653 is required. It can be installed via Android Studio's SDK Manager or on the command line using the sdkmanager binary.

"${ANDROID_HOME}/cmdline-tools/latest/bin/sdkmanager" --install "ndk;25.2.9519653"

Rust

Rust 1.63.0 is required to compile DesignCompose's Live Update service. Install at rustup.rs. For working with the code, we recommend the rust-analyzer plugins for VS Code and Android Studio / IntelliJ.

Android Studio will not pick up on a new Rust install without restarting the IDE. In addition, if you launch Android Studio via desktop shortcut or similar (i.e. not from the command line), then it still may not detect the install. In this case you can log out of your computer and back in, or simply restart your computer.

Rust Toolchains

The DesignCompose library includes a Rust JNI library, which requires Rust build target toolchains. Install them by running the following from the root of the repository

./install-rust-toolchains.sh

Python

Python3 must be installed and available on your path as python. You can configure this by installing python-is-python3:

apt install python-is-python3

Installing the Automotive Design for Compose Figma Plugin and Widget

The DesignCompose Plugin and Auto Content Preview widget are needed to enable additional layout options and features. Check your Figma account to see if they've already been installed for you. If not, you'll need to build and install them. You can build on any system, but Figma only supports plugin installation via the Figma Desktop App, which only runs on macOS and Windows.

There are two packages that are needed, the Extended Layout plugin and Auto Content Preview widget. Both are located in the support-figma directory. Build each by running the following: (you'll need nodejs and npm installed on your system)

npm install
npm run build

Then open the Figma Desktop app, go to Plugins -> Development -> Import plugin from Manifest and select the manifest.json file to import.

Running the Tutorial App

The DesignCompose Tutorial app shows you the capabilities of DesignCompose through a series of interactive examples. You will need a Figma account and personal access token to view the Tutorial Figma file and a large-screen device to run it on.

You'll work with your own copy of the Tutorial Figma file. Create it by importing reference-apps/tutorial/DesignComposeTutorial.fig to your Figma account. Once uploaded, you'll need to identify the Figma Document ID from your new file's URL. It's the alphanumeric string between file/ and the name of the document For example:

figma.com/file/ABCDEFG123/File-name

The app's Gradle project is :reference_apps:tutorial within the main DesignCompose Gradle project. Build and launch it on your device, then set your Figma Access Token on the app by running:

FIGMA_ACCESS_TOKEN=<YOUR_ACCESS_TOKEN> \
    ./gradlew :reference_apps:tutorial:setFigmaTokenDebug

Next, switch the app to use your copy of the Tutorial file by clicking the dropdown arrow in the upper right. This will open the Design Switcher.

Collapsed Design Switcher

Click the Change button to switch document IDs, and enter the ID of your copy of the Tutorial Figma File. Click Load and the app will start fetching your file (it'll take about a minute)

While that's loading, open your copy of the Tutorial file on Figma and find the Getting Started box (it's at the top with a pointer pointing to it).

Find Getting Started

Zoom in on it and begin your tutorial!

Getting Started Frame

Building your own app

Automotive Design for Compose is not yet being published in Maven. For now you can use the publishAllPublicationsToLocalDirRepository Gradle task to build a local copy of the libraries or include the project in a Gradle composite build.

We'll be adding more documentation and guides soon!

Source Layout

Automotive Design for Compose consists of several components:

  • The Jetpack Compose renderer of Automotive Design for Compose documents consists of several modules:

    • annotation contains the Kotlin annotation definitions like @DesignDoc and @DesignComponent.

    • codegen contains the Kotlin compiler plugin that processes the annotations and generates stub Composables that use the Automotive Design for Compose runtime.

    • designcompose contains the code that interprets Automotive Design for Compose documents and renders them using Jetpack Compose. It also contains the code that uses the Figma Import JNI library to fetch documents from the Figma webservice.

  • Figma Import, in crates/figma_import, is a library implemented in Rust that fetches documents and resources from the Figma API and generates a serialized document containing only the information that Automotive Design for Compose needs. The JNI interface used by the Android runtime is in crates/live_update.

  • Figma plugins that give designers more control and a better experience using Figma with Automotive Design for Compose:

    • The Extended Layout Plugin, in support-figma/extended-layout-plugin , provides a panel for formatting text, a panel to provide a JSON file with keyword details, a panel to validate keyword usages against the provided JSON file, and a command to sync Figma's prototype settings to the main document.

    • Auto Content Preview Widget, in support-figma/auto-content-preview-widget provides a Figma widget that uses the JSON file and allows designers to create and preview complex list layouts.

  • A Validation app in integration-tests is used for visually validating changes

  • The Tutorial app in reference-apps provides an overview of DesignCompose

  • The reference-apps/aaos-unbundled directory contains a separate Gradle project that includes demonstrations of DesignCompose with Android Automotive OS Apps, such as a MediaCenter app.

Get in touch

You might also like...
Martinez is vNext Ethereum implementation written in pure Rust with Erigon architecture as design.
Martinez is vNext Ethereum implementation written in pure Rust with Erigon architecture as design.

🧬 Martinez 🧬 Next-generation implementation of Ethereum protocol ("client") written in Rust, based on Erigon architecture. Why run Martinez? Look at

A preprocessor for mdbook to add Material Design admonishments.
A preprocessor for mdbook to add Material Design admonishments.

mdbook-admonish A preprocessor for mdbook to add Material Design admonishments, based on the mkdocs-material implementation. It turns this: ```admonis

Anchor Design of contract - Accounts, Parameters

MarketplaceDesign Anchor Design of contract - Accounts, Parameters Main Instructions are Initialize ListForSale AcceptOffer CancelList MakeOffer Cance

Desktop app for reading and downloading manga. With clean distraction-free design and no clutter

Tonbun Tonbun is a desktop app for reading and downloading manga. With clean distraction-free design and no clutter. Build with Rust, Tauri, Vue.js, a

A Domain Driven Design example application in Rust.

Rust Domain Driven Design Example rust-ddd Rust Domain-Driven-Design (DDD) Summery This repository is used to present how I find implementing DDD in R

Service-Oriented Design Patterns for Rust

SOD: Service-Oriented Design Overview This crate provides Service, MutService, and AsyncService traits and associated utilities to facilitiate service

Designed as successor to Pretty-Good-Video for improved codec structure, API design & performance

Pretty Fast Video Minimal video codec designed as a successor to Pretty Good Video Goals are to improve: Quality API design Codec structure (Hopefully

DynamoDB library for single-table design in Rust

A DynamoDB abstraction for Rust Deez is a DynamoDB abstraction for implementing Single Table Design easily, inspired by ElectroDB. Getting Started Def

ratlab is a programming platform designed loosely for hobbyist and masochist to analyse and design stuff and things that transform our world?
ratlab is a programming platform designed loosely for hobbyist and masochist to analyse and design stuff and things that transform our world?

ratlab A programming language developed by Quinn Horton and Jay Hunter. ratlab is a programming platform designed loosely for hobbyists and masochists

Byte is a blazingly fast🚀 Discord Bot with a user-friendly design using twilight written in rust🦀.

Byte Byte is a blazingly fast🚀 Discord Bot with a user-friendly design using twilight written in rust🦀. How To Run There is a public version of the

🦀 The ultimate search extension for Rust
🦀 The ultimate search extension for Rust

Rust Search Extension 简体中文 The ultimate search extension for Rust Search docs, crates, builtin attributes, official books, and error codes, etc in you

A setuptools/wheel/cffi extension to embed a binary data in wheels

Milksnake Milksnake is an extension for setuptools that allows you to distribute dynamic linked libraries in Python wheels in the most portable way im

Visual Studio extension for Rust
Visual Studio extension for Rust

Visual Studio extension for Rust Currently in development, and not feature complete. Stable versions are available on the Visual Studio extension gall

Rust extension for Visual Studio 2017 with RLS support

Rust support for Visual Studio 2017 Preview Adds language support for Rust to Visual Studio 2017. Supports: code completion goto definition find all r

crates is an extension aims to help people to manage their dependencies for rust (crates.io & TOML).
crates is an extension aims to help people to manage their dependencies for rust (crates.io & TOML).

crates Hello Rust & VSCode lovers, This is crates, an extension for crates.io dependencies. Aims helping developers to manage dependencies while using

Lisp dialect scripting and extension language for Rust programs

Ketos Ketos is a Lisp dialect functional programming language. The primary goal of Ketos is to serve as a scripting and extension language for program

Extension for actix-web to validate user permissions

actix-web-grants Extension for actix-web to validate user permissions. To check user access to specific services, you can use built-in proc-macro, Per

Open Weather extension for i3status

I3owm rust implementation of Open Weather Map add-on for i3status Example usage in i3config: bar { status_command i3status | i3owm -p 2 -r -k key -c

A discord.py experimental extension for audio recording

discord-ext-audiorec This project is currently under development. We do not guarantee it works.

Owner
Google
Google ❤️ Open Source
Google
Design token framework — adopt a unified design language across platforms, codebases, and teams

Palette Design tokens framework with atomic classes for React and Master CSS. Deliver a consistent visual identity across your apps with design tokens

Foretag 4 Aug 23, 2022
Build tool for custom setups of docker containers. Docker compose didn't offer enough, Kubernetes offered too much. Carbon is the in-between.

docker abstraction layer with added flair Fast travel: Tips Contributing How it works Installation Help This tool started its life as a way to make de

akhara 3 Nov 10, 2022
The point of this anchor project is to serve as a starter kit or example to compose with mango-v3 using anchor.

The point of this anchor project is to serve as a starter kit or example to compose with mango-v3 using anchor. It currently provides 2 examples and various inline todos on how to extend this.

null 26 Oct 10, 2022
Convert your docker-compose into excalidraw

excalidocker-rs Rust-based utility to convert docker-compose.yaml files into excalidraw files. Key features Transform your local docker-compose files

Eugene Tolbakov 26 Jun 15, 2023
The open source design documentation tool for everybody

Heads up: reimagining artifact 3.0, check it out at artifact_py Artifact: design documentation for everybody Note: this project, and the python re-wri

Rett Berg 564 Nov 15, 2022
A data-first Rust-native UI design toolkit.

Druid A data-first Rust-native UI toolkit. Druid is an experimental Rust-native UI toolkit. Its main goal is to offer a polished user experience. Ther

null 8.2k Dec 31, 2022
A catalogue of Rust design patterns, anti-patterns and idioms

Rust Design Patterns An open source book about design patterns and idioms in the Rust programming language that you can read here. Contributing You ar

null 6.5k Jan 9, 2023
unFlow is a Design as Code implementation, a DSL for UX & backend modeling. DSL to Sketch file, Sketch to DSL, DSL to code.

unflow 是一个低代码、无代码设计语言。unFlow is a Design as Code implementation, a DSL for UX & backend modeling. DSL to Sketch file, Sketch to DSL, DSL to code.

Inherd OS Team (硬核开源小组) 70 Nov 27, 2022
xh is a friendly and fast tool for sending HTTP requests. It reimplements as much as possible of HTTPie's excellent design, with a focus on improved performance.

xh is a friendly and fast tool for sending HTTP requests. It reimplements as much as possible of HTTPie's excellent design, with a focus on improved performance

Mohamed Daahir 3.4k Jan 6, 2023
Elemental System Designs is an open source project to document system architecture design of popular apps and open source projects that we want to study

Elemental System Designs is an open source project to document system architecture design of popular apps and open source projects that we want to study

Jason Shin 9 Apr 10, 2022