SF Symbols and Rendering Modes

SF Symbols 4

If you are unfamiliar with SF Symbols 4, it’s a library of 4,000 icons with weight variants and rendering modes that you can use on all Apple platforms, including macOS , iOS , iPadOS , watchOS and tvOS.

Why Use Symbols?

Symbols are a great way to represent an action or a concept , sometimes without the need of text. They are frequently used for the Tab Bar, Navigation Bar, and button. They are an essential part of interface design.

Rendering Modes

SF Symbols has four rendering modes:

• Automatic sets the recommended mode for each symbol.
• __Monochrome __applies one color to all layers and is the most neutral rendering mode giving a uniform and consistent look.
• Hierarchical applies one color with varying opacity for each layer.
• Palette applies up to three colors across the layers.
• Multicolor may have preset colors combined with one selected color. For example, the delete badge is always red.

Download SF Symbols 4 beta

You’re going to need the SF Symbols app from Apple for Sketch.

• Download the beta version.

Detail Button

To make it more obvious that the card is tappable, I’m adding a blue button at the bottom right.

• Create a Rectangle of 44 x 44, color #4AA6F4.
• Set the corner radius to 20 on the top left and bottom right.
• Copy the arrowshape.turn.up.right.fill symbol from the SF Symbol 4.
• Group the background and the symbol. Name the layer Detail Button.
• Go to horizontal card, duplicate the detail. Change the width size to 66 and place it on the bottom right corner.

Tab Bar

The Tab Bar is the easiest way to navigate an app’s sections from the bottom of the screen. Let’s take the first screen previously and create a Tab Bar.

• Create a Rectangle of 390 x 85, colour #4AA6F4, opacity to 30%, Blending Mode Overlay.
• Add 20 Background Blur and 30% Saturation.
• Edit the Rectangle to create a curve in the middle.

Home Indicator

Excluding symbols, It is missing something significant, a home indicator.

• Go to the plus button and search for home indicator. Select Light → iPhone.
• Place it at the bottom.

Symbols for the Tab Bar

With SF Symbols, I can find all the symbols that I need for the the tab bar.

• Copy Car, Calendar, Bell __and __Person symbols from the SF Symbols 4.
• Write a title for each symbol, Rent, Bookings, Notifications and __Account __using __Medium 10, __color black. Set auto width and align center.
• Group the Symbol and text. Name the layer.

Floating Button

Create a floating button that will serve as a map to make it easier to search and find stores near you.

• Create a Rectangle 60 x 60, colour #4AA6F4. Set 20 on the corner radius.
• Rotate 45 degrees. To set the degree to 0. We must flatten.
• After flattening, the size will change. Change the dimension to 60 x 60.
• You will see decimal on X and Y. Avoid decimal while designing and rounding the number.
• Take the map fill symbol from the SF Symbol 4.
• Group the symbol and the background. Name the layer Map button.
• Group everything: Map button, symbols, home indicator and background.

Circular Background

Combine three circles and adjust the opacity to create a beautiful circular background.

• Create an Artboard, choose iPhone 13 Pro and add a background color that is neutral and light #CCD9EF.
• Create three Circles of 500 x 500 , 400 x 400 and 300 x 300, color white.
• Decrease the opacity by 10% of the bigger circle.
• Set 30% to the second circle and 40% to the smaller circle.
• Put them on top of each other, starting from the smaller to the bigger.

Top Navigation and Title

We don’t have a Tab Bar on this screen, so create navigation that allows returning to the previous page. There is no more action for this screen except turning back or booking the car.

• Write the title Car Detail using Expanded bold 17, color black, uppercase.
• Choose auto width and align text left.
• Copy the arrow left symbol from the SF Symbol 4 and put it aside from the title.

Image and Circular Tool

Create a tool that allows you to rotate the car in a circular motion to see the whole vehicle.

• Add the car image from the asset file.
• Put the image in the middle of the circular background.
• Create an oval 250 x 113 below the car image. Fill with a linear gradient, top 0% ,bottom #4AA6F4.

Arrow Left and Right Button

By including an arrow left and right button. Your design is more precise and easier to understand.

• Take the arrow left arrow right symbol from the SF Symbol 4.
• Create a circle of 44 x 44.
• Group the symbol and the base.

Bottom Sheet

Create a bottom sheet that includes all the detail about the chosen car. Play with the width styles Condensed, Expensed and Regular.

• Write the category of the car Electric Innovation using the condensed medium 17, color black, opacity 60%. Set uppercase. Set auto width and align text left.
• Write the name of the car Tesla Model Y using Compressed Bold 34, color black.
• Add a description about the car using the Regular 15, color black, opacity to 60%. Set auto height and align the text left.

Book Now Button

Create a book now button that goes directly to the third screen to make the reservation.

• Create a rectangle of 175 x 60, color #4AA6F4. Set 30 only in the top left corner.
• Write Book Now using **the **Expanded Bold 17, color white. Set auto width and align text left.
• Group them. Name the layer by Book Now.
• Write the price %150/day using Expanded Bold 17, color black. Set auto width and align text left.

Rendering Mode Palette

The rendering mode works only in SwiftUI, but it doesn't mean we can’t include it in our design. I will show you how to do it manually.

• Go to SF Symbol 4 application and take bold car fill, person 2 fill and snowflake circle fill symbols.
• Select each symbol, right-click and click on Convert to outlines.
• Click on one of the paths and change the colour to #4AA6F4.
• Write a text below: Electric, 7 seater and Air con.