The Problem I Faced, the Plugin I Built — Introducing Learnloop

When You Don’t Know What It’s Called

UI design, Names matter more than we think.

Especially in collaborative product teams, a shared vocabulary around UI components helps designers and developers move faster, communicate clearly, and avoid unnecessary back-and-forth. But there’s a problem — not everyone knows the right names, especially beginners in UI/UX design.

When you're new to the field, it’s easy to recognize what a button does, but harder to know whether to call it a CTA, a primary action, or just a button. During handoffs, that small confusion can slow things down. You hover over a component in Figma, or point to a part of the layout in a review call, and say, “This thing here…”

While going through user feedback while building this product, one message from my friend Jamaludheen Kp stood out:

“When I first entered the industry, I personally had to self-learn a lot of the UI vocabulary through blogs, real project work, design system documentation, and by observing how senior designers and devs communicated. Over time, it becomes second nature — but for newcomers, I think structured resources or tools that demystify these terms can be super helpful.”

Most beginners try to learn UI vocabulary by digging into lengthy design system docs or piecing together knowledge from scattered blog posts. It’s fragmented, time-consuming, and often overwhelming.

What if there was a simpler, more interactive way to learn these terms?

Introducing Learnloop

Learnloop is a simple tool designed to help you learn UI vocabulary — faster, visually, and more intuitively.

Instead of digging through long documentation or scattered articles, Learnloop lets you explore UI components interactively. It’s especially helpful for beginner designers, developers, and anyone working in a collaborative product environment.

You can try it out here:

👉 Web App

👉 Figma Plugin

In this article, I’ll walk through the journey of building Learnloop — from how the first version came to life, to shaping it based on user feedback, and the roadmap ahead.

What I’ll Cover:

• Building the First Version
• Shaping It Through Feedback
• Why a Figma Plugin?
• Iterations Ahead
• What’s Next?

Building the First Version

The idea for Learnloop came from a personal struggle — while learning and working on UI/UX case studies, I often got stuck simply because I didn’t know the correct name for UI components. It slowed down my workflow, especially during design handoffs or when searching for UI patterns.

That’s when the idea hit me: What if there was a tool built specifically to make learning UI vocabulary easier?

The next challenge was figuring out how to present that information in a way that’s both simple and engaging. The inspiration came from a game I used to play — the flip card mechanic felt fun and intuitive, letting users explore without getting overwhelmed.

So, I opened Figma and started designing a minimal interface:

• A clean page with a centered flip card
• Navigation arrows to browse through components
• A hamburger menu for future categories and structure

This became the foundation for Learnloop — a lightweight, interactive tool that lets you explore, guess, and learn UI component names.

Once the idea was clear, I decided to build a simple MVP — just enough to test the core idea and see if it resonated with others.

Before jumping into code, I researched the best tech stack, hosting options, and how to keep it lightweight for beginners. I created a Product Requirements Document (PRD) to stay focused.

The PRD helped clarify:

• What features the MVP should include
• Which tech stack to use
• How the user experience should flow
• Hosting and deployment strategy

All of this came together surprisingly fast — the first version was built in just 8 hours.

I used Cursor, an AI-powered code editor, which made iterating and shipping new features much smoother. For planning, I used Clude to write and organize the PRD.

I pushed the code to GitHub and hosted it on Vercel, making it easy to track deployments or roll back when needed — great for a fast, iterative product design cycle.

Shaping It Through Feedback

This was one of the most exciting parts — shaping Learnloop based on real user feedback.

After the beta release, I shared it with a focused group of 20+ designers. Their feedback offered clear insight into what was working and what needed improvement.

I also reached out to senior designers with 6+ years of experience to get their perspective. Their thoughts added depth and helped stakeholders understand how Learnloop fits into broader team workflows.

Key Feedback:

• Some components were hard to recognize
• Add real-world examples for better learning
• Flip cards required too many clicks
• Viewing one card at a time felt slow and boring
• UX writing needed improvement
• Animations didn’t work well, especially on mobile
• The hamburger menu felt unnecessary

What I’m Changing in Version 2

Based on feedback, Version 2 of Learnloop is on the way — here’s what’s being improved:

• Visual Examples Small UI mockups will show how and where components are used. This adds contextual learning for better retention.
• Improved Navigation A carousel layout replaces the single-card view, making it easier to explore and browse components faster.
• More Recognizable Components With visuals added, users will better understand and remember each component.
• Refined Animations & UX Writing Flipping feels smoother, microcopy is clearer, and the experience is more mobile-friendly.
• UI Cleanup Simplified navigation by removing cluttered menus and fixing minor UI bugs.

Version 2 is all about making Learnloop not just functional, but delightful to use — and it wouldn't be possible without the community.

Why a Figma Plugin?

After launching the web app, I realized something important: Designers learn best in the tools they use every day.

So I built a Figma plugin version of Learnloop to bring UI vocabulary learning directly into their design environment. It helps designers reference components in context, without switching tools or losing focus.

And for developers? A VS Code plugin is coming soon — so they can understand design terms right from their code editor.

Iterations Ahead

Beyond just feedback, I’ve been thinking about how to make Learnloop even more intuitive and useful.

While Version 2 is on the way, I’m exploring other ways to improve UI vocabulary learning — not just through components, but also how people interact, retain, and apply what they learn during real projects.

There’s also something new in the works — a feature that goes beyond flip cards and leans more into integrated learning. I’ll share more soon.

What’s Next & What I’ve Learned

The biggest takeaway? Listen to your users.

Feedback didn’t just fix bugs — it gave real direction and clarity. It showed what people actually need — not just what I assumed.

I learned that building a product is less about the initial idea and more about shaping it through research, systems thinking, and ongoing iteration.

Solving this problem wasn’t about one feature — it was about designing an interface system that supports learning naturally: clear patterns, minimal friction, visual reinforcement.

That meant thinking like a system designer: how does everything connect, guide, and support the user over time?

With each update, bug, and conversation, I’m learning. New ideas are coming, and Version 2 is almost here.

The goal remains simple: To make learning UI vocabulary feel less like a task — and more like a natural part of the creative journey.

Got Feedback?

If you’ve tried Learnloop — the web app or the Figma plugin — I’d love to hear what you think. Your feedback helps shape what comes next.

I’m also always open to new opportunities — especially where I can learn, build, and contribute to meaningful design or product ideas.

Feel free to reach out!

— Navajyoth Putalath 📩 navajyothputalath13@gmail.com