Skip to content

Samsen Internal Framework

This is Samsen's internal framework content for AI-Assisted Design. It is read-only reference material.

Hybrid Workflow — Figma for Thinking, Claude Code for Shipping

The Principle

Figma and Claude Code are not competing tools. They serve different cognitive modes in the design-to-implementation process:

  • Figma is for visual exploration — "drawing to think." It's where designers discover spatial relationships, test compositions, iterate on visual hierarchy, and communicate intent to stakeholders.
  • Claude Code is for implementation — turning design decisions into production components. It's where those decisions become real, testable, shippable artifacts.

The mistake is treating this as a pipeline (design → hand off → build). It's a loop. Designers move between Figma and Claude Code fluidly, using each tool where it's strongest.

When to Use Figma

Figma excels when the work is:

  • Exploratory — You don't yet know what the right solution looks like. You need to see options side by side, try spatial arrangements, test visual weight.
  • Communicative — You need to show intent to stakeholders, get buy-in, or align a team before implementation begins.
  • Systemic — You're defining or extending the design system itself: new tokens, new component variants, new patterns that need to be formalized.
  • Multi-state — You need to map out all states of a complex interaction (loading, error, empty, populated, edge cases) before committing to code.

When to Use Claude Code

Claude Code excels when the work is:

  • Implementation — The design decision is made. You need it in real code, in the real codebase, using real tokens.
  • Iterative — You need to see how something actually renders in a browser, with real typography, real spacing, real responsive behavior.
  • Maintenance — Updating existing components, refactoring token usage, propagating design system changes across a codebase.
  • Production — The component needs to ship. It needs to match existing architecture, pass linting, work in the dependency tree.

The Workflow in Practice

A typical cycle looks like:

  1. Explore in Figma — Designer creates or refines a component, working with the design system variables. The visual is the thinking tool.
  2. Describe to Claude Code — "Build this card component using our design system tokens. It has a thumbnail, title, description, and action button. Use the spacing-md token for internal padding." Optionally, Claude Code reads the Figma file directly via MCP.
  3. Review in browser — Designer opens the component in the browser (or Storybook). Checks real rendering, responsive behavior, token application.
  4. Iterate via conversation — "The spacing between title and description feels tight. Try spacing-sm instead of spacing-xs." / "The hover state needs a subtle elevation change." / "Add a loading skeleton variant."
  5. Ship — Claude Code commits to a branch, opens a PR. Designer reviews the visual diff. Merge.

This cycle can happen in minutes. The same cycle with a developer typically takes days (due to context switching, ticket queues, and async communication).

The 70/30 Principle

From Samsen Academy Session 5: roughly 70% of a component's implementation can be achieved in the first pass with Claude Code. The remaining 30% is iteration — the refinements that come from reviewing in browser, catching edge cases, and polishing details.

This 70/30 split is important because it sets expectations:

  • AI doesn't produce perfection on the first try. It produces a strong starting point.
  • The designer's value is in the 30% — the judgment calls that make something feel right.
  • The workflow is designed for rapid iteration, not one-shot generation.

Figma Make vs. Claude Code

Figma's own AI capabilities (Figma Make) are optimized for generating design exploration within Figma. Claude Code is optimized for generating production code within real codebases. They're complementary:

  • Figma Make — Good for rapid prototyping, layout exploration, generating design variations within the Figma canvas. Stays in the design tool.
  • Claude Code — Good for production implementation, codebase-aware generation, iterative refinement in browser. Ships to real repos.

The hybrid workflow uses both: Figma Make (or manual Figma work) for the exploration phase, Claude Code for the implementation phase.

See: ../../research/figma-make-vs-claude-code.md