Design Engaging Multimodal Experiences with Our New Alexa Design System Toolkits for APL
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.
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.
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.
Contains full screen Alexa Responsive Layouts built with library components and styles
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.
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 add Alexa Design System Library components to a Sketch canvas
- Download the latest version of Sketch, version 58 or higher.
- Install the Alexa Design System Sketch plugin. This library will update automatically for you so you’ll always have the latest APL visual assets.
- Download the Alexa Design System Sketch templates and the Amazon typefaces file.
- 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
- Download the latest version of Adobe XD.
- Download the Alexa Design System Adobe XD templates and the Amazon typefaces file.
- Open the .xd library file and save it as a cloud document.
- 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!