UI Component Inventory
Rack Room Shoes
First Phase (3 months):
Inspect Element tool
Setting up Figma pages
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.
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.
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.
Second Phase (6 months):
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.
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.
Third Phase (9 months):
Preparing for the