Do You Need Figma Components If They Already Exist in Code?

What is the value of a design tool when your components already live in code? I’ve been exploring what happens when the codebase becomes the source of truth for the component library, and the design tool becomes a playground for trying ideas, experimenting with layouts, and figuring out how a feature should work. In this video, I use Paper to explore that workflow, taking a new feature from wireframes to a working prototype using the components we already have.

📖 Haven't tried Paper yet? Start with our free guide!
https://designproject.io/skills-repo/?utm_source=youtube_paper_component_library&utm_medium=video&utm_campaign=paper_component_library&utm_content=community

💬 Figuring out AI and code? Join our community!
https://designproject.io/community/?utm_source=youtube_paper_component_library&utm_medium=video&utm_campaign=paper_component_library&utm_content=description_community

🚀 Sign up for our product sprints!
https://tally.so/r/WOPNPP?utm_source=youtube_paper_component_library&utm_medium=video&utm_campaign=paper_component_library&utm_content=description_sprint

WATCH MORE LIKE THIS
🎥I Built My Entire Design System in 4 Hours With AI
https://www.youtube.com/watch?v=nafNPuElCtY
🎥How to Build an AI-Managed Design System With Claude Code Skills
https://www.youtube.com/watch?v=Z-CKUQSS8AY
🎥Design-to-Code Workshop With Claude Code, Cursor & Figma
https://www.youtube.com/watch?v=SEy1WPjPF3k

I’m adding voice feedback to a product we’re building, so stakeholders can record a comment instead of typing everything out. Our components and tokens already live in code, documented in Storybook, so I ask my coding agent to bring the pieces I need into Paper. That gives me a starting point to explore the feature without rebuilding the component library.

I use Paper as a playground to work through the flow with wireframes, try different layouts, and refine the recording states visually. Once I have a direction I want to test, I ask the agent to bring it back into the codebase as a working prototype using our existing components.

Then I try it in the product, find what needs adjusting, and identify what still needs an engineer’s review.

WHAT YOU’LL LEARN
- Use Storybook to see which components already exist in your codebase.
- Connect your coding agent to Paper and work from your existing components and tokens.
- Bring in the pieces you need without recreating the entire library.
- Map out a feature flow using wireframes before refining the UI.
- Design the different states and refine the details visually in Paper.
- Bring the design back into code as a working prototype.
- Test the interactions and identify what still needs engineering review.

What I’m excited about is being able to design closer to the product we’re actually building. The codebase stays the source of truth, and Paper gives me a visual space to try ideas and work through the details. The more I work this way, the less I feel like I need a separate design version of the entire component library.

CONNECT WITH ME
🌐 The Design Project:
https://designproject.io/?utm_source=youtube_paper_component_library&utm_medium=video&utm_campaign=paper_component_library&utm_content=connect_website
💼 Dianne Alter on LinkedIn:
https://www.linkedin.com/in/diannealter

TIMESTAMPS
00:00 Do you still need a component library in your design tool?
00:51 What is Paper?
05:37 Pulling components and tokens into Paper
10:25 Finding inspiration and mapping the feature flow
14:08 Designing with existing components
19:29 Turning the Paper design into a working prototype
26:24 Testing the complete voice feedback feature

We at The Design Project help B2B SaaS product teams ship faster by combining AI tools with strategic design expertise. We've worked with 50+ teams, including companies acquired by Slack, Nvidia, and MrBeast, to cut product cycles in half using battle-tested AI workflows and design systems.