AtomCore Plugin

AtomCore

DURATION

August - September 2025

Keywords

Figma plugin, vibe coding, design library

AtomCore is a Figma plugin built around the concept wireframe system I created for myself. The plugin serves individual building blocks and curated sets that make concept wireframes easy to compose.

The project began with a gap I kept running into in early product work. Design systems were often too bloated for exploration. Rough wireframes were too abstract for most people to follow. AI-generated layouts could look polished, but lacked intention and took too much effort to adjust. I wanted something in between: a tool that kept me in control, moved quickly, and still communicated intent clearly. So I first built the concept wireframe library itself, then designed the plugin UI around the way I actually wanted to browse, place, and compose those parts inside Figma.


If the goal were only to reuse components inside Figma, publishing the library and serving it through the Assets panel would have been simpler. That already works well for individual blocks. What I wanted to add was sets: curated groups of components that are usually needed together for a certain kind of build. A product card, for instance, is not just one component, but a small system of image, badge, text, price, and actions. The plugin let me serve both the blocks and the sets, which made the library feel less like a collection of parts and more like a compositional system.


What I call concept wireframes sit between rough wireframes and more polished mid-fidelity design. They are still lightweight, but resolved enough to communicate flow, architecture, hierarchy, and content placement. I’ve found that this middle layer is often the most useful one because it is fast to make, but clear enough that other people can immediately understand a new product idea.

First part of the project is creating this concept wireframe component library.

Then i designed the end-to-end high fidelity flow of the plugin in Figma, before handing off to Cursor.

The initial wireframes for the MVP flow of the plugin.

From there, the project became much more technical. I didn’t build the plugin in one shot. I used Cursor and Figma MCP in a scaffolded, iterative way, proving each layer before moving to the next. Part of the challenge was technical, but part of it was simply keeping the workflow sane: making sure each piece worked before adding more complexity, avoiding a codebase that became messy too early, and gradually shaping the plugin into something maintainable. That process ended up being less about chasing a perfect first build, and more about building the system in stages until the structure was solid enough to support everything else. The hardest part was building the sync pipeline that kept the plugin aligned with the source library in Figma, using Supabase and webhooks to keep the catalog current. I also turned the component description field in Figma into a lightweight tagging layer, which made the library searchable without much added maintenance.


AtomCore is also a proof of concept for a larger system I’m building. It is an early version of a white-label component delivery model, where one source file in Figma could sync and distribute components across Figma, Framer, and Webflow. The idea is simple: maintain the library once, then serve it wherever you are building.

SENYAN LUO

©2026