Skip to content

feat(dt): add Figma MCP integration for DT artifact export#1222

Merged
WilliamBerryiii merged 14 commits intomicrosoft:mainfrom
DigitalMartyn:feature/figma-mcp-integration
Apr 22, 2026
Merged

feat(dt): add Figma MCP integration for DT artifact export#1222
WilliamBerryiii merged 14 commits intomicrosoft:mainfrom
DigitalMartyn:feature/figma-mcp-integration

Conversation

@DigitalMartyn
Copy link
Copy Markdown
Contributor

Pull Request

Description

Add FigJam board and Figma Design file export capability to the Design Thinking collection using the official Figma MCP server (hosted HTTP at mcp.figma.com). No local server installation or credential files required.

New files:

  • dt-figma-export.prompt.md --- Export DT artifacts to FigJam/Design files
  • figma-export.md --- User-facing setup and usage documentation

Modified files:

  • dt-coach.agent.md --- Add Export to Figma handoff button
  • dt-method-next.prompt.md --- Add FigJam export mention at milestones
  • mcp.json --- Add figma HTTP server entry
  • SKILL.md --- Add figma to MCP config tables and templates
  • Collections --- Register dt-figma-export prompt in both collections
  • dt-coach.md --- Add Figma export to Next Steps
  • .cspell.json --- Add figjam, whiteboarding, collab to dictionary

Related Issue(s)

Replaces the Mural MCP approach from PR #1221. Addresses the blocking supply chain concern by using an official first-party hosted MCP server with no local dependencies.

Type of Change

Code & Documentation:

  • New feature (non-breaking change adding functionality)
  • Documentation update

AI Artifacts:

  • Reviewed contribution with prompt-builder agent and addressed all feedback
  • Copilot prompt (.github/prompts/*.prompt.md)
  • Copilot agent (.github/agents/*.agent.md)
  • Copilot skill (.github/skills/*/SKILL.md)

Sample Prompts

User Request:

/dt-figma-export project-slug=contoso-retail

Or from the DT Coach agent after completing a synthesis milestone:

"Would you like me to export your synthesis themes to a FigJam board?"

Execution Flow:

  1. User invokes /dt-figma-export or DT Coach offers export at milestone completion
  2. Prompt reads method context files from the project workspace
  3. Determines current DT method (M1--M9) and selects the layout template
  4. Authenticates via Figma OAuth (browser popup, one-time)
  5. Creates a FigJam board or Figma design frame with sections, stickies, and connectors
  6. Returns the board URL to the user

Output Artifacts:

  • FigJam board with method-specific sections (e.g., for M3 Synthesis: Themes, Clusters, Evidence, HMW statements)
  • Or Figma design frame with structured layout for higher-fidelity milestones
  • Board URL printed in chat for immediate access

Success Indicators:

  • Board opens in Figma with correct sections and content
  • Stickies contain actual project data, not placeholders
  • Layout follows the method-specific template from the prompt

Testing

Automated Validation (all passing)

Check Command Result
Markdown lint npm run lint:md 0 errors in contributed files
Spell check npm run spell-check 0 issues
Frontmatter npm run lint:frontmatter 0 errors
Plugin validate npm run plugin:validate 14 collections, 0 errors
Plugin generate npm run plugin:generate 14 plugins regenerated, 0 diff

Live Smoke Test

Connected to Figma MCP and created a test FigJam board with 6 sections and 31 stickies representing M3 Synthesis output. Screenshot verified all sections populated correctly.

Checklist

Required Checks

  • Documentation is updated (if applicable)
  • Files follow existing naming conventions
  • Changes are backwards compatible (if applicable)
  • Tests added for new functionality (if applicable)

AI Artifact Contributions

  • Used /prompt-analyze to review contribution
  • Addressed all feedback from prompt-builder review
  • Verified contribution follows common standards and type-specific requirements

Required Automated Checks

  • Markdown linting: npm run lint:md
  • Spell checking: npm run spell-check
  • Frontmatter validation: npm run lint:frontmatter
  • Skill structure validation: npm run validate:skills
  • Link validation: npm run lint:md-links
  • PowerShell analysis: npm run lint:ps
  • Plugin freshness: npm run plugin:generate

Security Considerations

  • This PR does not contain any sensitive or NDA information
  • Any new dependencies have been reviewed for security issues
  • Security-related scripts follow the principle of least privilege

No third-party packages, no local builds, no credential files. Figma MCP is an official hosted HTTP server operated by Figma Inc, listed in the MCP registry. Authentication is browser-based OAuth managed entirely by Figma.

Additional Notes

  • Additive only --- no existing DT workflows are modified or broken
  • Users who don't configure the Figma MCP server simply won't see export offers
  • Requires a Figma account (Starter plan is free; Enterprise plans have higher rate limits)

Add FigJam board and Figma Design file export capability to the Design
Thinking collection using the official Figma MCP server (hosted HTTP at
mcp.figma.com). No local server installation or credential files required.

New files:
- dt-figma-export.prompt.md: Export DT artifacts to FigJam/Design files
- figma-export.md: User-facing setup and usage documentation

Modified files:
- dt-coach.agent.md: Add Export to Figma handoff button
- dt-method-next.prompt.md: Add FigJam export mention at milestones
- mcp.json: Add figma HTTP server entry
- SKILL.md: Add figma to MCP config tables and templates
- Collections: Register dt-figma-export prompt in both collections
- dt-coach.md: Add Figma export to Next Steps
- .cspell.json: Add figjam, whiteboarding, collab to dictionary
@DigitalMartyn DigitalMartyn requested a review from a team as a code owner March 27, 2026 13:51
@DigitalMartyn
Copy link
Copy Markdown
Contributor Author

@microsoft-github-policy-service agree company="Microsoft"

…-based layout

- replace outdated sticky-based persona card with validated shape-based buildPersona() pattern
- add 9 category rows with headings-above-rows layout using createShapeWithText
- support mixed font ranges for intro block (name, role, body copy)
- add behavioural to cspell dictionary

🎨 - Generated by Copilot
- add buildProjectDetails() reusable function for FigJam boards
- blue section with field rows (Customer, Project, Sprint, Workstream, Prototype)
- positioned at (0, 0) with exercise templates offset below
- update workflow step 5 to reference project details placement

🎨 - Generated by Copilot
@DigitalMartyn DigitalMartyn force-pushed the feature/figma-mcp-integration branch from be43ae7 to 14d3a5f Compare March 27, 2026 19:51
Copy link
Copy Markdown
Contributor

@rezatnoMsirhC rezatnoMsirhC left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks pretty neat! Thanks for working on this and testing! I'm still learning so hopefully my comments make sense.

Comment thread .github/prompts/design-thinking/dt-figma-export.prompt.md Outdated
Comment thread .github/prompts/design-thinking/dt-figma-export.prompt.md
Comment thread .github/prompts/design-thinking/dt-figma-export.prompt.md Outdated
Comment thread .github/prompts/design-thinking/dt-figma-export.prompt.md Outdated
Comment thread .vscode/mcp.json.sample
Comment thread .github/prompts/design-thinking/dt-figma-export.prompt.md Outdated
@codecov-commenter
Copy link
Copy Markdown

codecov-commenter commented Apr 7, 2026

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 87.65%. Comparing base (d3a61d3) to head (e636db5).
⚠️ Report is 23 commits behind head on main.

Additional details and impacted files

Impacted file tree graph

@@            Coverage Diff             @@
##             main    #1222      +/-   ##
==========================================
- Coverage   87.66%   87.65%   -0.02%     
==========================================
  Files          61       61              
  Lines        9329     9329              
==========================================
- Hits         8178     8177       -1     
- Misses       1151     1152       +1     
Flag Coverage Δ
pester 85.22% <ø> (-0.02%) ⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.
see 1 file with indirect coverage changes

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.

Copy link
Copy Markdown
Member

@WilliamBerryiii WilliamBerryiii left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Clean, well-structured integration. The export prompt covers layout, error handling, rate limits, and beta disclosure. Method coverage in dt-coach.agent.md targets the right milestones with send: false. Installer SKILL.md and user docs are solid.

Two collection/documentation gaps to close before merge:

  1. collections/design-thinking.collection.md — The YAML manifests were updated but the descriptive markdown has no bullet for the new prompt. See inline comment on collections/design-thinking.collection.yml.

  2. docs/getting-started/mcp-configuration.md — The canonical MCP setup guide still says "four curated MCP servers" and has no figma section. See inline comment on docs/design-thinking/figma-export.md.

Comment thread collections/design-thinking.collection.yml
Comment thread docs/design-thinking/figma-export.md
DigitalMartyn and others added 4 commits April 8, 2026 09:07
…uide

- add DT Figma Export bullet to design-thinking.collection.md
- update mcp-configuration.md: five servers, figma section, agent table, template JSON
- add figma/figjam keywords and authentication troubleshooting

📝 - Generated by Copilot
- replace figma/* wildcard with explicit tool list in frontmatter
- add figma/ prefix to all tool references for MCP disambiguation
- remove ## Overview heading to match DT prompt conventions
- relocate Step 8 (Report Results) into Workflow Steps sequence
- move Beta Notice into Prerequisites for early visibility

🔧 - Generated by Copilot
WilliamBerryiii and others added 4 commits April 14, 2026 20:17
- fix markdown table alignment in dt-figma-export prompt, figma-export docs, and mcp-configuration guide
- regenerate design-thinking and hve-core-all plugins to include dt-figma-export entry

🔧 - Generated by Copilot
Resolves frontmatter validation warning (Missing standard Copilot footer) that was failing CI under WarningsAsErrors.
@WilliamBerryiii WilliamBerryiii merged commit 1a84554 into microsoft:main Apr 22, 2026
45 of 46 checks passed
WilliamBerryiii pushed a commit that referenced this pull request Apr 24, 2026
## Pre-Release 3.3.101

### ✨ Features

- add removed maturity tier and retire owasp-docker (#1444)
- add evaluation dataset creator (#1279)
- align RAI planner with guide, remove scoring, improve UX (#1287)
- add PSGallery staleness check and BOM cleanup (#1379)
- ISA-95 network planner agent (#1177)
- auto-generate collection.md with maturity filtering (#1316)
- add folder-consistency check and standardize WARN outp… (#1350)
- add synth-data-generate prompt to data-science collection (#1419)
- add canonical deck workflow and customer-card rendering for design
thinking (#1413)
- add Figma MCP integration for DT artifact export (#1222)
- introduce `owasp-docker` (#1245)
- replace hve-core-specific references with portable discovery-based
language (#1335)
- introduce `owasp-cicd` (#1246)
- add secure-by-design knowledge skill (#1223)
- introduce `owasp-infrastructure` (#1244)
- introduce `owasp-mcp` (#1207)
- add OutputPath parameter to Invoke-LinkLanguageCheck.ps1 (#1229)
- add -OutputPath parameter to Validate-SkillStructure.ps1 (#1225)
- add maintainer-only skip-review label guard (#1293)
- add extension collections overview and integrate into getting started
flow (#950)
- add agentic workflows for automated issue triage, implementation, PR
review, dependency review, and doc-staleness detection (#1219)
- consolidate package-lock.json version sync into
Update-VersionFiles.ps1 (#1240)
- add standards code review agent and full review orchestrator (#1174)
- standardize pytest-mock as Python mocking framework (#1170)
- add Jira backlog workflows and Jira/GitLab skills (#978)
- add centralized version bump script and supply-chain attestation
(#1183)

### 🐛 Bug Fixes

- pin PowerShell-Yaml to 0.4.7 across all install sites (#1378)
- close fork-PR/workflow-file-PR secret-strip gap and normalize
upload-artifact version (#1421)
- replace stream-based lookahead with array indexing in
list-changed-files.sh (#1376)
- centralize ISO 8601 timestamp regex in CIHelpers (#1343)
- update stale documentation date in release-process.md (#1363)
- pin basic-ftp to 5.3.0 to resolve GHSA-rp42-5vxx-qpwr (#1374)
- add bot filter to dependency PR review workflow (#1362)
- resolve pip-audit findings in powerpoint, gitlab, and jira skill lock
files (#1360)
- standardize Timestamp JSON key casing across all lint result files
(#1314)
- add synchronize trigger to PR Review workflow (#1323)
- standardize timestamp in Validate-SkillStructure.ps1 to use
Get-StandardTimestamp (#1280)
- add parallel subagent dispatch and structured JSON contracts to
code-review-full (#1304)
- standardize timestamp in SecurityHelpers.psm1 to use
Get-StandardTimestamp (#1284)
- standardize timestamps in Test-DependencyPinning.ps1 and
SecurityClasses.psm1 (#1282)
- derive collection artifact counts from YAML at build time (#1275)
- standardize timestamp in FrontmatterValidation.psm1 to use
Get-StandardTimestamp (#1285)
- standardize timestamp in Markdown-Link-Check.ps1 to use
Get-StandardTimestamp (#1283)
- escape hyphens in Mermaid diagram on Collections page (#1262)
- add summary timestamp to PSScriptAnalyzer output (#1211)
- fix plugin compatibility and robustness for coding-standards code
review agents (#1289)
- standardize timestamp in Test-CopyrightHeaders.ps1 to use
Get-StandardTimestamp (#1278)
- standardize timestamp in Invoke-YamlLint.ps1 to use
Get-StandardTimestamp (#1270)
- standardize timestamp in Invoke-LinkLanguageCheck.ps1 to use
Get-StandardTimestamp (#1264)
- fix dependency-review path filters and sparse-checkout cone mode
(#1259)
- replace invalid bare tool names with official tool identifiers (#1198)
- fix broken links and remove orphaned reference in code review docs
(#1257)
- exclude Python env dirs from skill validation warnings (#1255)
- pin happy-dom and serialize-javascript to resolve Dependabot
vulnerabilities (#1253)
- remove Mermaid diagram and add missing collection cards (#1247)
- disable MCP servers by default to prevent token limit errors (#1144)
- sync package-lock.json after pre-release version bump (#1236)
- separate mermaid node declarations and add dynamic diagram generation
with tests (#1215)
- replace anchor links in meeting-analyst with bold text references
(#1201)
- remove recursive symlinks in jira and gitlab skill directories (#1233)
- validate-installation scripts now check .github/skills directory
(#1010) (#1206)
- resolve npm audit vulnerabilities via dependency overrides (#1200)
- add post-release triggers to scorecard workflow (#1186)
- add missing .md extensions to relative links in agent documentation
(#1180)

### 📚 Documentation

- broaden Security Review description beyond OWASP (#1385)
- document maintainer advisory mode and skip-review label guard (#1386)
- document ExcludePaths/OutputPath for Invoke-LinkLanguageCheck (#1383)
- CLI getting-started: clarify plugin install commands as alternatives
(-all vs base) (#1251)

### ♻️ Refactoring

- align agent and prompt folder names to collection identifier (#1210)

### 🔧 Maintenance

- pin PSScriptAnalyzer to 1.25.0 and sync stale workflow version
comments (#1389)
- bump lxml from 6.0.2 to 6.1.0 in
/.github/skills/experimental/powerpoint (#1424)
- bump @vscode/vsce from 3.7.1 to 3.9.1 in the npm-dependencies group
(#1390)
- bump the github-actions group across 1 directory with 7 updates
(#1391)
- bump follow-redirects from 1.15.11 to 1.16.0 in /docs/docusaurus
(#1356)
- upgrade Node.js from 20 to 24 and bump cspell to v10 (#1353)
- bump basic-ftp from 5.2.0 to 5.2.1 (#1324)
- update github/gh-aw-actions requirement to
536ea1bad8c6715d098a9dc1afea8d403733acfe in the github-actions group
across 1 directory (#1298)
- update security instruction attributions and compliance (#1294)
- bump the npm-dependencies group with 2 updates (#1297)
- pre-release 3.3.41 (#1252)
- streamline RAI Planner phase structure and documentation (#1273)
- bump happy-dom from 20.8.8 to 20.8.9 in /docs/docusaurus (#1237)
- pre-release 3.3.27 (#1191)
- bump pygments from 2.19.2 to 2.20.0 in /.github/skills/gitlab/gitlab
(#1234)
- bump path-to-regexp from 0.1.12 to 0.1.13 in /docs/docusaurus (#1226)
- bump the github-actions group with 4 updates (#1231)
- add missing folders and alphabetize location lists (#1193)
- bump brace-expansion (#1224)
- bump handlebars from 4.7.8 to 4.7.9 in /docs/docusaurus (#1217)
- bump brace-expansion from 5.0.3 to 5.0.5 in /docs/docusaurus (#1213)
- pre-release 3.3.10 (#1187)
- bump markdownlint-cli2 from 0.21.0 to 0.22.0 in the npm-dependencies
group (#1175)
- bump the github-actions group with 3 updates (#1176)
- pre-release 3.3.1 (#1165)

---
*Managed automatically by pre-release workflow.*

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants