June 2023 marks Apple's Keynote Opening WWDC Conference, an event that everyone perceives as the beginning of a new chapter in human-computer interactions.

While Apple wasn't the pioneer in the field of AR/VR, visionOS stands as an excellent example of how a spatial User Interface should function. So, what can we do to prepare for this new era? There's still time to learn.

Let's begin with the basics: the incredibly appealing material – spatial glass. Apple has already introduced the kit designed to assist in creating initial interfaces for visionOS. However, somehow the glass material doesn't look the same as during the WWDC Keynote.

In this tutorial, I will demonstrate how easily you can replicate these stunning effects with shadows and lighting in your designs, resulting in a much-improved appearance compared to the original visionOS kit. By the end of the article, you will also receive a free sample prepared for Figma.

Grab your the mug of your favorite coffee and let's dive into some pixel-pushing!

‍

‍

1. Start with Frame Setup

This is the most obvious point. Set the corner radius (in my example, it's 32pt) and corner smoothing. To replicate Apple's aesthetic, it's essential to set it to around 60%. Figma highlights it as the "iOS" value.

‍

‍

2. Fill the Frame & Add an Effect

To quickly simulate glass, fill the frame with white color, set the opacity to 20%, and apply a background blur. The blur effect's value should be significant enough to direct attention to the content displayed on the glass. In our example, it's around 120.

‍

‍

‍

3. Add Inner Shadow

This step helps create a subtle stroke effect. visionOS responds to the environment and lighting. During the presentation, I noticed that it includes a smooth stroke that slightly separates the layer from the background.

The inner shadow values should be as follows:

- X = 0

- Y = 0 Blur = 2

- Spread = 2

- Fill: White & Opacity: 10%

‍

‍

4. Add Stroke with Gradient

As I mentioned, visionOS adapts to the environment. To create that illusion, add a stroke and apply a gradient. The gradient angle needs to align with the direction of light – that's how spatial UI works.

See the example below:

‍

‍

‍

5. Add a Real Drop Shadow

Objects displayed in space cast shadows like elements in the real world. Ensure that your glass panel also casts a shadow onto the floor (or table) surface. This is the final touch that makes the interface feel more connected to the environment.

Simply add a blurred layer to the surface and adjust it for a realistic feel.

‍

‍

‍

Summing Up

As you can see, achieving an excellent spatial glass material effect is quite simple. However, we've only scratched the surface in terms of visionOS elements. Would you like to see more tutorials covering other elements? Let me know!

For now, feel free to grab the freebie – Figma example files. These include samples with spatial glass and other documents from previous Figma tutorials I've created.

‍

‍

By the Way

If you use Figma and want to master the latest features, like Variables, I have something for you.

A significant update is on the horizon for the Prime Design System Kit, incorporating all the pro techniques. It will be available for free to all current version owners and members of UX Misfit Tools Unlimited Access. Even today, you can learn how to set up variables for design systems with the recently introduced "Prime 5 Foundations."

Check it out here.

Thank you for reading!

‍