(BUSAN.SASHIMI)
terminal
Weekly Digest // DESIGN_SYSTEMS — Week 32-2026
architectureWeekly Report

Figma Code Connect Improves Agent Output — Week 32 Design Systems

UI component architecture, design tokens, and semantic theming

calendar_todaysummarizeWeek 32-2026
DESIGN TO CODE

Figma Measures Better Agent Code with Code Connect

Figma ran 27 design-to-code cases with and without Code Connect templates. Production-accurate component snippets improved the median quality score from 2 to 3 on a four-point scale, reduced token use by 29.5%, and shortened task duration by 19.6%. Higher component coverage produced the largest gains: agents made fewer broad searches, stopped rebuilding tabs and buttons as raw React and CSS, and imported the intended design-system components with real properties and behavior. The evaluation makes design-system context a measurable agent input rather than an aesthetic preference.

Read Articlearrow_forward
Article · PRODUCT WORKFLOWREAD TIME: 8m

Figma Built Nested Folders through Code-Led Collaboration

Figma's nested-folders project replaced long handoffs with a verification loop. Engineers merged non-breaking prototypes into staging as proposals, a designer pushed selected code changes and focused deeply where craft mattered, and the product manager shifted toward strategy and a hands-on early-access program. The feature still required a ground-up permissions and content-model migration, so bug bashes, cross-functional pairing, data-science analysis, and live customer organizations supplied the quality boundary. The lesson is not that roles disappear, but that trusted teams can move decisions to the person with the best current context.

READ_FULL_LOGarrow_forward
Article · DESIGN TOKENSREAD TIME: 10m

Design Token Linting Works Best as a Phased Contract

An established token system should begin linting in report-only mode, classify structural, quality, and accessibility debt, then clean broken references, cycles, invalid types, and missing shapes before making critical rules block commits. Fast critical checks belong in pre-commit, full validation in CI, and strict enforcement at the release boundary. Non-critical warnings become scheduled backlog, while exceptions record a narrow scope, approver, reason, and expiry. Useful output prioritizes new violations and explains a concrete fix; otherwise contributors learn to bypass or ignore a technically correct but operationally hostile linter.

READ_FULL_LOGarrow_forward
Article · ACCESSIBILITYREAD TIME: 4m

Axe MCP Expands Automated and Authenticated Accessibility Tests

The updated Axe MCP Server automates its keyboard Intelligent Guided Test and adds advanced checks for heading semantics, focus indicators, text contrast, and decorative images. Cookie injection brings authenticated and staging flows into the test surface, while scoped scans target a component or page region and can return a viewport screenshot. Agents can receive remediation guidance for up to 25 issues in one request. Local npx installation, OAuth 2.0, organization-wide WCAG policies, confidence thresholds, and customer-managed on-prem models address rollout and governance.

READ_FULL_LOGarrow_forward
summarizeDigest_Summary

Figma measured Code Connect across 27 design-to-code cases and found that production-accurate component snippets raised median code quality from 2 to 3 on a four-point scale, reduced token use by 29.5%, and shortened task duration by 19.6%. Coverage mattered most: agents with stronger mappings stopped inventing raw tabs and buttons and reached directly for the real design-system components.

Figma's nested-folders team demonstrates the organizational complement to that structured context. Engineers treated code as a proposal, the designer pushed selected changes, and the product manager concentrated on strategic risk and customer feedback. Rough prototypes were allowed onto staging so cross-functional conversations could happen against working software, while permissions, migration behavior, bug bashes, and early-access feedback remained explicit quality gates.

A practical design-token rollout follows the same gradual enforcement model: audit first, fix transformation-breaking references and type errors, block only cleaned-up critical rules, then manage warnings and time-limited exceptions as owned backlog. Whether the contract is a component mapping, an RFC, or a linter rule, it becomes useful only when ownership, rollout state, and actionable failure messages are encoded alongside it.

Axe MCP Server expands that feedback loop into authenticated and dynamic interfaces. Automated keyboard guided tests, advanced focus and contrast rules, cookie injection, component-scoped scans, and batches of up to 25 remediations bring more accessibility evidence into the IDE; organization-level WCAG and confidence policies keep the results consistent.

Key Takeaways
  • Prioritize Code Connect coverage for the components agents encounter most often; Figma's evaluation shows that structured production snippets improve quality while reducing both tokens and time.
  • Introduce token linting in phases: baseline the debt, clean critical structural failures, block new critical regressions, and give every exception an owner and expiry condition.
  • Test accessibility beyond public pages by injecting non-production session cookies, scanning focused components or states, and preserving manual review for issues automation cannot prove.