Design systems, variables & theming
Maintain tokens, variants and themes across a library.
20 project-authored proposals · taxonomy v1.1 · 0 new benchmark runs. Verifiers and partial-credit rules below are designs, not executed results.
- Typical applications
- Figma · Sketch
- Class GUI-need label
HY· Hybrid
Task proposals · 20
Expand to inspect the complete original wording and proposed checks. Original proposal text remains English in both interfaces.
R06.08.01.02-T01 Create a light/dark color variable collection and bind layers
Original instruction
In Figma file 'DS Core' (Professional test team), create variable collection 'Color' with modes Light and Dark and the 12 tokens in input/color_tokens.csv (e.g. bg/surface, text/primary, border/subtle), then bind the fills/strokes of the 30 layers listed in input/bind_list.csv to the right tokens.
- Platforms
web· Any OS (web)- Applications
- Figma
- Interfaces
brow· Browser- GUI need · task setting
HY· Hybrid- GUI need · ordinary access
G2· GUI-essential- Interaction primitives
click· Point & clicktype· Text & forms- Work product
WP03· Visual layout- Conditions
licensed· Licensed pro app- Proposed difficulty
- 3 / 5
Proposed verifier
REST GET /v1/files/:key/variables/local: collection with 2 modes named exactly, 12 variables with per-mode values equal to CSV (hex exact); node tree: each listed layer's fill/stroke boundVariables points to the expected variable id. No REST write token issued; plugin-run log empty.
Proposed partial credit
25% collection and modes; 30% token values; 45% layer bindings.
R06.08.01.02-T02 Build a Button component set with size and state variants
Original instruction
In Figma file 'DS Core', build component set 'Button' with variant properties Size {S, M, L} x State {Default, Hover, Pressed, Disabled} (12 variants), a boolean property 'hasIcon' toggling a leading icon, and a text property 'Label'. Heights 32/40/48, horizontal padding 12/16/20, auto-layout.
- Platforms
web· Any OS (web)- Applications
- Figma
- Interfaces
brow· Browser- GUI need · task setting
HY· Hybrid- GUI need · ordinary access
G2· GUI-essential- Interaction primitives
click· Point & clickdrag· Drag & droptype· Text & forms- Work product
WP03· Visual layout- Conditions
- None declared
- Proposed difficulty
- 3 / 5
Proposed verifier
REST: COMPONENT_SET 'Button' with 12 variants and exact property names/values; componentPropertyDefinitions include BOOLEAN hasIcon bound to the icon visibility and TEXT Label bound to the text; heights and paddings per size; state fills differ per spec table; auto-layout on each variant.
Proposed partial credit
30% variant matrix; 25% boolean and text properties; 30% sizing per spec; 15% state styling.
R06.08.01.02-T03 Replace hard-coded colors with the nearest tokens
Original instruction
Four screens in Figma file 'Legacy App' use 214 hard-coded hex fills. Replace each with a binding to the nearest token in the 'Color' collection (ΔE2000 <= 1 required; flag the 6 colors with no match by adding them to a page 'Unmatched' as swatches) without detaching instances or changing the render.
- Platforms
web· Any OS (web)- Applications
- Figma
- Interfaces
brow· Browser- GUI need · task setting
HY· Hybrid- GUI need · ordinary access
G2· GUI-essential- Interaction primitives
click· Point & clickvis· Visual judgment- Work product
WP03· Visual layout- Conditions
licensed· Licensed pro applong· Long-horizon- Proposed difficulty
- 4 / 5
Proposed verifier
REST: every fill in the 4 screens is either bound to a variable whose value is within ΔE2000 <= 1 of the original hex, or belongs to the GT unmatched set and appears as a swatch on 'Unmatched'; instance count unchanged; render SSIM >= 0.995 vs before.
Proposed partial credit
50% fills bound to correct tokens; 20% unmatched handled; 15% no detaching; 15% render unchanged.
R06.08.01.02-T04 Bind spacing variables to auto-layout gaps and padding
Original instruction
In Figma file 'DS Core', create number collection 'Spacing' (space-4, 8, 12, 16, 24, 32) and bind the auto-layout gap and padding values of the 6 components on page 'Components' (Card, ListItem, Modal, Toast, Input, Button) to the matching variables; values must not change.
- Platforms
web· Any OS (web)- Applications
- Figma
- Interfaces
brow· Browser- GUI need · task setting
HY· Hybrid- GUI need · ordinary access
G2· GUI-essential- Interaction primitives
click· Point & clicktype· Text & forms- Work product
WP03· Visual layout- Conditions
- None declared
- Proposed difficulty
- 3 / 5
Proposed verifier
REST variables: 6 FLOAT variables with exact values; nodes: itemSpacing and padding fields of every auto-layout node in the 6 components have boundVariables to the variable matching the current value (100% of GT fields); computed values unchanged.
Proposed partial credit
30% spacing collection; 60% bindings coverage; 10% values unchanged.
R06.08.01.02-T05 Create a typography scale of text styles
Original instruction
In Figma create 8 text styles from input/type_scale.csv (Display, H1, H2, H3, Body/L, Body/M, Caption, Overline) using Inter, a 1.25 modular scale from 16 px, line heights per CSV, letter spacing for Overline +8%, and apply them to the specimen frame 'Type Specimen'.
- Platforms
web· Any OS (web)- Applications
- Figma
- Interfaces
brow· Browser- GUI need · task setting
HY· Hybrid- GUI need · ordinary access
G2· GUI-essential- Interaction primitives
click· Point & clicktype· Text & forms- Work product
WP03· Visual layout- Conditions
- None declared
- Proposed difficulty
- 2 / 5
Proposed verifier
REST styles: 8 TEXT styles with exact names; fontFamily Inter; font sizes per CSV (16 x 1.25^n rounded per CSV); line heights and letter spacing exact; specimen text nodes reference the right style ids.
Proposed partial credit
50% style definitions; 30% applied in specimen; 20% naming.
R06.08.01.02-T06 Import a Tokens Studio JSON as variables and styles
Original instruction
Import input/tokens.json (Tokens Studio format: primitives, semantic aliases, 2 themes) into Figma file 'DS Import' so primitives become one collection, semantic tokens a second collection aliasing primitives with modes Light/Dark, and typography tokens text styles. Use the Tokens Studio plugin or manual entry.
- Platforms
web· Any OS (web)- Applications
- Figma · Tokens Studio
- Interfaces
brow· Browser- GUI need · task setting
HY· Hybrid- GUI need · ordinary access
G2· GUI-essential- Interaction primitives
click· Point & clicktype· Text & formsmulti· Cross-app- Work product
WP03· Visual layout- Conditions
licensed· Licensed pro app- Proposed difficulty
- 3 / 5
Proposed verifier
REST variables: primitives collection values match JSON; semantic variables are VARIABLE_ALIAS to the correct primitive per mode (100% of GT aliases); modes named Light/Dark; text styles match typography tokens; no hard-coded duplicates of aliased values.
Proposed partial credit
25% primitives; 40% semantic aliases per mode; 20% typography styles; 15% no duplicates.
R06.08.01.02-T07 Set up multi-brand theming with aliased semantic tokens
Original instruction
Extend Figma file 'DS Core' to support two brands: add modes 'Brand A' and 'Brand B' to a new 'Brand' collection of primitives, make semantic 'Color' tokens alias brand primitives, and set the 'Promo Page' frame to Brand B / Dark so it renders per ref/promo_brandB_dark.png.
- Platforms
web· Any OS (web)- Applications
- Figma
- Interfaces
brow· Browser- GUI need · task setting
HY· Hybrid- GUI need · ordinary access
G2· GUI-essential- Interaction primitives
click· Point & clicktype· Text & formsvis· Visual judgment- Work product
WP03· Visual layout- Conditions
licensed· Licensed pro app- Proposed difficulty
- 4 / 5
Proposed verifier
REST variables: Brand collection with 2 modes and values per input/brands.csv; semantic tokens alias brand primitives (not hex) for all 12 colors; frame explicitVariableModes set to Brand B and Dark; render SSIM >= 0.97 vs reference.
Proposed partial credit
25% brand primitives; 35% aliasing; 20% frame modes; 20% render match.
R06.08.01.02-T08 Publish a library change and update consumer files
Original instruction
In 'DS Core' change component 'Card' (corner radius 8 -> 12, shadow token updated), publish the library with a description, then in consumer files 'App iOS' and 'App Web' accept the update so all Card instances reflect it without losing overrides.
- Platforms
web· Any OS (web)- Applications
- Figma
- Interfaces
brow· Browser- GUI need · task setting
HY· Hybrid- GUI need · ordinary access
G2· GUI-essential- Interaction primitives
click· Point & clickmulti· Cross-app- Work product
WP08· App/system state- Conditions
licensed· Licensed pro app- Proposed difficulty
- 3 / 5
Proposed verifier
REST: DS Core component Card has radius 12 and new effect style; library publish version exists with description; in both consumer files every Card instance references the new component version (componentId/key latest) with radius 12; text overrides identical to before.
Proposed partial credit
25% component edited; 20% published with description; 40% both consumers updated; 15% overrides kept.
R06.08.01.02-T09 Expose nested instance and text properties on a card component
Original instruction
Refactor component 'Card/Article' in Figma so consumers can change the nested 'Avatar' size variant, the 'Badge' instance (instance-swap property preferred-values: Badge/New, Badge/Sale), the title and excerpt text (text properties) and toggle the image (boolean), without detaching. Update the 5 existing instances to use these properties.
- Platforms
web· Any OS (web)- Applications
- Figma
- Interfaces
brow· Browser- GUI need · task setting
HY· Hybrid- GUI need · ordinary access
G2· GUI-essential- Interaction primitives
click· Point & clicktype· Text & forms- Work product
WP03· Visual layout- Conditions
- None declared
- Proposed difficulty
- 3 / 5
Proposed verifier
REST componentPropertyDefinitions: INSTANCE_SWAP with the 2 preferred values, TEXT title/excerpt, BOOLEAN image, nested instance Avatar exposed (isExposedInstance); the 5 instances set properties matching GT values; no detached copies.
Proposed partial credit
45% property definitions; 20% nested exposure; 25% instances updated; 10% no detaching.
R06.08.01.02-T10 Set up color variables and text styles in Sketch
Original instruction
In fixtures/brand_kit.sketch create 10 Color Variables from input/colors.csv and 6 Text Styles from input/type.csv, apply them to the 'Style Guide' artboard's swatches and specimens, and enable the document as a library. Save output/brand_kit.sketch.
- Platforms
mac· macOS- Applications
- Sketch
- Interfaces
desk· Desktop GUI- GUI need · task setting
HY· Hybrid- GUI need · ordinary access
G2· GUI-essential- Interaction primitives
click· Point & clicktype· Text & forms- Work product
WP03· Visual layout- Conditions
licensed· Licensed pro app- Proposed difficulty
- 2 / 5
Proposed verifier
.sketch JSON: sharedSwatches 10 with exact names and RGBA; sharedTextStyles 6 with font/size/line-height per CSV; artboard layers reference swatch and style IDs; document saved with library enabled flag.
Proposed partial credit
35% color variables; 35% text styles; 20% applied; 10% library flag.
R06.08.01.02-T11 Audit a library for components that bypass tokens
Original instruction
Audit Figma file 'DS Core': find every component layer that uses a hard-coded color, radius or spacing instead of a variable or style, and record each in output/token_audit.csv (component, layer path, property, raw value, suggested token). Do not change the file.
- Platforms
web· Any OS (web)- Applications
- Figma
- Interfaces
brow· Browser- GUI need · task setting
HY· Hybrid- GUI need · ordinary access
G2· GUI-essential- Interaction primitives
click· Point & clicknav· Pan/zoom/scrollhover· Hover & context- Work product
WP02· Records/table- Conditions
- None declared
- Proposed difficulty
- 3 / 5
Proposed verifier
CSV vs GT list (built by the grader from the REST tree): recall >= 0.9 and precision >= 0.9 on (component, layer, property); suggested token correct for >= 80% of matched rows; file version unchanged.
Proposed partial credit
45% recall; 25% precision; 20% token suggestions; 10% file unchanged.
R06.08.01.02-T12 Add breakpoint modes for responsive type and spacing
Original instruction
In Figma file 'DS Core' add collection 'Responsive' with modes Mobile, Tablet, Desktop holding font-size and spacing variables per input/responsive_tokens.csv, bind the text styles' font sizes and the page template's paddings to them, and set frames 'Home/390', 'Home/768', 'Home/1440' to the matching modes.
- Platforms
web· Any OS (web)- Applications
- Figma
- Interfaces
brow· Browser- GUI need · task setting
HY· Hybrid- GUI need · ordinary access
G2· GUI-essential- Interaction primitives
click· Point & clicktype· Text & forms- Work product
WP03· Visual layout- Conditions
licensed· Licensed pro app- Proposed difficulty
- 4 / 5
Proposed verifier
REST variables: 3 modes and per-mode values exact; text styles' fontSize bound to variables; template paddings bound; each frame's explicitVariableModes correct; rendered font sizes in frames match CSV per mode.
Proposed partial credit
25% collection values; 30% style bindings; 20% padding bindings; 25% frame modes.
R06.08.01.02-T13 Build an icon component library with size variants
Original instruction
Turn the 48 SVG icons in fixtures/icons/ into a Figma component library page 'Icons': each icon a component set 'Icon/<name>' with Size 16 and 24 variants, strokes outlined and colored via the token icon/default, consistent 2 px stroke at 24 and 1.5 px at 16, named per notes/icon_naming.md.
- Platforms
web· Any OS (web)- Applications
- Figma
- Interfaces
brow· Browser- GUI need · task setting
G2· GUI-essential- GUI need · ordinary access
G2· GUI-essential- Interaction primitives
drag· Drag & dropgeom· Precise geometryvis· Visual judgment- Work product
WP03· Visual layout- Conditions
- None declared
- Proposed difficulty
- 3 / 5
Proposed verifier
REST: 48 component sets with exact names; each with Size=16 and Size=24 variants of exact bounds; fills bound to icon/default; stroke widths per size (pre-outline geometry check via vector network); rasterized icon IoU vs source >= 0.95. Plugins (incl. icon-import and development plugins) are disabled for the agent's account and no personal access token is issued.
Proposed partial credit
30% component sets and names; 20% size variants; 25% token-bound color; 25% fidelity.
R06.08.01.02-T14 Create the color variables via the Plugin API (control pair of T01)
Original instruction
Control pair of T01: write and run a Figma development plugin that creates the same 'Color' collection (Light/Dark, 12 tokens from input/color_tokens.csv) and binds the 30 listed layers, in a copy of 'DS Core', with no manual canvas edits.
- Platforms
web· Any OS (web)- Applications
- Figma Plugin API
- Interfaces
api· API/SDK- GUI need · task setting
AP· API-sufficient- GUI need · ordinary access
AP· API-sufficient- Interaction primitives
code· Code & commands- Work product
WP03· Visual layout- Conditions
licensed· Licensed pro app- Proposed difficulty
- 2 / 5
Proposed verifier
Same checks as T01; plugin-run log must show the plugin and version history no manual edits. Scored side by side with T01 for the GUI-vs-API delta.
Proposed partial credit
25% collection and modes; 30% token values; 45% layer bindings.
R06.08.01.02-T15 Deprecate legacy components and swap instances across files
Original instruction
In 'DS Core' move the 9 legacy components listed in notes/deprecate.csv to a page 'Deprecated' with a '[Deprecated]' prefix, publish, then in consumer files 'App iOS', 'App Web' and 'Marketing' swap all their instances to the replacements in the CSV, preserving overrides.
- Platforms
web· Any OS (web)- Applications
- Figma
- Interfaces
brow· Browser- GUI need · task setting
HY· Hybrid- GUI need · ordinary access
G2· GUI-essential- Interaction primitives
click· Point & clickmulti· Cross-appnav· Pan/zoom/scroll- Work product
WP08· App/system state- Conditions
licensed· Licensed pro applong· Long-horizonmultiapp· Multi-app- Proposed difficulty
- 4 / 5
Proposed verifier
REST: 9 components renamed and on the Deprecated page; library published; in the 3 consumer files 0 instances of deprecated keys remain and the replacement count equals the original count; text overrides preserved >= 95%; renders SSIM >= 0.97 vs before (replacement visuals equivalent).
Proposed partial credit
20% deprecation in library; 15% publish; 45% instances swapped; 20% overrides/render kept.
R06.08.01.02-T16 Fix dark-mode token values to meet contrast
Original instruction
Switching Figma file 'Banking UI' to Dark mode produces 17 text/background pairs below WCAG AA. Adjust only Dark-mode values of semantic tokens (never Light) so every text/background pair in the 8 screens meets 4.5:1 (body) or 3:1 (large) in both modes, keeping hue within 10 deg of the original.
- Platforms
web· Any OS (web)- Applications
- Figma
- Interfaces
brow· Browser- GUI need · task setting
HY· Hybrid- GUI need · ordinary access
G2· GUI-essential- Interaction primitives
click· Point & clickvis· Visual judgment- Work product
WP03· Visual layout- Conditions
licensed· Licensed pro app- Proposed difficulty
- 4 / 5
Proposed verifier
Grader renders all 8 screens in both modes and computes contrast for every text node vs underlying background: 100% pass; Light-mode variable values unchanged; Dark values hue within 10 deg of original; no node rebound to different tokens.
Proposed partial credit
50% contrast pass rate; 20% Light untouched; 15% hue constraint; 15% bindings unchanged.
R06.08.01.02-T17 Export variables as W3C design tokens and CSS
Original instruction
Export the 'Color', 'Spacing' and 'Radius' collections of 'DS Core' as W3C Design Tokens format output/tokens.json (with mode-specific values as separate theme files) and output/tokens.css with :root and [data-theme='dark'] custom properties, using Dev Mode or a plugin, then fix names to kebab-case.
- Platforms
web· Any OS (web)- Applications
- Figma · Tokens Studio
- Interfaces
brow· Browser- GUI need · task setting
HY· Hybrid- GUI need · ordinary access
G2· GUI-essential- Interaction primitives
click· Point & clickmulti· Cross-appcode· Code & commands- Work product
WP02· Records/table- Conditions
- None declared
- Proposed difficulty
- 3 / 5
Proposed verifier
tokens.json validates against the DTCG schema ($value/$type); every variable present with values per mode; aliases preserved as references; tokens.css custom properties match JSON values; names kebab-case; dark theme block present.
Proposed partial credit
35% DTCG JSON correctness; 25% aliases; 25% CSS output; 15% naming.
R06.08.01.02-T18 Build a starter design system for a product team
Original instruction
From input/startup_brand.pdf build a design system in a new Figma file: primitive and semantic color variables (Light/Dark), spacing and radius variables, 8 text styles, components Button, Input, Checkbox, Select, Card, Modal, Toast with variants and properties, a documentation page per component, published as a library.
- Platforms
web· Any OS (web)- Applications
- Figma
- Interfaces
brow· Browser- GUI need · task setting
HY· Hybrid- GUI need · ordinary access
G2· GUI-essential- Interaction primitives
click· Point & clickdrag· Drag & droptype· Text & forms- Work product
WP03· Visual layout- Conditions
licensed· Licensed pro applong· Long-horizon- Proposed difficulty
- 5 / 5
Proposed verifier
REST: collections/modes present with aliasing; 7 components with variant matrices per brief; every component fill/spacing/radius bound to variables (>= 95% of properties); text uses styles; doc pages exist; library published. VLM rubric for brand fidelity (15%).
Proposed partial credit
25% variables and aliasing; 35% components; 25% binding coverage (15 pts) and docs/publish (10 pts); 15% rubric.
R06.08.01.02-T19 Merge two design libraries after a team reorganization
Original instruction
Teams A and B maintain 'DS-A' and 'DS-B' Figma libraries with overlapping tokens and components. Create 'DS-Unified': dedupe tokens (merge values within ΔE2000 <= 2 per notes/merge_rules.md), keep the A naming scheme, map each B component to an A equivalent or migrate it, and swap instances in 'Product B' to the unified library.
- Platforms
web· Any OS (web)- Applications
- Figma
- Interfaces
brow· Browser- GUI need · task setting
HY· Hybrid- GUI need · ordinary access
G2· GUI-essential- Interaction primitives
click· Point & clickmulti· Cross-appnav· Pan/zoom/scroll- Work product
WP03· Visual layout- Conditions
licensed· Licensed pro applong· Long-horizonmultiapp· Multi-app- Proposed difficulty
- 5 / 5
Proposed verifier
REST: unified collection token count equals GT deduped count (+/- 2) with values per rules; mapping table output/mapping.csv covers all B items; Product B has 0 instances from DS-B and render SSIM >= 0.95 vs before; no orphaned variable bindings.
Proposed partial credit
30% token dedupe; 25% component mapping; 30% Product B migrated; 15% no broken bindings.
R06.08.01.02-T20 Build a stateful input-field component system with density modes
Original instruction
In 'DS Core' build component set 'Input' with variants Type {Text, Password, Search, Select} x State {Default, Focus, Error, Disabled}, properties for label, helper text (boolean + text), leading icon swap, and bind all colors, radii and paddings to variables, with a 'Density' collection (Comfortable/Compact) changing heights 48/36 and paddings.
- Platforms
web· Any OS (web)- Applications
- Figma
- Interfaces
brow· Browser- GUI need · task setting
HY· Hybrid- GUI need · ordinary access
G2· GUI-essential- Interaction primitives
click· Point & clickdrag· Drag & droptype· Text & forms- Work product
WP03· Visual layout- Conditions
licensed· Licensed pro app- Proposed difficulty
- 5 / 5
Proposed verifier
REST: 16 variants with exact property values; component properties per spec wired to layers; >= 95% of color/radius/padding fields variable-bound; Density modes: instances in Compact frame compute height 36 and Comfortable 48; error state uses danger token on border and helper text.
Proposed partial credit
30% variant matrix; 20% properties; 25% variable bindings; 25% density modes.
Mapped research references
No benchmark reference is assigned to this class in the current mapping.