Reference›Figma
Figma
Design with the Glass effect built into Figma, then ship with this package. Most settings share a name, so the handoff is a short list of values.
How to use it
Select a layer, add the Glass effect in the Effects panel and lower the fill opacity. Every layer keeps its own values.
Settings
These are starting values. The two renderers differ, so check the result on the real backdrop and adjust by eye.
| Figma | Package | How to convert |
|---|---|---|
Light | light | Same value, as a fraction. 30% is 0.3. |
Light angle | light-angle | Same degrees. Check the direction on the first element. |
Refraction | refraction | Same value, as a fraction. |
Depth | depth | Same pixels, up to 96. |
Dispersion | dispersion | Same value, as a fraction. |
Frost | frost | Figma counts pixels, the package 0 to 1. Start with pixels divided by 16. |
Splay | splay | Scale it to 0 to 1 and tune by eye. |
Fill | tint | The fill colour. |
Fill opacity | transparency | One minus the opacity. 15% is 0.85. |
Corner radius | --glass-radius | Same pixels. |
Only in the package
Figma has no match for bloom, rim, glint, lift or any motion setting. Leave the defaults and tune them in the playground.
With Claude
The Figma repository has a Claude skill with this table. Connect the Figma MCP server, copy the skill to your skills folder and ask Claude to turn a frame into code.
cp -r skills/edinstvo-glass-figma ~/.claude/skills/Shader
For a live lens with the look of the package there is a shader effect. Add it to a frame and it sees everything inside that frame. Move the lens with the handle on the canvas.
The shader sees the frame as one flat picture, so it can't tell objects apart. One effect is one lens. For a second lens, wrap the frame in another frame. The shader isn't in the Community yet, its source is in the same repository.