Login/Register

The ultimate web design workflow

Fancy Framework for Figma

Forget doing things twice — design smarter by managing your variables and color palette in Figma, then effortlessly transfer everything into Bricks with just a few clicks.

Free figma coursePlugin coming soon

How it works?

Fancy Framework for Figma streamlines your workflow in three simple steps — from defining your design system in Figma to building real pages in Bricks. Here’s how:

Import bricks variables Color palette Bricks Framework css

  • 01

    Set up your design variables in Figma

    Define your entire design system directly in Figma — colors, typography, spacing, and more. Group and name your variables for better clarity and consistency across your designs.

  • 02

    Export your variables and color palette to Bricks

    With just a few clicks, convert your Figma variables into Bricks-compatible values. Keep your color system consistent across design and development — no need to manually recreate anything.

  • 03

    Copy from Figma, paste into Bricks

    Select any Auto Layout section in Figma, copy it, and paste it directly into the Bricks editor. Supports autolayout, semantic tags, classes,grids and native Bricks elements — just like you designed it.

Watch videoEnjoy free!

Main features

Discover the features that make Fancy Framework Tool the perfect solution for your designs in Bricks Builder. With native integration, no plugins required, and a robust variable system, this CSS framework provides everything you need to create professional websites.

Native Integration with Bricks Builder

Advanced variable support

Use calc, rem, number and clamp() directly in your Figma variables for greater flexibility and control.

Native Integration with Bricks Builder

Auto-generate color variations

Generate transparent, darkened, and lightened versions of your colors instantly — no need to create them manually. Perfect for building accessible and consistent UI systems.

Native Integration with Bricks Builder

Export dynamic variables to Bricks

Thanks to support for clamp, calc, rem, and numeric operations, your Figma variables are ready for real-world usage inside Bricks — no tweaks needed.

Native Integration with Bricks Builder

Bricks-ready color palette export

Automatically export your color palette from Figma, linked directly to your variables — ready to import into Bricks and use seamlessly across your entire site.

Native Integration with Bricks Builder

Seamless copy-paste from Figma to Bricks

Copy any section built with Auto Layout in Figma and paste it directly into Bricks — layout structure, classes, and semantic tags all preserved.

Copy-Paste Features

Discover the features that make Fancy Framework Tool the perfect solution for your designs in Bricks Builder. With native integration, no plugins required, and a robust variable system, this CSS framework provides everything you need to create professional websites.

Bricks Color Palette

Built for Auto Layout

By following best practices, your sections will copy perfectly into Bricks — layout, spacing, and hierarchy intact.

Bricks Color Palette

Semantic HTML tag support

Your Figma sections can include semantic tags like [section], [container], [ul], [li], [h1–h6], [p], [span], and more. Perfect for SEO, accessibility, and clean markup.

Bricks Color Palette

Support for display grid

Display grid support uses (grid-x) (grid-x-x) to apply display: grid in Bricks automatically when pasting.

Bricks Color Palette

Class-friendly workflow

Use meaningful class names in Figma and watch them transfer seamlessly into Bricks. Combine with utility classes for maximum flexibility and control.

Bricks Color Palette

Bricks-native element compatibility

Paste sections that automatically map to Bricks' native elements like accordions, tabs, buttons, SVG vectors , nav menus, and logos — no extra configuration required.