Easily jumpstart your designs with UI kit content such as buttons, form elements, headers, icons, and much more.

What you'll need

This sample file is an Adobe Stock asset you can use to practice what you learn in this tutorial. If you want to use the sample file beyond this tutorial, you can purchase a license on Adobe Stock. Check out the ReadMe file in the folder for the terms that apply to your use of this sample file.

What you learned: How to access UI kits and utilize the content in your own designs

As you design in Adobe XD CC, you can access UI Kits and other resources within XD that make this process easier.  A UI Kit is a set of design elements, including buttons, form components, status bars, and more, that you can copy and paste into your own projects to jump-start your design process.

Getting UI kits

  • To access UI Kits from within Adobe XD, choose File > Get UI Kits (Mac OS) or click the Hamburger menu in the upper-left corner of the app and choose Get UI Kits (Windows). There are a number of UI Kits in the menu that appear, each with different content.
  • Choosing an option such as Wireframes will open a web page in your default browser where you can download the kit.

Using the UI Kit content

  • With the UI Kit downloaded, open the XD file for the UI kit. The Wireframes UI kit contains two XD files, one for web design and one for app design. You can copy and paste content from the UI kit into your document.

The content found in a UI kit is most often completely editable. You can add it to your design and change the appearance and content to match your design.

 

Back to: Align content | Up next: Create scrollable artboards

 

Was this page helpful?