Figma to Code
Design isn't a separate phase for me — it's where building starts. Every product I've shipped began as rectangles and arrows in Figma before it became React components or SwiftUI views.
How I Learned Design
I didn't go to design school. I learned Figma because Tipp needed it.
When I was 13, building a digital tipping app for Buildspace, I had to design every screen, every flow, every colour. That was my first time properly using Figma — not watching a tutorial about it, but actually designing a product that I intended to ship. Tipp never launched (regulatory walls), but the Figma skills stuck. They became permanent.
Since then, every project starts in Figma. LockIn's onboarding flow, Simplifly's B2B dashboard, landing pages for AI + Frnds — all designed before a single line of code is written.
The Process
My design-to-code pipeline looks like this:
- Problem definition — what is the user trying to do?
- Figma wireframes — rough layout, information hierarchy, user flow
- Visual design — colours, typography, spacing. I keep things clean and functional. No unnecessary animations or visual clutter.
- Prototype — clickable Figma prototype to test the flow
- Code — implement in React/Next.js or SwiftUI, using Cursor to accelerate
- Iterate — the code version always differs from the Figma version. That's fine. Ship, then polish.
Design Thinking in Products
The Tipp experience taught me that design isn't about making things pretty. It's about making things make sense. When a user opens your app, they should know what to do within three seconds. If they don't, you've failed — not them.
This shows up in LockIn's simplicity: choose apps, tap the NFC card, go focus. Three steps. No tutorial needed. The push-up unlock screen is deliberately bare — a camera view and a rep counter. Nothing else. Every pixel that doesn't serve the user's goal is a pixel that's in the way.
The Tools
- Figma — primary design tool for all product work
- Photopea — free Photoshop alternative for image editing, resizing, quick manipulation
- v0 by Vercel — AI-generated UI components for rapid prototyping
- 21st.dev — pre-built UI components to drop into projects
The philosophy across all of these is the same: fast, free (or cheap), and out of the way. I don't want to spend hours configuring a design tool. I want to spend hours designing.
Why It Matters
Being able to design AND code is the solo founder superpower. Most developers can't design. Most designers can't code. When you can do both — even imperfectly — you eliminate an entire dependency. You don't need to hire a designer or wait for someone else to hand you mockups. You think, design, build, and ship. The loop stays tight.
Manav Chawla brings genuine design taste when I need it — creative direction, logos, thumbnails. But for day-to-day product design, Figma is my sketchpad and code is my canvas.
See Also
- Tipp -- where I learned to design
- Design Philosophy -- the principles behind the designs
- Tools & Bookmarks -- the full toolkit
- The Solo Founder -- why designing and coding matters