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.
Note: Always save your layouts as a template, not as a new library, to avoid conflicts between file types.
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!