UI Component Inventory
Rack Room Shoes

MacBook Pro 14_ - 3.png

Project Overview

First Phase (3 months):

Inspect Element tool

Setting up Figma pages

Component Specs

Inspect Element

HTML & CSS were analyzed using the Inspect Element tool to ensure proper padding, margins, line height, borders, hex colors, and fonts were designed and entered into Figma accurately. 

Frame 1633.png
Screen Shot 2022-04-24 at 10.52.44 PM.png

Figma Pages

Titles for pages were given in order to mimic the future design system (e.g. Buttons, Icons, Modals, etc.). Each page included frames for desktop, tablet, and mobile, which displayed components side-by-side for easy comparison. 

Component Specs

Each component's specs were noted appropriate to its type. Buttons with text would have font, size, hex color code, line height, padding margin, border, and background color, while images would simply have dimensions, padding, and margin.  

Frame 314.png

Second Phase (6 months):

Mobile App &

Email Components

Frame 299-4.png

Mobile App

Unlike the desktop, tablet, and mobile viewports on a browser, the mobile app components were created from screenshots, without the Inspect Element tool. All specs for padding, margin, font, etc. were given for each component.

NOTE: The orange is deliberately "different" as the branding colors are changing. 

Email Components

Similar to the mobile app, many Figma components for email were created from screenshots based on SalesForce images, along with some emails sent and inspected on the browser. 

Email components were created using the Litmus email marketing platform for Gmail in Chrome, Apple Mail (iOS 14.2), and Gmail App (Android 10.0) - light and dark modes.

Frame 312-2.png

Third Phase (9 months):

Preparing for the

Design System