Skip to content
Liquid Glass Export

Liquid Glass Export

by Aryan Kholghi

Turn Figma Glass effects into React Liquid Glass components with one command

FreeFigmaDev Mode

Installs

22

Likes

3

Users

530

Views

69

Preview

Liquid Glass Export preview

About this plugin

Designed a card with Figma's Glass effect? Liquid Glass Export turns it into a real, working React component — refraction, frost and light included.HOW IT WORKS1. Select one or more cards that use the Glass effect.

2. Press Export. The plugin gives you a command like:npx liquid-glass-cli@latest figma pull k7x9q2mhw4ra3. Send it to your developer (or run it yourself) in a React project. The component is written straight into components/glass/.Prefer no server? Press "Copy code" to copy the component instantly — nothing leaves Figma.WHAT GETS CONVERTED• Glass: refraction, depth, dispersion, frost and light angle / intensity• Fill color → tint• Corner radius and corner smoothing (Figma's 60% iOS smoothing → Apple's squircle)• Drop shadow → elevation• Auto layout, text and solid shapes → Tailwind markup• Images and vectors are left as placeholders to export separatelyThe glass can sit on the card itself or on a background layer inside it.GOOD TO KNOW• Splay isn't available to plugins yet, so the component's default is used.• The generated code needs React, Tailwind CSS and the @/ path alias. The CLI adds the Liquid Glass component automatically if the project doesn't have it.• Exports are deleted automatically after 7 days. Privacy: https://liquid-glass-showcase-red.vercel.app/privacyDocs: https://liquid-glass-showcase-red.vercel.app/docsCLI on npm: https://www.npmjs.com/package/liquid-glass-cliDATA & PRIVACYPressing “Export” uploads a description of the layers you selected —including their text content, layer names, sizes, colours and Glasseffect settings — over HTTPS to liquid-glass-showcase-red.vercel.app,where it is stored so the CLI can retrieve it. Every export is de

More software development plugins

View all