Inspiration
The idea for this project was inspired by our experiences during hackathons, where aligning Figma designs with live websites was time-consuming and challenging. We often wished for a tool that could overlay Figma designs on live websites, allowing us to refine them faster and more precisely. This need for efficiency and precision drove us to create a solution that bridges the gap between design and development.
What it does
Our project allows developers to overlay their Figma designs on live websites to ensure that their implementation matches the design perfectly. The tool has three main components: a Figma plugin that generates processable JSON data from selected design elements, a server that stores user-specific design data, and a Chrome extension that fetches the data and overlays it on a webpage. Developers can interact with the overlay to check differences in distances, fonts, and layout, ensuring pixel-perfect alignment.
How we built it
We started by building a Figma plugin that enables users to select nodes in their designs and generates JSON data containing the essential details like layout, fonts, and spacing. This JSON data is sent to a server we developed using Flask, which acts as a storage and middleman. The server stores the data for each user and allows them to fetch it when needed. Finally, we developed a Chrome extension that retrieves the processed data from the server and overlays it on the target webpage. The extension also enables developers to interact with the overlay to refine the alignment and match the live website to the design.
Challenges we ran into
One of the biggest challenges was integrating Figma's API. Initially, we tried to fetch data using Figma URLs, but issues with API access and personal tokens made this approach infeasible. We explored alternatives, such as using a middleman server for API requests, but this also encountered restrictions. Eventually, we decided to build a custom Figma plugin to generate the processable JSON data we needed. Additionally, creating the logic to extract and structure design nodes into a usable format was a complex task that required significant effort and iteration.
Accomplishments that we're proud of
We are proud of overcoming the challenges with the Figma API and building a solution that meets the needs of developers. The Figma plugin we developed generates precise and processable data, and the integration of the server and Chrome extension creates a seamless workflow. We successfully turned a common pain point into a productivity-enhancing tool that helps developers achieve pixel-perfect designs faster.
What we learned
Through this project, we gained a deeper understanding of Figma's API, server-side development, and data processing. We also learned how to design and implement plugins, manage user-specific data securely, and integrate multiple tools into a cohesive workflow. Working as a team, we improved our collaboration and problem-solving skills, especially when pivoting to new approaches after encountering roadblocks.
What's next for Epic Name
Our next steps include refining the tool's user experience and expanding its functionality. We plan to add features like real-time collaboration, advanced design analysis, and support for additional design platforms. We also aim to optimize the extension for more complex designs and ensure it works seamlessly across various web technologies. Our ultimate goal is to make this tool an indispensable resource for UI developers, helping them work more efficiently and accurately.
Log in or sign up for Devpost to join the conversation.