Alexa Design System Toolkits
Use our Sketch and Adobe XD design toolkits to leverage the latest styles, patterns, and components available in Alexa Presentation Language (APL).
How it works
The Alexa Design System toolkits include libraries and templates to design multimodal skills that will be built with Alexa Presentation Language (APL). These libraries and templates represent the code-backed Alexa styles and Alexa layout packages, so the responsive templates and responsive components will automatically adapt to different viewport profiles. The toolkits will be updated with every major release of APL, so you’ll always have the right tools for your design.
Note: Only Sketch and Adobe XD are supported at this time.
Design toolkit for Sketch
- Alexa Design System library plugin: Sketch libraries are a collection of components and styles, such as: list items, icons, and colors to help build layouts and user experiences. This library includes Alexa Responsive Layouts that support device viewport profiles built with components and styles from the library.
- Alexa Design System templates: This file includes full-screen Alexa Responsive Layouts for supported viewport profiles that have been built using library components and styles.
- Amazon typefaces: The templates and library use Amazon Ember Display and Bookerly typefaces, which are also available to download.
- Download Sketch version 58 or higher.
- Download Amazon typefaces
- Download the Alexa Design System Sketch templates
- Install the Alexa Design System Sketch plugin
Install the Alexa Design System Sketch plugin. The library is updated automatically, so you’ll always have the most recent version.
Download the Alexa Design System templates and Amazon typeface files. The layouts file utilizes the library. You can either copy and paste art boards from the layouts file or save it as a template (but not as a new library).
Design toolkit for Adobe XD
- Alexa Design System: Adobe XD allows you to link assets, including colors, character styles, and components, from a source file to help quickly and consistently build layouts and user experiences with a design system. The symbols and styles in the Alexa Design System are all code-backed Alexa Responsive Layouts.
- Alexa Design System Templates: This file includes full-screen Alexa Responsive Layouts for supported viewport profiles that have been built using library components and styles.
- Amazon Typefaces: The design system uses Amazon Ember Display and Bookerly typefaces, which are also available to download.
- Download the latest version of Adobe XD
- Download Amazon typefaces
- Download the Alexa Design System Library
- Open the Alexa-Design-System.xd file and save it as a cloud document.
- Create a new XD file and open the Assets panel on the left side.
- At the top of the Assets panel, click Link Assets (the “+” icon) and select the Alexa-Design-System.xd file from Cloud Documents. This will import all assets, including colors, character styles, and components from the Alexa Design System for you to use in your new XD file. You can follow this process to link Alexa Design System assets to any new XD file that you create.