# Designs
TIP
Check out Annie's design case study (opens new window) on Medium for more details on the process and decisions behind the designs.
# Navigating Figma
The final designs for both the customer and clerk app can be found here (opens new window). For a quick how-to on navigating Figma, here is an introductory guide (opens new window) to using Figma for development! The bulk of information regarding use will be there.
# Page Overview
The file is split into the following four pages, embedded below.
# Customer App
All screens in the customer app are displayed here. The screens are all organized in the left Layers panel. This page is prototyped (with some limited functionality due to Figma's constraints) — to view, click the ▶ Play button in the top right corner.
# Clerk App
All screens in the clerk app are displayed here. The screens are all organized in the left Layers panel. This page is also prototyped for a specific transaction (again, with some limited functionality) — to view, click the ▶ Play button in the top right corner.
# Illustrations
All illustrations used in the app and on the app store are displayed here. They are organized in the left Layers panel. This page is not prototyped.
# Component Library
All components used in both apps exist here. All customer-related components are on the left, and all clerk-related components are on the right. More information on components is in the guide linked at the top!
# Updating app screenshots
The graphics used on both the App and Play stores are in the Illustrations page. They currently contain screenshots from the app as of May 2020. If/when these need to be updated, here is a step-by-step guide on how to replace the images.
- Download the screenshots you intend to use onto the computer you are editing Figma from.
- Navigate to the Illustrations page in Figma. Do NOT delete the image you want to replace.
- In the top left corner, click the three-bar menu, go to file, then click Place Image. You can also use
ctrl/cmd + shift + k. - Select the new screenshot you are replacing the existing screenshot with.
- A crosshairs with a preview of your image will appear. Click the image you want to replace.
- You're done! Figma will automatically crop/fit the image you just uploaded to match the original image. Since these are all same-size screenshots, there should be no need to re-crop/resize at all.
Please note that the App Store requires both the 6.5 inch and 5.5 inch versions, and you will need to take screenshots on phones/simulators of both sizes and replace all 8 images.
# Additional Assets
Additional assets can be found in this Dropbox (opens new window), which includes:
- App download QR codes
- Customer and Clerk app icons for the app stores
- Designed app screenshots from v1.3.0