Design Engaging Multimodal Experiences with Our New Alexa Design System Toolkits for APL
Anna Van Brookhoven Feb 21, 2020
Share:
Design Build Tips & Tools Multimodal
Blog_Header_Post_Img

We’re excited to announce two new Alexa Design System toolkits available in the Alexa Design Guide to help you quickly and consistently design multimodal experiences for your Alexa skills with Alexa Presentation Language (APL). These toolkits are designed for infinity design canvas programs such as Adobe XD and Sketch. The toolkits contain libraries that represent code-backed Alexa styles and layout packages. These design elements, tools, and typography adapt across different viewport profiles so you get a real sense of what your final product will look like. These toolkits can assist with designing consistent and high-quality visual assets that you can implement in your skill using the APL editor.

While Alexa is a voice-centric technology, adding visual aids to your skill can enrich the experience for your customers. Create complementary visuals that can add your own branding, colors, styling, and so much more with APL. If you’re unfamiliar with adding visual experiences to a skill using APL, check out our training course, How to Build a Multimodal Alexa Skill.

 

What's Included in the Toolkits

The new toolkits are for Sketch and Adobe XD, and include the following:

Alexa Design System Library Plugin (Sketch)

Contains styles and components such as list items, icons, and colors. This plugin includes Alexa responsive layouts that support multiple viewports built with components and styles from the library.

Note: The Sketch library is automatically updated, so you’ll always have the most recent version from Amazon.

Alexa Design System (Adobe XD)

Contains assets including colors, character styles, and components from one source file to build your design quickly and consistently across your layouts. The symbols and styles are all code-backed Alexa Responsive Layouts.

Alexa Design System Templates

Contains full screen Alexa Responsive Layouts built with library components and styles

 

Amazon Typefaces

The toolkits also include the Amazon typefaces Amazon Ember Display and Bookerly. Download these fonts to use in your designs so that your user experience is consistent across the device with other Alexa skills and services. These typefaces can be used in both Sketch and Adobe XD.

 

How to Get Started with the New APL Toolkits

 

If you’ve never designed or built a skill using APL, check out our training course, How to Build a Multimodal Alexa Skill. When you’re ready to start designing your skill, you’ll need to download the latest version of Adobe XD or Sketch. Then, follow the directions below for the relevant toolkit.

 

 

An example of how to insert Alexa Design System Library components in a Sketch canvas. On the top left menu, click Insert. in the Symbols category, select Alexa Design System Library to get a list of all available library assets.
An example of how to add Alexa Design System Library components to a Sketch canvas
How to Get Started with the APL Toolkit for Sketch

  1. Download the latest version of Sketch, version 58 or higher.
  2. Install the Alexa Design System Sketch plugin. This library will update automatically for you so you’ll always have the latest APL visual assets.
  3. Download the Alexa Design System Sketch templates and the Amazon typefaces file.
  4. Either copy and paste art boards from the layouts file or save it as your own custom template.

Note: Always save your layouts as a template, not as a new library, to avoid conflicts between file types.

An example of the available templates in Adobe XD using the Alexa Design System Library. The images are renderings of device sizes from biggest to smallest.
An example of the available templates in Adobe XD using the Alexa Design System library
How to Get Started with the APL Toolkit for Adobe XD

  1. Download the latest version of Adobe XD.
  2. Download the Alexa Design System Adobe XD templates and the Amazon typefaces file.
  3. Open the .xd library file and save it as a cloud document.
  4. Create a new XD file and open the Assets panel on the left side, then select Link Assets (the + icon) and select the Alexa-Design-System.xd file.

Note: Follow this process to use the library assets for any new Adobe XD file you create.

 

Ready to start designing engaging multimodal experiences for your customers? Read more about designing screens with APL. We can’t wait to see what you’ll build!

 

Learn More About Designing Multimodal Alexa Skills

Subscribe