Glass effect on Figure: create depth and realism in your interfaces

Today I have entered Figure And I've come across the notification that you've recently released a new functionality called Glass, which allows us to apply visual effects inspired by the embellished glass, directly from the Effects. It is a tool that opens many visual possibilities to work with overlapping layers, playing with light, refraction and disfocus, in a much more sophisticated and natural way.

This type of effect is ideal for improving the visual hierarchy on interfaces with complex or much content, without compromising legibility and clarity. The idea is that you can generate a feeling of depth and visual context feel integrated and consistent with the rest of the design.

And since I couldn't stand it, I've already run to open some of my designs to test it. I tell you how!

Practical application Glass effect

I've been exploring this functionality in one of my own projects, Insect Scan. To get you a little more in context, Insect Scan is an app designed to identify insects from images taken by the user.

One of the keys to the design was to show clearly the name of each species detected, directly above the insect in question, something especially useful when there is more than one specimen in the same image. To solve this, I applied the Glass effect on the labels containing the name of each identified insect.

Here is an example of a screen on which I applied it:

This allowed me integrate information into the image in a clean and visual waywithout interfering with the photographic content. I played with different levels of refraction, depth and dispersion, adjusting the values according to the type of background or contrast of each scene. The result was a visually rich, clear and much more realistic interface.

I was particularly interested that the design not only looked good, but also helped to guide the user intuitively. Glass has allowed me to achieve just that balance.

What options does the Glass effect offer?

The Glass effect appears as a new input into the effects panel, and allows us to adjust several parameters with which to customize the visual appearance:

• Refraction: controls the distortion of the background.
• Depth: adds a level of relief or volume.
• Dispersion: creates a subtle separation of colors, as if light were divided into a prism.
• Frost: provides a diffused finish, useful to highlight content without losing bottom.
• Light: adjusts direction and intensity of the lighting.

All of this can be combined with each other, and the best thing is that it is applied in a non-destructive way, which facilitates iteration and fine adjustment at any stage of the design.

You can see below in a practical way how you can adjust all the different options of the Glass effect:

A tool to experience: the official playground of Figure

For those who want to thoroughly test this new functionality, Figure has published an interactive file with different examples already configured. East official playground allows to see how the effect behaves in different contexts: scroll components, background video animations, state changes, among others.

Personally, I always recommend reviewing this type of resources. They allow you to understand how far a tool can go before integrating it into your own designs. You can access the file from here: Glass playground in Figure

What to consider before applying Glass

In the official documentation of Figure some are also detailed important technical considerations before using this effect in professional projects. Here are some of the most relevant:

• It can only be applied to framesnot to individual forms or groups.
• All corners must have the same radio to work properly.
• Not compatible with SVG exportYou can only copy it as PNG.
• Do not give up on Figure Sites, even if it's in the editor.
• It does not generate environmental reflexes as does, for example, the Apple system.
• You can slow down complex files or older devices.

These details are set out in the official aid article of Figure on how to apply effects to layers. If you are going to integrate Glass into a professional project, I recommend you review this guide directly: Apply effects to layers - Figure Help Center

A functionality that increases the design

Glass is one of those tools that look small at first, but make a real difference when you apply them well. It provides depth, elegance and context without complicating the design structure. In my case, I have been able to integrate this functionality into an artificial vision app like Insect Scanstrengthening both the user experience and the visual quality of the interface.

I particularly like that this is a native solution of Figurewithout the need for plugins or external resources. This facilitates workflow and keeps all the design centralized in one tool.