FigJam ADO User Story Extraction
Overview
This skill extracts ADO User Story components from FigJam boards by analyzing the Figma data structure. It identifies all visible ADO components (both standalone and nested within parent components), extracts their properties, and outputs a structured markdown table with ADO links and FigJam links.
Technical Instructions
When analyzing Figma data from this board, identify all visible ADO User Story Components and list them in a table. If a link to figjam has not been provided, ask for it.
Technical Identification Criteria
Primary Identifier - ADO User Story Component:
| Property | Value/Pattern |
|---|---|
type | "INSTANCE" |
name | "ADO User Story Component" |
componentId | References componentSet 814:2104 (e.g., 814:2105) |
Critical Rule: Only include ADO components that are actually present in the node tree. Some parent components have variants that hide the ADO component — if the "ADO User Story Component" node doesn't appear in the children, it should NOT be counted. | |
| Search Strategy: |
- •Recursively search through ALL nodes and their children
- •Look for nodes where
name === "ADO User Story Component"ANDtype === "INSTANCE" - •The ADO component can appear:
- •Standalone: Directly as a top-level instance
- •Nested: Inside parent components (API Endpoint, Dataverse Table, Plugin Component, Power Automate Flow, etc.)
Extract from componentProperties array
| Property Key Pattern | Contains | Example |
|---|---|---|
ADO Name#311:0 | ADO ID | "ADO 69505" → extract 69505 |
ADO Description#311:1 | Work item title/description | "SCC | Config | sic_examtype" |
ADO State | Status variant | "Pending User Story" |
Extract Context from Parent Component
When the ADO component is nested inside a parent component, extract descriptive text from the parent's componentProperties to populate the Context column:
| Parent Component Type | Properties to Extract | Example Output |
|---|---|---|
| API Endpoint | Header#74:1 + Endpoint call#74:13 | "API Endpoint: GET si_event" |
| Power Automate Flow Component | Header#86:2 + Description#86:3 | "Power Automate Flow: Use si_MembershipActionSubmitAction..." |
| Dataverse Table Component | Header#86:2 + Description#86:3 | "Dataverse Table: si_membership" |
| Plugin Component | Header#86:2 + Description#86:3 | "Dataverse Plugin: Run on Invoice creation..." |
| Customer Insights Component | Header#86:2 + Description#86:3 | "Customer Insights: Member notified via CI" |
Format: {Header}: {Description/Call} (clean up newlines, truncate if very long) | ||
For standalone ADO components, use the component's own ADO Description value as context. |
Known Parent Component Variants
Some component sets have variants with/without ADO tags. Only the variants that include the ADO component should result in table entries:
| Component Set | With ADO (include) | Without ADO (exclude) |
|---|---|---|
Dataverse Table Component (814:2357) | 814:2358 (Default) | 814:2363 (Variant2) |
API Endpoint (814:2212) | 814:2213, 814:2214 | 814:2216 (without ADO tag) |
ADO Link Construction
https://dev.azure.com/{ORGANISATION}/{PROJECT}/_workitems/edit/{ID}
Where:
- •
{ORGANISATION}= Azure DevOps organisation name (e.g.,smartimpactuk) - •
{PROJECT}= Project name/abbreviation (e.g.,AOP,ClientX, etc.) - •
{ID}= Numeric ADO ID extracted from the component Extract the numeric ID fromADO Namevalue: - •
"ADO 69505"→69505 - •
"ADO xxxxx"or"ADO XXXXX"→ Placeholder, no link (show—) Note: The organisation and project should be provided by the user or inferred from context.
Figma Link Construction
https://www.figma.com/board/{FILE_KEY}/?node-id={NODE_ID}
Where:
- •
{FILE_KEY}= The Figma file key from the board URL (e.g.,H3EJTOhyignzJdrsWEh0WB) - •
{NODE_ID}= The node ID of the parent component containing the ADO component (or the ADO component itself if standalone), with:replaced by-Example: - •Parent component node ID:
1653:4098 - •Figma Link:
https://www.figma.com/board/H3EJTOhyignzJdrsWEh0WB/?node-id=1653-4098
Output Format
Produce a markdown table with the following columns:
| # | ADO | Description | Status | Context | ADO Link | Figma |
|---|---|---|---|---|---|---|
| 1 | 69505 | SCC | Config | sic_examtype | Pending User Story | API Endpoint: GET si_event | ADO | Figma |
| 2 | 69504 | CRM Customisation | Table Name | Pending User Story | (standalone) | ADO | Figma |
| 3 | xxxxx | PowerAutomate | Description | Pending User Story | Power Automate Flow: Fetch un-processed payments | — | Figma |
Filtering Options
By default, return all items unless asked to filter the list. Example filters:
- •All items: Include everything (placeholders + real IDs)
- •Real items only: Filter out entries where ADO ID matches placeholder pattern (regex:
^[xX]+$) - •By status: Filter by
ADO Statevalue
Implementation Notes
- •Only count visible ADO components: If walking a parent component's children and no
"ADO User Story Component"node exists, skip it — the variant being used hides the ADO tag - •For nested components, the node ID contains semicolons (e.g.,
I1641:5423;73:835) — use the parent's node ID for the Figma link, not the nested ADO component's ID - •Track the parent component's node ID and componentProperties while recursing
- •The
componentPropertiesis an array of objects withname,value, andtypekeys - •Clean up context text: replace
\nwith spaces, trim excessive whitespace
Final Output
IMPORTANT: ALWAYS produce a clean markdown table that the user can easily copy and paste. Present it after any analysis or explanation.