Dev mode

Dev mode

Figma plugin

Design engineering

Focused on UX/AI

Vibe coded

Project overview

View plugin

This project delivers a completely free, developer-focused Devmode experience rebuilt entirely on Figma. Designed to streamline design-to-dev handoff, it provides accurate design specs, copy-ready code snippets, and seamless component integration—all without a learning curve. Ideal for freelancers, startups, and product teams, this tool enhances workflow efficiency while eliminating the cost and complexity of traditional dev tools.

Domain

Dev tool

My role

Design engineer

Team

Just me

Timeline

5 days

Business Impacts

View LinkedIn post

25%

Cost saved for Individual or $48 per seat/year

54.5%

Cost saved for Organization or $360 per seat/year

61.1%

Cost saved for Enterprise or $660 per seat/year

Problems

High Cost

Dev mode as an individual seat to purchase for the organisations makes it very expensive for the pixel perfect execution.

Limited language support

Official dev mode only covers a few languages as snippet which makes it difficult for a junior to translate the design to code.

Figma's interface needs some tweaks

Dev mode does not clearly communicate the elements properties and leaves it ambiguous sometimes.

Problem statement

How might we make developer handoff from Figma faster, clearer, and completely free?

Reviews after launch

After launching CandidateX on Product Hunt and LinkedIn, the response was super positive. People loved that it goes beyond keyword matching and actually understands resumes. They also appreciated how it saves time, makes hiring easier, and gives clear reasons for every decision.

View LinkedIn post

How did I approach & package from idea to final in no time

Business perspective

Started by deeply understanding how the subscription model of figma works and how do we effectively cut the cost without sacrificing the current experience.

AI-Powered Development

Used AI coding tools like Cursor and Windsurff alongside my own development skills to rapidly prototype, iterate, and ship, without compromising on quality.

Figma's API

Used Figma's API to sync the UI data and fetch the properties in real time, apis from such organisations teach us how to document things clearly and make it beneficial for others.

Empathy-Driven Design

Started by deeply understanding recruiters' pain, how manual screening drains time, energy, and focus. This emotional insight shaped every decision, ensuring the solution truly served their day-to-day needs.

Product breakdown

#1 Power of using native framework

I have used figma's design guidelines and native styling to make it look as similar as figma's current interface which gives a sense of using an in built application which was a branch of figma and unlike other third parties.

Figma's dev mode

My plugin

#2 Minor tweaks i did on the go

Figma lacks minor tweaks in their current product. I looked into the actual use case of inspecting an element and understanding where the properties are coming from then tied the gap by adding more context to the element's properties.

Scenario:

  1. User selects a design element

  2. Understands there the property belongs to

Figma's dev mode

My plugin

System Architecture & Foundations

The core UI was build using pure html, css and typescript. Followed figma's UI styling and interactions to make it look pure native.

Cursor for quick functional execution

My growth as a designer
through this project

01

Project thinking end-to-end

Managed to take the product from the ideation phase till execution as a designer.

02

Design engineering

From translating ideas to design to solve any problem -> Executing the solution to an actual working prototype using my deign & dev knowledge.

03

0 -> 1 product building

Crafting the solution and building the phase 1 till deployment under 5 days as a designers and launching it on Figma community.

04

Usage of AI tools

Blending both design and dev knowledge with the help of tools like Cursor, windsurf and, etc.,

If you liked that, you’ll probably love these too!

Data security

Shields your sensitive, private, and regulated enterprise data is always shielded from cyber attacks, ransomware, leaks, and unauthorised access.

Airport super app

Bengaluru’s Kempegowda International Airport (BLR) is redefining the airport experience by integrating diverse services into a single, seamless platform.

Create a free website with Framer, the website builder loved by startups, designers and agencies.