Rethinking How Designers Find Components

Discover how I built a Figma plugin that understands UX scenarios and product briefs, helping designers quickly find the right design system components based on complex product requirements.

My Role

Product Builder

Design

Figma

Development

Cursor, Vanilla JS, HTML, CSS, Git, Figma API Plugin

Intelligence

ChatGPT, OpenAI API

Testing

Playwright

Reading Time

4 minutes

The Problem

Finding the right component is harder than building the library

Most teams already have a design system. The real challenge isn't creating components. It's finding the right one when you're in the middle of designing. Designers think about features and user experiences, not component names. You need some components to design an onboarding experience, but Figma expects you to know exactly what the component is called. So you search, try different keywords, browse through dozens of components, and sometimes even rebuild something that already exists. Then during a design review, someone points out that the right component was in the library the whole time.

The Idea

How might we help designers find the right design system components faster?

Designers naturally think about user goals, features, and experiences. What if they could simply describe what they're building, and the system could recommend the right design system components based on that context?

The Solution

Bringing the idea to life

To explore this idea, I built Component Wizard, a Figma plugin that understands product context before recommending components. Instead of relying on keywords alone, it analyzes the design problem, maps it to the design system, and explains why each recommendation fits.

Screen by screen

The screenshots below are taken directly from the real plugin. They show how it works, including some features that are still being refined as I continue improving its intelligence. A video walkthrough will be available soon.

Connect with your design system

Every team has a different design system. Importing your libraries keeps every recommendation relevant to your product.

Homescreen

Start with a suggested scenario or describe your own product idea in your own words. You don’t need to know the component names. Just describe what you’re trying to design.

A follow-up question, only when it’s needed

If the brief is too vague, the plugin asks a quick question before making recommendations. f the brief is already clear, the plugin will start analyze the brief.

Paste the long brief

Designers think in features, user goals, and flows. The plugin should understand those first, then recommend the right components.

Here’s what to use, and why

Based on your brief, the plugin recommends the most relevant components from your design system and explains why each one fits.

If something’s missing, the plugin informs you

If your design system doesn’t have everything the feature needs, the plugin points it out instead of pretending it exists. You immediately know what's available, what's missing, and which existing component is the closest alternative.

How It’s Built

Tech stack

Built to run natively inside Figma, stay responsive, and keep the codebase simple as the product grew.

Figma Plugin API

Vanilla JS

Small JS modules

Optional local LLM

Playwright screenshot

Figma REST · PAT / OAuth

How the intelligence works

Instead of searching for component names right away, the plugin first understands what you’re trying to design. Then it looks for the best matches in your design system.

Understand the request

Every search starts by figuring out what you mean. It could be a component, a UX scenario, a feature idea, or even a full product brief.

Understand the design problem

Before searching your library, the plugin looks at the people, goals, and flow behind the request so it understands what you’re actually building.

Ask only when it’s needed

If the brief is already clear, recommendations appear immediately. If something important is missing, the plugin asks one quick question before continuing.

Match with all design system library

Recommendations only come from the libraries you’ve imported. If something doesn’t exist, the plugin tells you instead of making something up.

Explain every recommendation

Every suggestion includes a short explanation so you understand why it was recommended before inserting it into your design.

Outcome

The result

Component Wizard is still in testing phase and I'm continuously improving how it understands product briefs and recommends components. My focus now is making the intelligence more accurate, asking better follow up questions only when they're truly needed, and creating recommendations that feel even more like working with an experienced teammate.