Cirrius Weather App

Variables

To build a sleek, modern design system with differing modes, I used variables. First, I constructed a collection of primitives. These raw values consisted of neutral colors, brand colors, spacing measurements, and corner radii.

I used Color Hunt to find inspiration for my color scheme. After I decided on these, I utilized the Figma plugin HueHue to generate nine color values for each category (i.e. 100-900 for brand, 100-900 for neutrals). I adjusted the hue, saturation, and brightness of the resulting colors as needed. I also employed the Contrast plugin to double check the accessibility of my color combinations. This way each screen was at least AA compliant.

For the spacing and corner radii, I calculated multiples of eight. Each value was associated with an increasing numeric value (i.e. 1 - 8, 2 - 16, and so on). This allowed me to keep track of the values as they grew larger.

Once my Primitives collection was complete, I created collections for Color, Spacing, and Corner Radius Tokens.

I divided the Colors Collection into the following categories:

• Surfaces: Applied to backgrounds
• Borders: Applied to any element with a stroke
• Text: Applied to any font elements

The creation of these collections allowed for finer control of these associated values, as well as further cohesion across the design. Ensuring consistency is one of the most important aspects of designing. Variables help make this possible.

I also created a Typography collection. This held the font families for any text I planned to use. Additionally, it included font weight, font size, and line height. I determined the proper sizing through research regarding guidelines on the scale of mobile typography. Once I decided on these, I calculated a line height for each. I used the multiplier 1.5 divided by 8 to gain the proper line height for each font size.

Because Figma currently lacks the ability to create typography tokens, I assigned my typography variables to Styles. I created H1-H3 headers, body/paragraph text, and special text for the current weather. Each of these was assignd the appropriate variable value for font family, size, line height, and weight. I utilized these throughout my design to maintain continuous consistency.

Components & Component Properties

Another tool I used to maintain consistency across the design was components. Components allow designers to create a parent copy of an element which can be reused throughout the design. Any changes necessary can be made to this parent element and will be enacted across every instance of it. This gives greater control over elements, reduced work load, and a smaller margin of error when working aross multiple screens.

With this in mind, I assessed which elements I would need to reuse. I stored these elements as components. Some, such as the tab bar, required simple interactions between variations — or variants — of themselves. Others were part of a more complex string of interactions controlled by variables. I utilized component properties to bring these interactions to life. To achive this I used text, variant, and boolean properties.

Advanced Prototyping

One of my main goals in designing Cirrius was to enhance my ability to work with interactive variables. These variables possess a power beyond mere hover or click interactions. They allow algebraic input for conversions and math problems, as well as control over specific color and element transformations within specific frames.

For Cirrius I used them to do two things:

1. Build a switch that controls variable modes. This allowed users to view the app in either light or dark mode.
2. Build a switch that controls whether the current temperature is in Fahrenheit or Celsius. This allowed users to see the temperature in their preferred metric.

Harnessing the capabilities of number and boolean variables, I brought these controls to life.