In my latest dashboard on Tableau Public - https://public.tableau.com/shared/3PWPMG3RR?:display_count=n&:origin=viz_share_link - I used Figma to create a liquid glass background. Figma is a great way to enhance your dashboards from good to incredible, and this liquid glass effect is just too cool not to share.
First thing is to open Figma – you can create a free account if you haven’t already got one.
The two things we need to create liquid glass in Figma is the outline of your shape and the actual glass effect. First, let’s create the outline, to do this we need to create a frame. Because this is going to be the shape you can see, that has a defined edge, you should edit the frame to look how you want – in this example I will create a glass button so I will add some curves to the corners. The frame also has to be see-through to be able to see the glass effect we will create later:
Next we need to create a rectangle that will become our ‘glass’. Make sure that the rectangle is larger than your frame outline. Ensure that the opacity to your rectangle is 1, and apply a background blur effect:
First we apply blur – changing the setting to 6, then we apply the texture effect, changing the size setting to 90 and the radius setting 40.
This should give you a rectangular glass effect:
Move the glass rectangle over the frame, and in the layers pane on the left ensure the glass rectangle is included under your frame:
This ensures that when you move your frame the glass follows and isn’t left behind.
Now we want to edit the edge of the frame to add a ‘sheen’ for the glass effect. Make sure the frame is selected and add inner shadow, changing the colour to white and editing the numbers to create the effect you want. X and Y controls how large the shadow is from the edge, the blur controls how sharp the 'sheen' looks and the % controls the opacity:
Now you have made the liquid glass effect in Figma!
