The Design Engineer
Laboratory.

I decided to use this experience as an opportunity to enhance my UI skills and to delve deeper into Design Systems. I paused production, discarded the initial file, and revisited the fundamentals of system design before rebuilding from scratch. This reset was crucial to avoid patching a potentially flawed foundation.

To find UI inspirations, I used the AI tool Google Stitch and Mobbin.

I dove into the "Introduction to Design Systems" Figma course to bridge my knowledge gap. The pivotal moment was grasping the concept of Semantic Tokens and how to use them efficiently.

I explored Figma Variables to build a primitive collection, learning to distinguish between global values and their semantic application. I utilized resources like built-in check to establish a contrast-safe palette from the start. I chose a limited color palette with neutral tones and a golden accent for a more "high-end" feel.

Adopting an Atomic approach, I started building a "Micro-DS" with a "Core UI" page for reusable components, and a "Features" page for specific components. I used an 8-point grid (multiples of 4) to eliminate spacing guesswork and focused on reusable atoms using icons from MUI.

The main challenge was determining the right level of granularity for a solo project without over-engineering components I wouldn't need immediately. I balanced the needs of a micro DS for a personal project with the scalability principles of a full DS, ensuring I could iterate without getting bogged down by unnecessary complexity.

With the atoms ready, I tackled the Modal. I used advancedAuto-layout to create template components with replaceable bodies, effectively creating "Slots" in Figma to mimic React's children prop behavior.

This ensures the container logic remains intact regardless of the content injected into the modal. I continued building the modal-specific components, starting with atoms and moving up until I completed the first template.

A system is only as good as its documentation. Lacking native Dev Mode annotations, I integrated specific plugins to bridge the gap between design intent and implementation specs.

I am currently focusing on standardizing layer naming and making interactions explicit. I'm also working on the modal's second state: comparing the main product with the AI-generated image.