Components & Shared Styles#

Note. LinkedIn Learning resources are in the process of being replaced.

In this lesson we go through how to create a design system in Adobe XD using components and shared styles to help us maintain consistency and save time with recreating design elements. You’ll learn how to set up and manage components, creating and updating layer and text styles, and import third-party libraries such as official iOS and Android UI Kits. Links to current UI kits have been provided in Moodle.

• Adobe XD
  • Follow the videos in chapter 9 (Components) from Adobe XD LinkedIn Learning course: https://www.linkedin.com/learning/adobe-xd-essential-training-design-14363201/
  • Adobe XD Get Started: Components and libraries: https://www.adobe.com/au/products/xd/learn/get-started-xd-components-libraries.html
  • How to use components in Adobe XD: https://www.youtube.com/watch?v=hR4GWqO4WFg
  • How to add a UI Kit to Adobe XD: https://helpx.adobe.com/au/xd/help/access-ui-kits.html
• Figma
  • Follow the videos in chapters 3 and 4 from the Figma LinkedIn Learning course: https://www.linkedin.com/learning/figma-essential-training-the-basics/the-basics-of-figma
  • Components in Figma: https://help.figma.com/hc/en-us/sections/4403935997847-Components
  • Libraries in Figma: https://help.figma.com/hc/en-us/sections/4403936000407-Libraries-

Task#

Follow the videos above on how to make and use components. Select one of the following apps:

• Coles/Woolworths
• Ikea
• Ebay/Temu/Wish/Ali Express
• JB Hifi

For this task you will be designing a two-screen interface showing a list of items made through components. You will be using your selected app from the list as reference. To start with select 1 screen from the app to use as your design reference, such as the product screen or checkout.

Recreate the interface from scratch but using ONLY Apple or Android’s UI Kit components. You are not redesigning the app you are recreating it using the basic layout components provided by iOS/Android. Try your best to recreate the layout using/reusing components where possible. All the information from the interface such as product name, image, pricing, etc. should be retained in your interface (you can replace images if you would like). The result will be a UI that looks like your reference but is missing all design elements such as colour, typography, theme, etc. Now, select a second screen that your users can reach from the one you just made. For instance, if you started with the product gallery, then users can move to a product’s information screen. Again, use only UI Kit components to complete this second screen. 

Submission: Take a a screenshot of your two screens showing the layers panel in Adobe XD or Figma. Upload a separate image showing which components you used from the UI kit. Upload to forums if required.

Tip. This is a good opportunity to read through the guidelines for either iOS or Android. These resources will be useful, and we will be returning to them in future classes.