Liquid Metal Plugin for Figma

Transform Your Designs with Mesmerizing Liquid Metal Effects

Create stunning, animated liquid metal effects directly in Figma with real-time WebGL rendering. Perfect for modern UI designs, hero sections, backgrounds, and eye-catching visual elements.

✨ What You Get

6 Professional Presets

• Default: Classic silver liquid metal look
• Neon: Vibrant, glowing colors with chromatic effects
• Chrome: Ultra-reflective metallic surfaces
• Ocean: Deep blue liquid with flowing movement
• Toxic: Bright green radioactive glow
• Fire: Warm, fiery orange and red tones

Each preset is fully customizable and provides an excellent starting point for your designs.

Control

• Custom Colors: Fine-tune 4 gradient colors plus background
• Animation Speed: Control the flow from static to fast-moving
• Scale & Brightness: Adjust size and intensity of the effect
• Chromatic Aberration: Add red/blue channel shifts for a glitchy, futuristic look
• Softness Control: Adjust edge definition and smoothness
• Advanced Noise Parameters: Deep control over the liquid metal patterns with 6 coefficient controls (AX, AY, AZ, AW, BX, BY)

Image Upload & Smart Masking

• Upload your own images and apply liquid metal effects
• Intelligent edge detection preserves sharp, clean boundaries
• Shape-aware effects that follow your image contours
• Choose between contain and cover fitting modes
• Export dimensions from 320px to 1920px with convenient presets

Professional Results

• High-quality WebGL shader rendering with Three.js
• Smooth, 60fps animations
• Real-time preview as you adjust parameters
• Scales perfectly to any size
• Export-ready for production use
• Support for transparent backgrounds

🎯 Perfect For

• Landing page heroes and animated backgrounds
• App interfaces and loading screens
• Marketing materials and presentations
• Social media graphics and video content
• Product mockups and showcases
• Futuristic and tech-forward designs
• Abstract art and creative compositions
• Logo animations and brand assets

🚀 How It Works

1. Open the Liquid Metal Plugin
2. Select any frame or shape in Figma (or start fresh)
3. Choose from 6 presets or customize your own
4. Upload images for shape-aware liquid metal effects
5. Adjust colors, and advanced parameters in real-time
6. Set your export dimensions
7. Create stunning effects in seconds

The plugin features:

• Real-time WebGL Rendering: See changes instantly as you adjust parameters
• React Three Fiber: Built on cutting-edge web 3D technology
• Smart Image Processing: Advanced edge detection and alpha erosion for clean masking
• Chromatic Effects: Professional-grade color channel separation
• Volumetric Rendering: Create depth and dimension with contour controls