Component extractor
Building My First Figma Plugin Using AI
Personal Project
Designer and Developer
10/2/2025 - 12/2/2025
Me
The field of crypto and web3 is very new and people had little to no idea on what it is. Since the technology behind it is growing rapidly, we decided to create an education app that focuses on the education of web3. This problem was part of a Hackathon.
Being a one week project was definitely going to be challenging. We had to rely on our design intuition which we did in taking certain decisions which we believed would work for the final solution. In our research we wanted to understand how many people knew the term web3 and what they know about it. This would give us an idea of the existing knowledge among people. We also wanted to identify the ways they acquire new knowledge.
We sent out a survey and these were our key findings:-
-Just over 50% of our users have heard of the term Web3, from which only 11% consciously use it, and 22% do it sometimes.
-55% of users created and shared educational content.60% of the users cannot wrap their head around the idea of web3.
-80% of users regularly use educational apps with the example of Duolingo or Udemy.
-Users like to get knowledge from different resources such as books, websites and videos.
-What stops users from continuing learning is mostly: a lack of time, money, and boring materials.
-Users would like to get their knowledge from videos, pictographs, real-life examples and games. Broken down into smaller, digestible content.
As a product designer, I rely heavily on Figma plugins to streamline my workflow. I had always been curious about creating my own plugin but lacked experience in Figma plugin development. Inspired by AI-driven development tools, I decided to experiment with AI to build my first Figma plugin—a tool that exports all components from a Figma file into an Excel sheet for documentation. While I have used AI on a daily basis, I have never experiemented in the field of development so took this opportunity to create the plugin.
This case study outlines my journey, the challenges I faced, and the key takeaways from using AI to accelerate the learning process.
*Showcase at the very bottom
While exploring potential plugin ideas, I browsed Reddit threads to see what challenges designers were facing. One recurring request stood out:
🛠 "Is there a way to export all Figma components into an Excel sheet for documentation?"
Manually tracking components across multiple pages in Figma can be tedious. An automated export tool would significantly improve organization and documentation.
To build a simple and reliable Figma plugin that:
- Extracts all components from a Figma file
- Exports them into an Excel sheet with clean formatting
- Provides real-time feedback with a progress bar for files with high number of components
With no prior experience in Figma plugin development, I turned to Cursor AI to:
✔ Set up the Figma Plugin API and TypeScript configuration
✔ Generate code snippets for component extraction
✔ Debug errors and performance issues
Using AI allowed me to focus on problem-solving instead of getting stuck on syntax or setup issues.
Each challenge reinforced the importance of keeping the MVP simple and functional before adding advanced features.
- Fully functional Figma plugin that exports components to Excel
- Clean and structured Excel output with optimized formatting
- Minimalist UI with real-time feedback for better user experience
- Successfully used AI to accelerate development without prior experience
This project proved that AI can lower the barrier to entry for plugin development, even for designers with limited coding expertise.
While AI assisted with code generation and debugging, I still had to make design decisions, optimize performance, and refine the UX.
Trying to include every feature from the start led to unnecessary complexity. Releasing an MVP first and iterating based on feedback was the best approach.
Even with AI, errors and edge cases needed manual troubleshooting, which helped deepen my understanding of plugin development.
- Add Notion integration for component documentation
- Reintroduce nested component detection with better logic
- Optimize processing speed for even larger Figma files
- Enhance UX with additional customization options
This experience proved that AI can make software development more accessible, even for first-time plugin creators. With the right tools and an iterative approach, anyone can build and launch a Figma plugin—even with no prior experience.
I look forward to refining this plugin and exploring more AI-assisted projects in the future.
This research validated our problem statement and led us to focus on how we can educate the people in a way they can do it easily without being bored and while remaining engaged.
We quickly moved onto brainstorming ideas for designs and started to create wireframes. We prioritised making the main screens and eliminated the optional standard screens such as settings and account page to keep the focus on the design, how it will achieve the goal and also save time.
