How I work in Figma

Everything in Figma. Nothing hard-coded.

I’ve used Figma since day one, 7+ years now. I build design systems where every value is a reference, so engineers get code that matches the design, not an approximation of it.

In Figma: 7+ years
Hard-coded values: None
Handoff: Design → MCP → code

Design that’s ready for code

Developers can connect their favourite AI agent to Figma over MCP and get pixel-perfect code.

Designers used to spend reviews arguing about why the build wasn’t pixel-perfect. With that out of the way, the conversation moves to what matters more: better interactions, micro-interactions and animation that guide and delight users.

Figma design

Tokens, auto layout, constraints

MCP

Agent reads the real structure

Developer’s AI agent

Whichever they prefer

Production code

Responsive, mapped to tokens

Anatomy of a real widget

A live widget from my team’s library at Dialog: W0015, the product configuration widget, open in Figma.

Figma screenshot of the W0015 product configuration widget: the layers panel shows nested versioned components and a configuration item slot; the canvas shows billing type, a segmented control and a link; the properties panel lists show and text properties, a slot and auto layout settings. — W0015 product configuration widget: layers, canvas and properties.

1
ID and version
W0015 v0.1.0. Every widget is catalogued and versioned, like a code package.
2
Versioned building blocks
The segmented control track (v0.1.0) holds segments at v0.2.0. Each layer updates without breaking the one above it.
3
Properties that become code props
5 on/off switches and 3 text properties, named the way a developer would name them.
4
A slot for other widgets
configuration-item-slot takes W0025, the configuration selection widget, without detaching anything.
5
Auto layout throughout
Vertical stack, 16 spacing, fixed 328 width, height that hugs its content.

The same widget, as a developer uses it

<ProductConfiguration
  showConfigurationType
  configurationType="Billing type:"
  showConfigurationValue
  configurationValue="Postpaid (Monthly bill)"
  showSelectionLabel
  showLinkText
  linkText="Compare router options"
  showSeparator
>
  <ConfigurationSelection />   // W0025 in the slot
</ProductConfiguration>

Illustrative. Every property in the Figma panel carries straight across.

This is what an AI agent reads over MCP. Nothing to interpret.

Why it comes naturally: I build too

I started as a design engineer: Android native before AI, React Native with it, and front-end prototyping for the web. I know what a developer expects to find in a design file, so code-ready design isn’t extra work for me. I still ship code today as a hobby.

Personal app · Next.js · TypeScript · Vercel

Ledger

A salary and budgeting app I built for my own use. Designed directly in code, never in Figma, and I’ve been using and improving it for two months.

Live app Code on GitHub

E-commerce · Storefront and admin panel

Novatek.lk

An online store I designed and built end to end: the storefront customers shop on, and the admin panel behind it that runs the business.

Live site Code on GitHub

The whole toolkit, used properly

Components and slots

I build components the way engineers do: one source, variants for every state, and slots so content swaps without anyone detaching.

Never detach

Auto layout

If a frame can’t resize like the real screen, it isn’t finished. Everything I hand over stretches, wraps and hugs like production.

Built to resize

Variables

Colour, spacing, radius and type live as tokens. In Marvel, one mode switch moves a screen between English, Sinhala and Tamil.

Modes, not copies

Styles

Styles sit on top of variables, so a brand tweak is one change, not a hunt through two hundred frames.

One change, everywhere

Libraries

One published library feeds every team file. Fix it once and every file gets the fix.

Single source of truth

Figma agent

Agents take care of the grunt work that slows delivery, and stay true to the system. I spend my time on the design problems worth solving.

Grunt work, handled

FigJam

Where the messy thinking happens: workshops, journey maps and turning research into themes before anything is drawn.

Think before pixels

Figma Make (AI)

When a static frame can’t answer the question, I prompt a working prototype and put it in front of people quickly.

Prompt to prototype

Figma · Design work samples

See the files for yourself

A mix of my own concepts, freelance projects and Dialog work.

Open in Figma

Next · Get in touch

Like what you see? Let’s talk.

← Back to home ↑ Back to top