FigmaFlow

Inspiration

Being a backend web engineer, it is difficult to come up with good front-end design code. That's where Figma comes in - a powerful collaborative design tool that lets designers create user interfaces, prototypes, and mockups in a visual environment. Figma has become the industry standard for UI/UX design as it allows teams to design, prototype, and gather feedback all in one place, significantly cutting down on the back-and-forth between designers and developers. However, taking those beautiful Figma designs and turning them into actual code was traditionally a time-consuming process that required careful recreation of every component. Not anymore! FigmaFlow is a VS Code extension that can turn your Figma designs directly into code, dramatically speeding up development by eliminating the need to manually translate designs into HTML/CSS from scratch. This automation helps bridge the gap between design and development, letting engineers focus on implementing business logic rather than pixel-perfect UI recreation.

What it does

FigmaFlow is able to convert a given screenshot or image of a Figma design and use AI Vision technologies to process that image into actual, usable HTML and CSS code that is over 95% similar to the original image. Not only Figma, the extension is able to replicate any webpage design image that you can feed it.

How we built it

We utilized VS Code APIs, Typescript for the frontend, and a Flask server for the backend in terms of the coding pipeline. We also utilized the Claude Vision API to process the image of the website.

Challenges we ran into

VS Code extension creation is a tough process and uploading an image in that limited environment and sending that image via a POST request to a remove Flask server was a nightmare to work on. We had to spent over 5 hours just to figure out this part of the process.

Accomplishments that we're proud of

We are very proud that we were able to finish the project in its entirety and achieve everything we set out to do. We are also proud that we were able to send the Image from VS Code to Flask