A design system for the serene and sun-drenched Philippines.
airKuya is a fictional airline that serves four major metropolitan areas of the Philippine islands.
DESIGN OPPORTUNITY
Develop a design system and corresponding brand and prototype for a fictional airline.
DURATION
15 Weeks
TYPE
Personal/School Project
SOLUTION
Air Ate is the design system that supports airKuya. Design tokens are built in 3 tiers that follow the atomic models of UI elements. Air Ate has 4 types of design tokens: color, scale, interface, and spring.
Meet airKuya
airKuya is a fictional airline that serves four major metropolitan areas of the Philippines. Our brand serves to represent the values of community, hospitality and family that the Philippines is known for, inviting travelers to the serene and sun-drenched shores of our islands.
Kuya, in Tagalog (the primary dialect of the Philippines, pronounced koo-ya) translates to big/older brother. In our brand, Kuya represents the value of trust, credibility, and the commitment to a safe and comfortable traveling experience.
Meet Ate Air
airKuya’s digital interfaces are driven by Ate Air, airKuya’s design system. Ate (pronounced ah-tay, translating to big/older sister) represents the partnership our design system serves to our overall brand. Ate Air drives the development of engaging interfaces that creates user delight with purpose. The design system is a tool to shape how our digital interfaces represent the overarching brand values of airKuya.
Atomic design and design tokens are two ways that the Air Ate Design System is structured. The design tokens are influenced by UI elements and their atomic hierarchy.
This system is heavily influenced by Google Material and Adobe's Design System. Design elements are considered in a modular way, considering their context and overall use within an experience.
The 4 categories of tokens within Air Ate are wholly developed into the atomic system of the design.
Color, Type & Interface Tokens
This design system is set up through Figma's variables, and is organized in a way to support the effective development of digital interfaces.
Global and semantic tokens exist in variables (depending on the level or hierarchy of the category of token) while semantic and component tokens exist in the styles, built off of the variables.
All of the variables are scoped to ensure proper use with a design.
Spring Tokens
In Air Ate, there is a particular emphasis on motion within the interface. but it is important that the motion is considered in the context of all other design elements.
Globally, all animations have a bezier curve and duration. Semantically, motion is organized on where it is a result of active or passive motion by the user. This system was created so that all component tokens are able to include a motion element from the semantic tokens, creating consistency but also customizability in the motion standards of the experience.
Vibe Coding
To build the prototype, I experimented with different types of AI. I switched between Claude and Figma Make throughout my design process, and found that as I built my design, Figma was able to get more context (components, states, variables), so the generated designs eventually became closer to my designed screens.
It was important to build out the auto-layout of each screen, and think about the grids and modular ways each screen was composed.
A pleasant surprise was that Figma Make was able to iterate on my motion design system, and when I prompted various animations I wanted in the interface, it would automatically use my set spring tokens.
Process Work
Takeaways
This project was meant to explore how design systems in digital product design are used as an extension of branding guidelines to guide the development of user interfaces (UI). I think through all the research on design systems that exist out there, I believe there is no one-size fits all for a system.
In iterating on my design, I kept thinking about the best system that would fit the screens I was making, and found myself constantly shifting the hierarchy of certain elements, re-organizing how tokens were classified, and moving things around semantically. This type of design work doesn't necessarily show in iterated visuals, yet I felt like this part of the process was the most transformative of the design process.
As we move into more AI-driven experiences and agentic design, I felt as though I saw first-hand how important design systems are when using AI. At the beginning stages of the process, my prototypes felt incredibly far-fetched compared to my designs, but as I built the design system and language out more, Figma Make had more pieces of context to confidently string my design together, which was extremely evident as I tried AI out in very different stages of my process.
