# Working independently in Figma

The bundle provides assets, tokens, component/source references, and a local browser catalogue. It does **not** automatically recreate native Figma component sets, variables, auto-layout or prototype links. No `.fig` file or newly published Figma library is represented as part of this handoff.

## Start a design file

1. Read the [v2 brief](V2-DESIGN-BRIEF.md), then the [system guide](DESIGN-SYSTEM-GUIDE.md). Use the root README to launch the portable catalogue.
2. Create pages for Foundations, Components, Homepage, Sports — Football, Sports — Baseball, and Review. Treat that page structure as a working suggestion.
3. Import the current Cade SVGs from `assets/public/design-system/brand/` and the needed illustration/surface SVGs from `assets/public/design-system/` and `assets/public/assets/`. Preserve their view boxes and layer proportions. Some SVGs are compound artwork; importing them does not make a reusable Figma component automatically.
4. Create named variables/styles from the included token exports. Keep current `pc*` foundations separate from compatibility or legacy values. The main JSON uses the documented handoff schema; it is not a DTCG/W3C or Tokens Studio import. See the [token export guide](../tokens/README.md) before converting it for a specific Figma plugin.
5. Set display/body/data text styles using the supplied open-font fallbacks in `fonts/` (Barlow Condensed, Inter and JetBrains Mono, with OFL licences) or independently licensed Futura. Record which fonts were used in the file.
6. Build editable component sets for the pieces you use. Retain labels, values and interactive controls as text and component properties rather than flattening a screen into an image. Use auto-layout for repeated rows and responsive regions; preserve fixed artwork as nested decoration.

## Name and state conventions

Prefer semantic names such as `surface/paper`, `outcome/yes`, `outcome/no`, `text/primary` and `border/ink`, retaining a mapping to the exported token keys. The source uses Higher/Lower for the user-facing directional choices. A green fill alone must not stand in for an outcome label.

For each proposed v2 component, distinguish **existing/reused**, **extended**, and **new proposal**. Include relevant default, hover, focus, selected, disabled, loading, error/unavailable, and success/resolved states. These are review requirements where applicable, not an instruction to manufacture meaningless variants for every decorative asset.

Create desktop and phone compositions. The current source has desktop art frames as well as practical 390 px market stories. Test narrow widths, long team names and tickers, larger values, and the field/scoreboard/market relationship. Add reduced-motion final states to both sports play prototypes.

## Existing Figma provenance

These links are evidenced by the repository snapshot. They are optional references, may require file access, and were not live-verified during packaging. Local source/artwork remains available without repository access. The files and node IDs below should not be conflated.

| Reference | Link | Meaning |
|---|---|---|
| GMan design-system component authority | [Foundations — 6011:3](https://www.figma.com/design/wHLXw4PlW8Qs7Ay4uKMcZV/Pumpcade-Design-System---GMan--Copy-?node-id=6011-3) | Versioned component-reference manifest; 23 sections from Foundations through Layout. |
| GMan Buttons | [Buttons — 6325:22](https://www.figma.com/design/wHLXw4PlW8Qs7Ay4uKMcZV/Pumpcade-Design-System---GMan--Copy-?node-id=6325-22) | Existing governed button families. |
| Cade final brand | [Final-brand canvas — 6958:3](https://www.figma.com/design/jyJ6D2OSjCMQnHCopJN51l/?node-id=6958-3) | Brand-sheet component records this source file. |
| Cade brand assets | [Cade Brand — 7162:1903](https://www.figma.com/design/jyJ6D2OSjCMQnHCopJN51l/?node-id=7162-1903) | PFPs, compact mark and banner exports; use the bundled vectors where possible. |
| Historical Battle v2 | [6612:2](https://www.figma.com/design/wHLXw4PlW8Qs7Ay4uKMcZV/Pumpcade-Design-System---GMan--Copy-?node-id=6612-2) | Full campaign frame; layout reference, not a v2 approval. |
| Historical Battle v3 | [6615:2](https://www.figma.com/design/wHLXw4PlW8Qs7Ay4uKMcZV/Pumpcade-Design-System---GMan--Copy-?node-id=6615-2) | Full dashboard frame. |
| Historical Locked Lineup | [6624:2](https://www.figma.com/design/wHLXw4PlW8Qs7Ay4uKMcZV/Pumpcade-Design-System---GMan--Copy-?node-id=6624-2) | Full campaign frame. |
| Historical Community Qualifier | [6619:2](https://www.figma.com/design/wHLXw4PlW8Qs7Ay4uKMcZV/Pumpcade-Design-System---GMan--Copy-?node-id=6619-2) | Full community-vote frame. |

The source also records a [published design-system reference](https://pumpcade-design-system.netlify.app/#scenes). Treat it as supplementary and potentially older than this source snapshot. It is not needed to use the local bundle.

## What to return

Provide an editable Figma link/file, a short rationale for the category navigation and field treatment, desktop and phone frames, component/variable changes, and both sports play sequences. Attach a simple mapping from new components to reused reference components and token keys. State any assumed data requirements and outstanding decisions. Clearly label proposal colours, new icons, camera/depth choices and motion timings until reviewed.