Shapes, Gradients and Strokes

Sponsored by Mobbin

This video is completely free, thanks to Mobbin for sponsorship. Mobbin is unique because it is continually updated and offers a huge collection of real designs from popular apps and websites. Unlike other sites that might show designs that are just ideas, Mobbin shows designs that people use and like. It's not just about browsing pretty interfaces but also about understanding the "why" and "how" behind each design decision.

You can easily search by platform such as iOS, Android, or Web. And also by category like Apps, Screens, UI Elements, and Flows. Screens are organized into user flows to see the user journey without downloading the app. For anyone looking to design or improve an app, these flows provide invaluable insights into the logic and structure of successful user journeys. That's why Mobbin is my go-to resource for design inspiration.

Starting With Inspiration

Before starting a new design project, I always need some inspiration. To save time on extensive UX research, I explore Mobbin, focusing on functional and user-friendly apps. I already had the idea to create a smart home app with a thermostat, but I needed some inspiration for my cards. We will explore the 'iOS' category and search' Card' by UI patterns. Here are the inspirations that inspired me to create my cards.

Apple's Guidelines

It's important to understand Apple's Human Interface Guidelines, the foundation of the iOS design system, before starting your design work. The HIG is a cornerstone for designing iOS apps, emphasizing consistency, clarity, depth, and dimension. Consistency ensures uniformity across your app's elements, while clarity makes UI elements easy to understand. Depth and dimension contribute to realism and interactivity in your app. Familiarizing yourself with these principles is crucial as they form the foundation of effective iOS app design.

Figma File and UI Kits

For this course, you'll need two resources: my Figma file and Apple Design Resources in Figma. These tools will help speed up your design process. The Figma file contains my original designs and UI elements that we'll use throughout the course. Meanwhile, Apple Design Resources provide a wide range of materials and tools, including UI elements, templates, and guidelines, to assist designers and developers in creating applications following Apple's design principles.

SF Pro Font

We're going to use SF Pro, Apple's official font for iOS, macOS, and tvOS. Designed for clarity and readability on all devices, it offers various weights and styles, such as Bold and Light, making it suitable for both text and user interface design. SF Pro supports multiple languages and is optimized for screen and print, available for designers to ensure a consistent look in apps and websites that aligns with Apple's style.

SF Symbols 5

We will use icons from SF Symbols 5, the system font for Apple platforms. With over 5,000 icons, we can find anything we want. Symbols come in nine weights and three scales and automatically align with text. They can be exported and edited using vector graphics editing tools to create custom symbols with shared design characteristics and accessibility features. SF Symbols 5 introduces a collection of expressive animations, over 700 new symbols, and enhanced tools for custom symbols.

Wireframe

The first step in the design process is to create wireframes with these ideas. These wireframes help us plan how the design will look and how to organize the content. A wireframe is a visual representation or basic sketch of a design concept for a website, application or other digital product. It's usually a simplified version focusing on structure, layout, and functionality rather than visual design details. We won't create a wireframe from scratch because I have already completed this step.

Open Figma File

Now open my Figma file, and you'll have access to my design and the elements I used during the course. The wireframe can be found on the Wireframe page. We will begin our design process using this existing wireframe. We'll start with the thermostat control frame, my favourite part.

Thermostat Controller

In this section, you'll learn to design a smart thermostat interface from scratch using Figma. We'll cover how to create complex shapes, use colors and gradients for visual impact, apply advanced stroke techniques for unique dash effects, and employ the Arc tool to design a progress ring.

Creating the Base Circle

The first step is to create the base for our temperature controller. The shape I want is a circle with a hole in the middle. We’ll use the Ellipse tool to draw a perfect circle, then subtract it.

• Press O on your keyboard to select the Ellipse tool.
• Hold Shift while dragging to draw a 230x230 pixel circle, centering it in your frame.

Subtract Selection

We'll use the Subtract Selection feature to create complex shapes that are impossible with basic shapes alone. By subtracting one shape from another, we make a new composite shape.

• Select the two circles and position the shape you wish to remove (the smaller circle) on top of the base shape (the larger circle).
• Find the boolean operation tools in the top toolbar and click on the "Subtract" option to cut the top shape out of the bottom shape.

Linear Gradient

A linear gradient smoothly transitions between two or more colors along a straight line, allowing designers to create depth and visual interest in digital designs by adjusting colors, direction, and spread.

• Select the new shape to fill. In the fill settings, choose 'Linear Gradient' as the type.
• Set the gradient color to white for both stops. Adjust the first stop's position to 0% (top) and the second stop's position to 100% (bottom).
• Position the first color stops to align with the edge of the subtracted area (the "hole") for a smooth transition.
• Change the opacity of the fill to 10% to create a subtle effect.

Adding Stroke

Stroke is a visual effect applied to the outline of shapes, text, and other objects, allowing you to adjust thickness, color, and style (such as solid, dashed, or dotted). Strokes can be used to highlight elements, create borders, or add decorative accents to designs.

• With the object still selected, add a stroke and select 'Linear Gradient' as the stroke type.
• Similarly, set the gradient's color to white for both stops. Position the first stop at 0% (top) and the second stop at 100% (bottom).
• Adjust the opacity of the stroke to 60% to ensure the outline is noticeable but not overpowering.
• Set the blend mode of the stroke to 'Overlay' to blend it smoothly with any underlying colors or gradients.

Background Blur

Background Blur applies a blur effect to the area behind a selected object, creating a soft, out-of-focus background that helps foreground elements stand out. This effect can be adjusted for intensity and is commonly used to reduce visual clutter or emphasize specific UI elements.

• Finally, apply a background blur effect to the object.
• Locate the blur settings and set the blur value to 10. This will create a soft blur effect on any content behind the object, enhancing the visual depth and focus on the object itself.

Create Another Circle

• Create a new circle with dimensions 282x282.
• Center this circle relative to the previously discussed element or canvas, ensuring it is perfectly aligned.

Radial Gradient

To add spotlight effects to a circle, you can use a Radial Gradient, which creates a smooth transition from one color to another in a circular or elliptical pattern. This gradient starts from a central point and radiates outward.

• Select the circle you've created. For the center color, choose a light blue (#2EA7FF) and adjust the opacity to 50%.
• For the outer color, select a dark purple (#1C1B33) and adjust the opacity to 20%.
• To achieve the spotlight effect, position the center color towards the top left. Place the outer color diagonally across from it to ensure the gradient radiates outward effectively.

Add and Adjust Stroke

• Add a stroke to the circle using a linear gradient. Set the first stop to light blue (#17B9FF) at the top, and a dark color at the bottom. Adjust the opacity to 10%.
• Add another color stop for the linear gradient: white at the top with 100% opacity, fading to 0% opacity at the bottom.

Add Icons

The small circle will act as the thermostat base, and the larger circle (created by subtracting shapes) will serve for navigation. We'll add icons from SF Symbols or other kits like DesignCode UI, including the snowflake, thermometer, and flame icons. Place the snowflake on the left, thermometer in the middle, and flame on the right within the larger circle. Finally, select all icons and change their color to white.

System Mode

We've added three symbols for air conditioning, automatic settings, and heating. Now, let's make an indicator for the chosen setting. This design isn't typical in most apps, but it's great for practice. We'll create a rectangle with a pointed end to show which setting is selected. We'll add a light color fade to the pointer and smooth the edges so it looks like it's part of the circle.

• Creating a Polygon: When you make a polygon, notice the padding around it within a frame. This padding gives space between the polygon and the frame's edges for a balanced layout.

Flatten a Shape

Flattening a shape or a group of shapes can indeed be used to reduce the bounding box to the actual size of the shape, thus removing any extra padding. If you want to set the real size of your shape to specific dimensions, such as 440px by 250px, here’s what you typically do:

• Select the polygon and any other elements you want to include.
• Use the flatten feature (the exact method may vary depending on the software you’re using, but it’s usually found in the right-click context menu or under object properties).
• Once flattened, the software will treat the entire selection as a single object.
• Now you can adjust the size of this new flattened object to your desired dimensions of 440px by 250px.

Masking the Polygon

Group the polygon with the subtracted shape. Next, make a copy of the subtracted shape. Place the duplicate under the original and use it as a mask. This ensures the polygon is hidden and doesn't extend beyond the desired shape.

Radial Gradient

A radial gradient is like creating a spotlight effect. You pick a central color and an outer color, and Figma smoothly blends them together in a circular or oval shape, starting from the center and spreading outwards. It's like shining a light from the middle of your object, and the color gradually fades as it moves away from the center. This helps add depth and dimension to your designs, making them more visually appealing.

• Fill the polygon with a radial gradient in white.
• Position the outer color stop opposite the point.
• Add 4 color stops and adjust the opacity as desired.
• Choose the overlay blend mode for an upward fading effect.

Dash Stroke

A dash stroke is like drawing a dotted or dashed line instead of a solid one. You can control the length of the dashes and the gaps between them to create different effects. The "Dash" setting determines how long each dash is, while the "Gap" setting determines the space between each dash. Adjusting these settings allows you to create different styles, from solid lines to dotted or dashed lines, adding variety and style to your designs.

• Create a circle of 280 by 280 and center it.
• Remove fill, and add stroke instead.
• Set the stroke color to white, the position to inside, and the width to 16.
• Set 'Dash' to 1, which determines the length of each dash. Then, set 'Gap' to 0, which is the length of the space between the dashes. This creates a continuous line with minimal space between dashes.

Adjusting Dash Stroke Gap

To replicate the effect with a variation, start by duplicating the circle you previously worked on. We're going to make a slight adjustment.

• Change the 'Gap' value to 30. This will increase the space between each dash in the stroke, creating a different visual pattern compared to the original dash.

Add Outline

• Create a new circle with dimensions of 230 by 230.
• Apply a stroke gradient with a diagonal orientation.
• Set the first stop of the gradient to color code #0097FF at 100% opacity.
• Set the second stop of the gradient to 0% opacity.
• Adjust the stroke width to 2 pixels.
• Position the stroke outside the shape.

Dash and Gap

• Duplicate the outline circle.
• Resize the duplicated circle to 220.
• Change the color of the duplicated circle to white.
• Apply an overlay blend mode to the duplicated circle.
• Set the dash to 30 and the gap to 8.

Rotated Dashed Outline

• Duplicate the dashed outline.
• Resize the duplicated outline to 210x210.
• Rotate the duplicated outline by 10 degrees.
• Change the color of the outline to white.
• Apply a horizontal linear gradient.
• Adjust the gradient to fade out in the middle.

ARC Tool

After showing a complex way to make the base with subtraction, I'll now use the ARC tool for a simpler way to make a progress bar. Create a circle with a diameter of 230. Hover over the circle, and you'll notice a dot. Click and drag this dot; it adjusts the sweep of the arc. The sweep setting controls the arc's length, letting you decide how much of a circle to draw — from a small segment to nearly a full circle. Essentially, the sweep is the arc's angle, measured in degrees.”

• Start: Adjust the Start setting to determine where the arc begins. Drag the handle around the circle to change the starting point. Set it to 90 degrees.
• Sweep: Control the length of the arc to decide how much of a circle to draw. Set the sweep value to 62%.
• Ratio: Utilize the Ratio handle at the circle's center to transform it into a ring. Drag the Ratio handle to select the segment to display and adjust the size of the ring. Set the ratio value to 88%.

Angular Gradient

An angular gradient creates a color transition around a central point, spreading out in a circular or angular pattern. Unlike linear or radial gradients, which transition colors along a line or from a center point outward, angular gradients rotate the color transition around a point, similar to the sweep of a radar or the face of a clock. This allows for unique effects where colors blend in a circular motion, making it possible to design vibrant, dynamic backgrounds or elements that need a more complex color transition. You can adjust the starting angle, the direction of the rotation (clockwise or counterclockwise), and the colors involved to achieve the desired effect.

• Position Color Stops: Place one color stop directly opposite the other, using a light blue color like #37F4FA.
• Adjust Opacity: Set a different shade of blue (#2B8FF3) to 0% opacity for seamless blending with the background.
• Add Midpoint Color Stop: Introduce another color stop in the middle of the progress bar with the same blue shade (#2B8FF3) and 0% opacity for a fading effect.
• Review and Adjust: Ensure the top color stop does not create a subtle fade at the end of the progress bar. Adjust its position or add another color stop with the same color (#37F4FA) if needed.
• Duplicate and Apply Blur: Copy the progress ring layer, apply a layer blur of 30, and adjust the sweep to 55% for a glow effect starting from the middle and extending leftward.

Glass Front

Creating a glass front for our thermostat adds a sleek and modern touch. Using a circular shape and carefully chosen colors, we achieve a polished and sophisticated appearance, enhancing both the aesthetic appeal and functionality of the design.

• Create Circle: Make a circle with a diameter of 160 and center it on your canvas.
• Apply Color Style: Utilize the 'Glass Front' Color Style, a linear gradient with two shades of blue, for the circle fill.
• Add Stroke: Apply a light blue (#17B9FF) stroke using a linear gradient, setting it horizontally.
• Adjust Stroke Gradient: Ensure the color fades towards the sides, maintaining the middle portion.

Dashed Outline

• Create an ellipse with a diameter of 190 and center it.
• Remove the fill and add a stroke.
• Set the stroke width to 10 and align it to the center.
• Choose a dashed style.
• Set the dash to 1 and the gap to 2.
• Fill the ellipse with an angular gradient in white.
• Place a color stop at the top of the circle.
• Add two more stops at the bottom with 0% opacity, aligning them with the polygon.
• This will create a fade effect at the polygon's edges, indicating the selected mode.
• Blend the stroke using an overlay.

Conclusion

You've now completed the first major step towards mastering UI design in Figma by creating a smart thermostat interface. This section covered essential design principles, including shape manipulation, gradient application, and interface interactivity.