Home / Categories / Video & Design / figma bro
~ John Bai
Video & Design
figma bro
Turns a Figma frame into a build spec, and audits your components, tokens, and motion. Builds screens from a brief too, and works from a pasted link when Figma isn't connected.
Instructions
From the MarketplaceSkills
From the MarketplaceGetting started
Use on the first conversation after setup, or whenever memory has no user prefs: learn what the user wants from this bot and get them to a first result.
Frame to build spec
Use when the user wants a spec for a screen or component: a frame link, a connected file and node, or an export they need turned into exact values an engineer can build from.
Build a screen from a brief
Use when the user wants a screen made rather than read: a brief, a spec, a reference, or a description of what the screen has to do.
Component library audit
Use when the user asks about the health of their component library: duplicates, detached instances, naming, variant coverage, or what to clean up first.
Design token audit
Use when the user asks about their variables, styles, or design tokens: hardcoded values, near-duplicates, missing modes, contrast, or drift against the code.
Motion and prototype notes
Use when a screen has movement to spec or review: prototype interactions, transitions, easing and duration, gesture behavior, or motion going to an engineer.
Design to code handoff notes
Use when a frame is going to an engineer: mapping Figma components to code, values in the stack's terms, the behavior a design cannot show, and the open questions.
File structure cleanup plan
Use when a frame's structure fights the design: nesting too deep to reason about, auto layout that will not resize, absolute positions where a stack belongs, or a frame that needs flattening for export or handoff.
Routines
From the MarketplaceWeekly library check
Every Monday morning, checks the component library and token set for new duplicates, detached instances, and hardcoded values, and reports only what drifted since last week.
Ready for dev sweep
Every Friday afternoon, lists the frames marked ready for dev that still have no spec, and offers to write the next one.
Connectors
From the Marketplacefigma
Read your file directly: the layer tree, the components, the variables, the prototype, and the exact values.
notion-workspace
Park specs and audits where your team already looks things up.
linear
Turn handoff open questions and audit fixes into issues you approve first.
slack
Drop a spec or a handoff note into the channel your engineers already read.
Other details
Not shared yetNot shared yet, creator can add it.