MVP: UI Kit
Developers: "We have a hard time figuring out each component's behavior"
Designers: "It's difficult to coexist with Figma and Sketch at the same time"
The answer was clear: we needed to choose a single software to establish one source of truth for both designers and developers.
After careful consideration, the design team agreed to choose Figma over Sketch. I then gathered all recently delivered prototypes, analyzed their styles and components, and created a UI Kit in Figma that looked like this:
Designers simply needed to click on the style to automatically apply the library’s color, text, shadow, or grid to the element:
Similarly, for components like buttons, designers only needed to go to Assets, type 'button,' and click and drag the element. They could then choose from properties such as:
Device: Mobile, Desktop.
Hierarchy: Primary, Secondary, Tertiary.
Size: L56, L52, M48, S40, S32.
State: Active, Hover, Loading, Disabled.
Icon?: Yes, no.
Text: Change the text.
The end result after making all possible variables for each component looked like this:
I did the same process with inputs, dropdowns, search bars, notifications, tool tips, badge, loaders, radio buttons, checkbox, modals, tables, cards, and navbars.
For the icons, we created our own set, organized by size. Any time we needed to create a new icon, we followed a system to maintain consistency: 32 x 32 box, 2 pixels of thickness.
Illustrations were also organized by size:
After organizing and labeling all styles and components, I gathered the team to explain how to use the new UI Kit. Whenever we decided to upload a component, I was responsible for updating the kit, which would automatically reflect changes across all our Figma files. The final step was to create a Design System and start documenting the behavior of all elements.
As a team, we followed the same process to document colors, fonts, spacing, grids, badges, buttons, breadcrumbs, and cards. The first version of La Playa now includes over 600 components, 100 styles, 100 icons, 20 3D illustrations, and 30 templates. All of these elements utilize variables and are built using Figma best practices, such as Autolayout and Master components.
Looking to the future, it’s important to note that the system is constantly evolving and will continue to do so as long as the product and software are updated.
This process sparked numerous discussions within the team about enhancing involvement in the post-handoff process for the front-end team. It was a significant project, and the entire team was eager to see it come to fruition. This is certainly my proudest project so far, as I led its creation while still an intern at Shopstar, learning many things independently along the way.