Figma-to-Vue Workflow
We had Figma designs and a tool that can read them, but no tested way to turn a Figma component into a working part of our shared library.
It worked: the policy card came out of Figma as a real shared part, with four sizes and two states. The output needed tidying, and the Figma-to-code link was left for later.
What changed
The two changes that matter most, in plain words. Open any one to see it.
- 1
The policy card was read out of Figma and rebuilt as a shared part in four sizes, green when a rule is met and red when it is not.
The policy card, from Figma to code · came from Mark Parsonopen →
- 2
Layout, sizes and colours came across cleanly; exported images and tags from the drawing had to be replaced by hand.
What survives the trip from Figma · came from Mark Parson
- The link that would tie the Figma drawing to the code was never registered. In words
How we got here
Each change, traced back to the conversation it came from. A solid mark means the record names the source; a dashed one was matched by the draft and waits for review.
From the record: no recorded conversation behind this one.
c15-D1 Product-specific parts get their own folder: the card lives under security, not with the general-purpose parts. — Mark Parson
c15-D2 Stat columns use the library's number and sparkline parts instead of the images Figma exports. — Mark Parson
The policy card was read out of Figma and rebuilt as a shared part in four sizes, green when a rule is met and red when it is not.
From the record: no recorded conversation behind this one.
c15-D2 Stat columns use the library's number and sparkline parts instead of the images Figma exports. — Mark Parson
Layout, sizes and colours came across cleanly; exported images and tags from the drawing had to be replaced by hand.
Thanks to
People outside Qpoint first. Every thank-you points at something they said or made.
Ran the first Figma-to-code test
Tested the Figma reading tool on the real PolicyListingItem frame and turned its output into the shared policy card, with a security group of its own.
All images
Every picture from this cycle. Click any one to step through them all.
The pairs
Everything captured · 2
The full record 0 decisions · 9 key-change entries · 370 words · 1 captures
The record stays as written, for agents and for audit: Key Changes, every decision, the artifacts and the visual record.
Open the record for c15 →