Xport: From Figma to Live Site, Instantly.

Overview

Transform your Figma designs into fully functional websites with a single click. Xport is a conceptual Figma plugin designed to bridge the gap between design and development, empowering designers to publish their creations directly to the web.

What I did

Visioning
Prototyping
User Experience
User Interface

Introduction

The Brief

This project was conceived as a recruitment exercise for Monday.com, responding to a brief that challenged applicants to create an expansion for an existing product, design its user interface, and present it in a compelling one-pager format.

the challenge

When a Design Gets Lost in Translation

A designer’s work isn't truly finished until it's live. We spend hours perfecting layouts, interactions, and spacing in Figma, but a lot can get lost in the handoff to development. Small visual bugs crop up, animations don't feel quite right, and the back-and-forth to fix these issues can be slow and frustrating. This process can feel like you're losing a bit of control over the final outcome.

The Solution

Bringing the Finish Line Closer

Xport puts the publishing tools right where you need them. It adds a 'Publish' button to the top corner of the Figma interface. When your design is ready, you click it, and a small panel appears with the final steps.

It handles the technical parts of publishing a site:

Connect a Domain

It gives you a simple field to connect a custom domain, without needing to dig into complex settings.

Pre-flight Checks

Before publishing, Xport runs a quick audit on your design. It flags common SEO issues, like missing image alt text, and checks for performance problems. You can fix them right there.

Smart Code Generation

As it publishes, the plugin converts your design into clean CSS. It understands your text styles and hierarchy, so headings and paragraphs are structured correctly from the start.

Preserves Your Work

It uses Figma's own prototyping links and smart animate features to build the site's navigation and animations, so what you designed is what you get.

the design

Simplicity at core

Guided by the brief to create a native Figma expansion, I designed a minimal UI that feels like part of the original tool. It’s just a single "Publish" button, with all settings appearing in a pop-up on hover to keep the canvas clean. The user flow also follows a "simple first" approach using progressive disclosure—essential tools are shown upfront, while advanced options are neatly tucked away.

One-pager

A key part of the project was designing the one-pager to introduce Xport. The site needed to clearly present the plugin's features and pricing to encourage downloads. I chose a minimalist design to reflect the simple, straightforward feel of the plugin, giving users a taste of the experience.