The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
Starting a new design from a blank canvas is officially a waste of time. I’ve been using the Relume Figma Library lately, and it’s a total lifesaver for speeding up the wireframing phase.
It’s basically a massive kit of 1,000+ components that follow all the best Figma practices (auto-layout, variables, the works). You can go from a rough idea to a high-quality, responsive layout in minutes rather than hours, and everything syncs perfectly if you’re moving into Webflow later. ⚡️
If you’re a designer looking to ship faster without sacrificing quality, you need to add this to your toolkit.
Featured under: Design Systems & Figma Resources 🚀
Check it out: https://uiuxshowcase.com/resources/relume-figma-library/
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Related posts
Mockups and b-roll used to live across a dozen files for me. Social mock ups in one place, merch renders another, video clips somewhere else.
Figma's still where I design the brand itself. But everything around it lives on one FLORA canvas now.
Client opens one link, sees how the brand shows up in mockups and videos ad it also changed how I scope this stuff.
Made a video for Contra University walking through it ↓
Thanks for sharing Daniel! Great video, well explained and very inspirational!
I’m currently building a hairstylist discovery platform (web app) focused on making it easier to find and book hairstylists without relying on social media.
The platform includes search, stylist profiles, portfolios, and a structured booking request system.
I already have a full product outline, wireframes, and user flows prepared. I’m now looking for a UI/UX designer to bring this to life in Figma with a clean, modern, and intuitive SaaS-style design.
Scope (Phase 1):
Landing page
Search & filtering experience (with optional map view)
Stylist profile & portfolio
Booking flow (structured request system)
Basic dashboard views
Looking for:
Strong experience in web app / SaaS design
Ability to think through user flows and structure, not just visuals
Clean, modern, minimal design style
Experience creating interactive Figma prototypes
I’ll share full wireframes, diagrams, and detailed product logic with shortlisted designers.
Please share relevant web app or platform work when applying.
I can refer someone for this project.
My solution is about closing the gap between design and code with designing real, fully working components.
I designed a Contra-inspired profile card in Paper, then built a workflow that turns it into real, working React components.
The workflow in 3 steps:
→ Creating a contra.com style guide inside Paper, then asking it to create a copy of the profile card. Then making some refinement using the canvas and the design tools (I even added some new functionalities to the card, e.g. the fun fact section)
→ Paper design → component spec. My Claude skill reads the Paper file, including component states and the written explanations you might attached to your design, and writes a structured markdown specification with a component tree and these specs: appearance, user interactions, states, required input data.
→ Spec → working components. A second Claude skill generates real React components in Storybook and verifies each one against the Paper design until it matches: typography, colors, spacing, states.
(Btw. Storybook is a living catalog of your product's UI components, where each one runs in the browser as a real, interactive preview, so designers can click through every state and variation exactly as users will experience it, without waiting for the full app to be built around it.)
If you don’t design something, someone else (an AI, a developer) will. (It’s not necessarily a bad thing, but you need to be deliberate about what parts you want to outsource.)
With this workflow, you get to review and complete your design at two points:
→ first, when you get the detailed specification: you can take a quick look at it and fill in the gaps if needed
→ second, when you can play around with the live, fully coded components inside Storybook. You can also run tests to check e.g. whether the component is accessible or not.
With these two review steps built in, you can be sure that your design intent truly gets translated to code.
You can modify the spec, tweak the design in Paper, regenerate the components, and iterate until the result matches what you actually had in mind. No more redlining screenshots or re-explaining hover states in Slack.
Tools: Paper, Claude Code, Storybook, React.
MCP Servers: Paper, Storybook, Chrome DevTools
(Btw. I also created the slide deck inside Paper using Claude from VS Code)
I'll be open-sourcing both Claude skills and the full workflow in the coming days, so you can use it in your own projects and start closing the gap between design and code the same way. Stay tuned!
Thanks for the challenge @Stephen Haney @Contra HQ
Trending
Runway
AI video generation is exploding. What are you dreaming up in Runway?
Contra University
Learn from expert creatives how to earn more using next-gen AI tools.
creativeaiflow
Creative AI workflows are evolving. What tools do you use, and what are their strengths and weaknesses?
portfolioreview
The best portfolios tell a story, not just show a grid. Share yours for feedback.
freelancerlife
Freelancer life is wins, pivots, and everything in between. What’s yours right now?