skills.rest
spontus-reach
spontus-reachOFFICIAL
Explore all skills by this author →
WebsiteGitHub

figma-annotation-guide

Generate structured developer handoff annotations for Figma screens or components.

1|Updated May 22, 2026
Search Tags:#accessibility#figma#product design#design documentation#developer handoff#engineering spec#ui states
One-click install
npx skills add https://github.com/spontus-reach/spontus --skill figma-annotation-guide
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-annotation-guide
Source: https://github.com/spontus-reach/spontus/tree/main/.agents/skills/figma-annotation-guide
Command: npx skills add https://github.com/spontus-reach/spontus --skill figma-annotation-guide

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It eliminates back-and-forth between designers and engineers by converting a Figma screen or component into precise developer handoff annotations that cover interactions, states, layout, accessibility, and edge cases.

Core Features & Use Cases

  • Developer handoff specs: Produces a complete annotation set for a Figma screen/component that engineering teams can implement without guessing.
  • Interaction and state documentation: Documents default, loading, success, error, and disabled conditions plus a state inventory per element.
  • Build-critical clarity: Adds spacing/layout notes, content and copy rules, accessibility guidance, and a checklist of unresolved questions to flag missing design decisions.

Use case: When you receive a Figma screen for implementation, generate a structured set of notes so frontend or mobile developers know exactly what to build, including edge cases like missing error states and required accessibility details.

Quick Start

Generate dev handoff annotations for the Figma screen described as "a new settings page with a profile card, toggle controls, and a save action" for web developers.

Frequently Asked Questions about figma-annotation-guide

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate developer handoff annotations for a Figma screen?▼

Developer handoff annotations for a Figma screen are generated by providing inputs describing the screen, platform, interaction type, and developer audience to produce structured implementation specs.

What is the best way to document UI states for engineering handoff?▼

Documenting UI states for engineering handoff requires mapping default, loading, success, error, and disabled conditions per element to remove implementation ambiguity and ensure complete state inventory coverage.

Does Figma developer handoff documentation cover accessibility and edge cases?▼

Figma developer handoff documentation covers accessibility guidance and edge cases by generating a checklist of unresolved questions to flag missing design decisions and required accessibility details.

Can I create design documentation specs for iOS, Android, and React Native from Figma?▼

Design documentation specs can be created for iOS, Android, Web, and React Native by specifying the target platform and developer audience when generating the structured handoff annotations for your Figma component.

How do I document spacing and layout rules for frontend developers from a Figma file?▼

Spacing and layout rules for frontend developers are documented by generating build-critical clarity notes that detail layout measurements, content rules, and copy guidelines directly from the Figma screen description.

Related Skills

Explore More Design & Creative Skills→
nshaikhsnshaikhs

content-idea-generator

Generates content ideas from positioning and ICP using six frameworks.

Community
Advanced
duongdevduongdev
9

figma-integration

Convert Figma designs into implementation-ready component specifications and styling guidelines.

Community
Advanced
alo-expalo-exp
6

design-handoff

Generate developer handoff specs with layout, tokens, component props, states, breakpoints, and accessibility notes from Figma URLs or descriptions.

Official
Advanced
ilove323ilove323

design-handoff

Generate markdown-ready developer handoff specifications from Figma links or screenshots.

Community
Intermediate