DESIGN SYSTEMS

 I created a prototype for the airline app using Figma variables, conditionals, and a comprehensive design system to enhance flexibility and adaptability. By incorporating variables, I was able to manage and update core design elements like colors, typography, and spacing with ease. The use of conditionals allowed me to define specific behaviors for different scenarios, ensuring the app responded dynamically to user interactions. Integrating a design system further ensured consistency across the app, making it easier to maintain reusable components and implement changes efficiently as the project evolved.

SOLO PROJECT

MY ROLE

UI/UX Designer

Design System

TOOLS

Figma

Fully Functioning Prototype

Using variables and advanced prototyping in Figma, this airline app functions as a fully interactive prototype. Users can select different combinations of destinations, passengers, dates, and flights to generate unique results. This approach is particularly valuable for user testing, as it allows participants to engage with the app in a more realistic, hands-on way, rather than just following predefined prompts.

Goodbye Prototype Noodles!

Conditionals and variables mark the dawn of a new era in prototyping, offering a level of simplicity that was previously unimaginable. Just a few years ago, creating a fully functional prototype like this would have meant building hundreds of screens and managing thousands of prototyping connections and interactions. Today, with the power of variables and conditionals, we can achieve the same level of complexity and interactivity with far fewer screens and a more streamlined process. This shift not only saves time but also makes the prototyping process more intuitive and efficient.

Prototyping Variables

By leveraging conditionals and variables, any combination of destination, dates, number of passengers, and flight number becomes possible. Every prototype should take advantage of this dynamic functionality to create fully interactive, realistic prototypes. It saves time and results in more effective, high-quality prototypes.

Building a Design System

Learning how to create a design system has been an incredibly exciting journey for me, and it’s opened my eyes to just how intricate and multifaceted design can be. As I’ve worked through the nuances of building a cohesive system, I’ve gained a deeper appreciation for the level of thought and structure that goes into crafting a design that not only looks good but also functions seamlessly across different platforms.

Learning Tokenization

I took time to understand how the primitive tokens I created for my design system are mapped to semantic tokens and then to component-specific tokens, ultimately combining to form the components themselves. Gaining this knowledge proved valuable in visualizing how changes at any level—whether to a primitive or semantic token—cascade through the system, affecting the final component and ensuring cohesive updates.

Tokens into Variables

Defining Figma variables for semantic tokens simplifies the process of applying them to components during their creation.

Testing Contrast Accessibility

When creating my semantic tokens for colors, I prioritized accessibility from the start. All text and key visuals are tested against the Web Content Accessibility Guidelines (WCAG) using the "Contrast" plugin by WillowTree in Figma.

My Takeaways

 Designing with variables and design systems has shown me how effortless it can be to make changes later in the process and how seamless it is to communicate design choices with a team using a well-structured system. This project has made me feel like a Figma pro, and I’m confident in my ability to apply these skills to any future project.