The full Figma set of effects

Stack as many as you like, switch each on or off, and they export to real CSS.

Inner shadowDrop shadowLayer blurBackground blur NoiseTextureGlass

Auto layout

Rows and columns that hug, fill and wrap, with padding and gaps that behave like CSS flexbox.

Components & variants

Build a button once. Change the main component and every copy follows, overrides kept.

Prototype flows that read clearly

Forward links curve across, back links arch over the top, tab bars loop underneath. Overlays are dashed.

Animate any layer

Appear, hover, press and loop animations on any icon, button or text. They play in preview and export as CSS.

Design to code

React + Tailwind for each screen, a ready-to-run Vite project, or a single HTML prototype.

Figma import

Paste a file link to bring frames, text, vectors, images, auto layout and effects in as editable layers.

Live on your phone

Mirror the prototype to any phone on your Wi-Fi with a QR code. Edit on the desktop, see it change in your hand.

Design checks

Catch low contrast, small touch targets, broken links, missing images and fonts before developers do, with one-click fixes.

Export anything

React .tsxVite .zipHTMLPNGSVGPDFTokensTailwind theme

Never lose work

Autosave, crash recovery and scheduled backups to any folder, including a Google Drive or OneDrive folder.

45 complete apps and websites

Over 130 finished screens across fashion, food, fintech, travel, health and more. Plus your own template library.

Bring your Figma designs. Keep designing.

Run the free Xecil plugin in Figma, and your frames arrive in Xecil UI as real, editable layers, ready to prototype and turn into code.

One click in Figma. The plugin packs your frames and images into one file. No access token, no API limits, any Figma plan.

Real layers, not pictures. Text, images, vectors, auto layout, corner radii, strokes and effects come across editable.

Then keep going. Link the screens into a prototype, try it on your phone, and export React + Tailwind.

Make it move. No timeline needed.

Give layers the same name on two screens and Xecil UI morphs between them: position, size, rotation, blur, opacity and colour. Or let the Product showcase builder make the whole animated page for you.

Product showcase builder. Pick a style, add your products and get linked, animated screens for a website or a phone app.

13 motion templates, web and app. Spotlight carousel, Card stack, Depth zoom, Circle reveal, Orbit dial, Fan deck, Parallax story and more, each with its own movement.

Real code out. Animated screens export as one React component or one HTML, CSS and JS page: a step state, a table of what moves, CSS transitions. Ready to build on.

Your own curves. Gentle, snappy, bounce, or drag a custom easing curve. Plays the same on your phone with Mirror.

Your product, in real 3D. From one image.

Bring in your branded product and Xecil UI turns it into a 3D object you can spin, animate and place on any website or app screen. No 3D software, no modelling.

Label on a shape. Drop your flat label artwork onto a flask, bottle, can, jar, cup or tube. It wraps all the way round, so it looks right from every side.

Or start from a photo. A front photo on a plain background: the outline is found and spun into 3D, the photo stays exactly as you branded it.

Studio finish. Matte, glossy or glass, a metal cap, soft studio light and a floor shadow. Change the body and cap colours in seconds.

Animate it, ship it. Auto-turn, drag to rotate, float, tilt or reveal on scroll, then export it in your HTML or React code with a still image fallback.

Your canvas and your code stay in step.

Open Code mode on any screen and read it as HTML and CSS or as a React component, with the running result beside it. Change the code and apply it to the design. Paste code from anywhere and it comes back as layers.

Readable output. Semantic tags, Tailwind classes and named screen components, not a wall of absolute divs.

A real editor. Search and replace, multiple cursors, folding and a live preview that updates as you type.

Navigation included. Your prototype links become working onNavigate calls between screens.

// MaisonHome.tsx, generated by Xecil UI export default function MaisonHome({ onNavigate }) { return ( <main className="bg-[#F7F5F1] w-[390px]"> <button onClick={() => onNavigate?.("maison-detail")}> The Quiet Tailoring Edit </button> </main> ); }

A flow you can follow at a glance.

Drag the link handle from any button, tab or card onto a screen. Xecil UI routes each link around your layout, so ten screens and twenty links still read clearly.

Every direction. Forward links curve across, back links arch over, tab bars loop underneath.

Every kind of interaction. Click, hover, change and after-delay, several per layer, each labelled on the canvas.

Motion that feels right. Slide and push follow the arrow's direction, or morph layers with smart animate.

Everything you need, in one app.

Everything a product designer needs. Nothing you have to rent.

The full Figma set of effects

Auto layout

Components & variants

Prototype flows that read clearly

Animate any layer

Design to code

Figma import

Live on your phone

Design checks

Export anything

Never lose work

45 complete apps and websites

Bring your Figma designs. Keep designing.

Make it move. No timeline needed.

Your product, in real 3D. From one image.

Your canvas and your code stay in step.

A flow you can follow at a glance.

Made for the screen in your hand.

Mirror to your phone

Real device frames

Share one file

Present with confidence

Your workspace. Your colours.

Design it, prototype it, ship it. Today.

Tell me when it is ready