Test
Starter templates often focus on simplicity at the expense of style, and sometimes neglecting designers' involvement.
With the new DTC Medusa starter — an open-source commerce platform — we aimed to create a template that balances expressiveness with customizability, moving beyond the minimalist norm.
Alongside the GitHub repo, we’ve launched our first Figma Community file to showcase our handover process and demonstrate how Figma’s variables can seamlessly switch between brands.
Balancing simplicity with expression
To ensure the starter wasn't overly minimalistic yet still retained design flexibility, we created Munchies, a fictional brand with a focus on identity rather than UI complexity to make a difference in the amount of templates you can find.
The color palette was limited to Accent, Background, and Secondary tones to maintain an adaptable design. The layout choices adhered to standard e-commerce practices, ensuring ease of use without sacrificing creativity.
While creating this unique theme, every design decision was filtered through the question, “Can this easily adapt to another brand?”
Assets creation and copyright
Instead of custom illustrations and complex motion, we chose a more scalable approach, generating cookie images through Midjourney.
Using /describe on an existing image that fitted the vision we had for Munchies, we used these proposed prompts to then /create the appropriate visual. After several iterations, we managed to produce very realistic high-quality imagery with prompts like:
"A close-up shot of four cookies, each with different ingredients and textures, arranged on an off-white background. The chocolate chip cookie is the focus in the foreground, showcasing its soft texture against the smooth surface. Sunlight filters through from above, casting gentle shadows that accentuate details like crinkles or drizzle. This composition emphasizes the color contrast between the warm brown edges and the cool white center, adding depth to the visual experience."
To finalize, we edited the background color and position of all product shots to be cohesive, making a uniform PLP to look at.
Seamless handover: our approach
We continuously improve our design handover process for several key reasons:
- Developers can work efficiently without unnecessary roadblocks.
- Designers can focus on new projects without being held back by constant reviews.
- The product or store can easily scale in the future with a strong foundation.
- Users enjoy a smooth and seamless experience.
- The files are easily adaptable for marketing or as a starting point for future projects.
Closing the gap between designers and developers
Crafting the perfect handover is not only a matter of cleaning and documenting everything in great detail after the design is approved and consolidated. If that was the case, handover would just be an afterthought. Instead, we establish strong conventions that both designers and developers agree on before a project is even started. These shared standards cover everything from naming Figma variables and color tokens to defining typography and component variants.
Example 1: Figma variables match 1:1 the TailwindCSS utility classes that our developers use during implementation. So if a component in Figma has the "rounded-md" variable applied to the border radius (using scoped variables), the developer knows the rounded-md Tailwind utility class needs to be applied.
1type Test = {2 test: string3}