Liquid Glass Export
by Aryan Kholghi
Turn Figma Glass effects into React Liquid Glass components with one command
Installs
22
Likes
3
Users
530
Views
69
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 allBuilder.io - Figma to Code & AI Apps (React, Vue, Tailwind, etc)
by Steve Sewell
Export designs to clean, responsive code or turn Figma screens into AI apps and prototypes.
Anima: Convert Figma to HTML/CSS/React/Tailwind,Vibe code,DevMode Inspect/Run React/HTML,App builder
by Anima
Anima - AI Design to code, Vibe code, Vibe design
SkewDat
Paidby Unfold
Skew any layer or group with all layers preserved to edit.
Zeplin
Paidby Zeplin Crew
Design tools are for designing. Zeplin is for clear, structured design delivery.