Dog daycare app - To improve my Figma skills

---

This project is under development.

Figma functions used

• I created and published a separate Design System, which I link to my product design file.
   
• The Design System includes text styles, color styles, properties, and components with variants.
   
• I built interactive components to use later in prototypes.
   
• I used local variables.
   
• I organized mode collections for text values, colors, and increments—ensuring that everything in my components is linked, so I only need to update one place for changes to apply everywhere.
   
• I learned prototyping with Smart Animate, using variables and conditionals to make my prototypes more interactive and intelligent. Now, I only need one screen to communicate a change, instead of three linked ones.

• Lately I've also used Figma grid and auto layout to easier move content and components.

My Process 

1. Branding

I started by defining the visual and emotional identity of the product. I chose a warm, friendly color palette, approachable typography, and a tone of voice that feels trustworthy, light-hearted, and personal—just like the bond between a dog and its owner. 

The brand's core is inspired by my own needs, my dog and with the purpose of beeing hund-ra % (hund = dog in swedish, hundra = 100%) thought through. 

2. Sketch on main flow. 

Before jumping into Figma, I prompted FigJam AI with the page names and functionality I wanted the app to have. FigJam AI helped me generate a standard user flow, which allowed me to visualize and organize the process more effectively. This combination of work helped me define a structure that felt intuitive and efficient.

3. Create and publish design system to reuse in product design file.

To ensure consistency and scalability, I created and published a dedicated design system. It includes reusable components, text styles, color variables, and interactive variants—all organized with local variables and mode collections. This allowed me to keep the design clean, update elements globally, and focus more on solving real user needs.

3. Prototype

Using Figma's prototyping features, I brought the experience to life. Smart Animate, variables, and conditionals allowed me to simulate real interactions and communicate functionality with just a single screen—rather than linking multiple static ones. This made it easier to test ideas and communicate the app’s logic clearly during reviews and user testing.