Figma to Views: 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

• Surface & Background Colors: Map Figma variables strictly to their C++ ui::ColorId equivalents as documented in Chrome Design System token mappings.
  • Theme Inheritance: The C++ View must adapt automatically to the user's Chrome Appearance setting (e.g. light/dark mode) without hardcoded theme checks.
• Corner Radius Tokens: Do not hardcode arbitrary radius numbers when design system tokens apply. Retrieve standard radii dynamically from views::LayoutProvider.
• Responsive Layout & Flex Spacing: Use views::BoxLayout or views::BoxLayoutView for structured horizontal and vertical stacking.
  • Apply consistent spacing and padding using gfx::Insets::VH(...) and SetBetweenChildSpacing(...).
  • Use SetFlexForView(child, 1) on 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: Do not run any builds.

File 1: <component_name>_view.h

Example Boilerplate:

// Copyright 2026 The Chromium Authors
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

#ifndef CHROME_BROWSER_UI_VIEWS_COMPONENT_NAME_VIEW_H_
#define CHROME_BROWSER_UI_VIEWS_COMPONENT_NAME_VIEW_H_

#include "ui/base/metadata/metadata_header_macros.h"
#include "ui/views/view.h"

// Recreates the Figma design frame using native C++ Views controls and
// Chrome Design System token mappings.
class ComponentNameView : public views::View {
  METADATA_HEADER(ComponentNameView, views::View)

 public:
  ComponentNameView();
  ComponentNameView(const ComponentNameView&) = delete;
  ComponentNameView& operator=(const ComponentNameView&) = delete;
  ~ComponentNameView() override;

  // views::View:
  gfx::Size CalculatePreferredSize(
      const views::SizeBounds& available_size) const override;
};

#endif  // CHROME_BROWSER_UI_VIEWS_COMPONENT_NAME_VIEW_H_

File 2: <component_name>_view.cc

Example Boilerplate:

// Copyright 2026 The Chromium Authors
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

#include "chrome/browser/ui/views/component_name_view.h"

#include <memory>
#include <utility>

#include "base/functional/callback_helpers.h"
#include "ui/base/metadata/metadata_impl_macros.h"
#include "ui/color/color_id.h"
#include "ui/gfx/font_list.h"
#include "ui/gfx/geometry/insets.h"
#include "ui/gfx/geometry/size.h"
#include "ui/views/background.h"
#include "ui/views/layout/box_layout.h"
#include "ui/views/layout/box_layout_view.h"
#include "ui/views/layout/layout_provider.h"
#include "ui/views/view.h"
#include "ui/views/view_class_properties.h"

namespace {

}  // namespace

BEGIN_METADATA(ComponentNameView)
END_METADATA

ComponentNameView::ComponentNameView() {
  // Reference: Chrome Design System token mappings.
  // Map Figma variables to C++ tokens and retrieve standard corner radii.
}