Back to Plugins
Liquid Glass Export

Liquid Glass Export

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

Plugin 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

Plugin Details

Version5
CreatedSeptember 12, 2026
Last UpdatedSeptember 30, 2026
CategorySoftware development
CreatorAryan Kholghi
Stats22 installs, 3 likes
PricingFree

Technical Details

  • API:1.0.0
  • UI:dist/ui.html
  • main:dist/code.js
  • Document Access:dynamic-page
  • Editor Types:
    figma
  • Allowed Domains:
    • https://liquid-glass-showcase-red.vercel.app