Figma to Views JSON: Code Generation

Prerequisites

• Figma MCP Server: Must be active and configured in the workspace context to fetch designs and metadata.
• Chromium Repository: This skill should be executed from inside the root directory of the Chromium repository source code (//src/).

---

1. Discovery & Context Retrieval

When given a Figma design URL (e.g., https://www.figma.com/design/:fileKey/:fileName?node-id=:nodeId):

1. Extract Parameters: Extract the fileKey and the nodeId (replace hyphens with colons, e.g., 128-1951 becomes 128:1951).
2. Retrieve Design Context: Call get_design_context with fileKey and nodeId to fetch the metadata, layout hierarchy, layer styles, and text annotations of the frame.
3. Reference Existing Component Specs: Look up component spec files for relevant components using the project-knowledge skill to map Figma components to Chromium C++ Views components.
4. Reference Token Mapping: Consult the Chrome Design System token mapping using the project-knowledge skill to translate the variables from the Figma design (e.g., desktop/sys/base-colors/base) to equivalent C++ identifiers (ui::kColorSysBase).

---

2. Design-to-Code Gap Auditing

Before writing any code, first check if the user already did an audit of this Figma design against production coding standards within the current chat session's recent history (past 5 commands). If not, perform the audit. Incorporate the feedback from this audit into the following code implementation.

---

3. Views Component Implementation

Implementation Rules

• JSON Schema rules: Read //ui/views/examples/json_view_builder_schema.ms for the rules about which components/properties are available for use.
• Surface & Background Colors: Map Figma variables strictly to their C++ ui::ColorId equivalents as documented in Chrome Design System token mappings.
• Corner Radius Tokens: Do not hardcode arbitrary radius numbers when design system tokens apply. Use CornerRadius as defined in the schema.
• Responsive Layout & Flex Spacing: Use BoxLayout, BoxLayoutView, FlexLayout, FlexLayoutView, TableLayout or TableLayoutView for structured horizontal and vertical stacking, or fully structured tables.
  • Apply consistent spacing and padding using standard InsetsMetric: and SetBetweenChildSpacing(...) and DistanceMetric: values for measurements.
  • Use layout_flex pseudo-property on components in horizontal or vertical layouts to distribute space proportionally.
• Scope: Focus strictly on building the UI. Do not add functionality beyond what is specified in the Figma mockup. If the Figma mockup includes a window frame or top Chrome frame, disregard these.
• Output Location: Save the implementation files inside the out/<ComponentName> directory (relative to the skill directory), unless specified otherwise.
• Builds: For testing, ensure the views_examples target is built in the user's preferred out/<out> directory. Ask the user if multiple are found.
  • MacOS: When building under MacOS, the views_examples target builds the Views Examples app bundle within the out/<out> directory. To run from the command-line, the executable needs to be referenced within the bundle.
• Test: Launch the built views_examples application using the --enable-examples="Views Canvas" switch and the --views-canvas-json-file switch with the quoted path to the JSON file generated in the previous step above. Be sure to launch the views_examples app onto the same GUI output screen as the one the user is logged in with.

File 1: <component_name>.json