Figma Code-to-Design Workflow Guide

assetactive

Morphism Systems — Code-to-Figma Workflow Guide

The Core Idea

You don't design a logo in code and paste it into Figma. You use Figma as a visual mirror of your code-based design system. The code (React components, CSS tokens, SVG assets) is the source of truth. Figma reflects it for visual work, collaboration, and asset production.

Step 1: Import Design Tokens into Figma

Option A: Tokens Studio Plugin (Recommended)

  1. Install Tokens Studio for Figma (free plugin)

  2. Open design-tokens.css — all your colors, typography, spacing, and radii are defined there

  3. In Tokens Studio, create token sets matching the CSS variables:

    color/bg         → #0e1015
color/surface    → #17191f
color/accent     → #da952f
color/annotation → #d4584a
color/text       → #e3ddd0
...

  4. Map tokens to Figma's native Variables system (color variables, number variables)

  5. Apply tokens to all your Figma components — never use raw hex values

Option B: Manual Figma Variables

  1. Open Figma → Local Variables
  2. Create collections: Colors, Typography, Spacing
  3. Enter each token from design-tokens.css manually
  4. Create modes: Dark (default) and Paper (light)

Token Categories to Import

| Category | Source | Figma Variable Type | |----------|--------|-------------------| | Colors (primary, extended, scholastic) | --color-* | Color | | Spacing | --space-* | Number | | Radii | --radius-* | Number | | Font sizes | --text-* | Number | | Border colors | --border-* | Color | | Status colors | --status-* | Color |

Step 2: Import Logo SVGs

All your logo files are production SVGs. Import them directly:

  1. In Figma, File → Place Image or drag SVG files onto canvas

  2. Import each variant:

    | File | Use | |------|-----| | logo.svg | Primary mark (amber on dark) | | morphism-mark-on-dark.svg | Mark on dark backgrounds | | morphism-mark-on-light.svg | Mark on light/parchment backgrounds | | morphism-mark-transparent.svg | Mark for overlays and compositing | | morphism-mark-mono.svg | Single-color currentColor mark | | morphism-mark-on-paper.svg | Mark on aged paper with noise texture | | morphism-mark-pixel-grid.svg | Construction reference (keep in Brand Core file) | | morphism-wordmark-horizontal.svg | Horizontal lockup (dark) | | morphism-wordmark-horizontal-light.svg | Horizontal lockup (light) | | morphism-wordmark-stacked.svg | Stacked lockup (dark) | | morphism-wordmark-stacked-light.svg | Stacked lockup (light) | | morphism-wordmark-standalone.svg | Wordmark only | | favicon.svg | 32×32 favicon mark | | apple-touch-icon.png | App icon reference |

  3. Convert each to a Figma component:

    • Select the imported SVG group
    • Right-click → Create Component
    • Name it: Logo / Mark / On Dark, Logo / Lockup / Horizontal, etc.
    • Lock the component internals (prevent accidental edits)

  4. Create a Logo / Usage frame showing clear-space rules, minimum sizes, and misuse examples

Step 3: Set Up Typography in Figma

Install Fonts

Make sure these are installed locally or via Google Fonts:

  • Playfair Display (600, 700)
  • Source Sans 3 (400, 500, 600, 700)
  • IBM Plex Mono (300, 400, 600, 700)
  • Press Start 2P (400)

Create Text Styles

In Figma, create these text styles (matching design-tokens.css):

| Style Name | Font | Size | Weight | Line Height | |-----------|------|------|--------|-------------| | Display / Hero | Playfair Display | 48px | 700 | 1.2 | | Display / H2 | Playfair Display | 32px | 700 | 1.2 | | Display / H3 | Playfair Display | 24px | 600 | 1.3 | | Display / Theorem | Playfair Display | 18px | 600 italic | 1.35 | | Body / Large | Source Sans 3 | 17px | 400 | 1.8 | | Body / Small | Source Sans 3 | 14px | 400 | 1.6 | | Body / Marginal | Source Sans 3 | 14px | 400 italic | 1.6 | | Mono / CLI | IBM Plex Mono | 15px | 600 | 1.4 | | Mono / Code | IBM Plex Mono | 14px | 400 | 1.4 | | Mono / Annotation | IBM Plex Mono | 12px | 400 | 1.4 | | Pixel / Caption | Press Start 2P | 10px | 400 | 1.4 |

Step 4: Build Components in Figma

Use the React component library (morphism-platform.jsx) as your visual reference. Build Figma components that match 1:1.

Component Naming Convention

Button / Primary / Default
Button / Primary / Hover
Button / Primary / Disabled
Button / Secondary / Default
Button / Danger / Default
Badge / Pass
Badge / Warning
Badge / Error
Badge / Machine
Badge / Neutral
Metric / Default
Metric / Small
Card / Dark / Default
Card / Dark / Hover
Card / Paper
Terminal / Block
Terminal / Command Line
Evidence / Panel
Evidence / JSON Block
Logo / Mark / On Dark
Logo / Lockup / Horizontal
Logo / Lockup / Stacked
Template / LinkedIn / Feature
Template / GitHub / README Header

Use Variants

Don't duplicate — use Figma's Component Properties and Variants:

  • Button: Properties for Type (primary/secondary/ghost/danger), State (default/hover/disabled), Size (default/small)
  • Badge: Property for Status (pass/warn/error/machine/neutral), Label (text)
  • Card: Property for Theme (dark/paper), State (default/hover)

Use Auto Layout

All reusable components must use Auto Layout. This matches the CSS flexbox/grid behavior in the code.

Step 5: Build Page Templates

Dashboard

The morphism-platform.jsx file contains the full dashboard layout. In Figma:

  1. Create a frame at 1440×900 (desktop) or 1280×800
  2. Add the sidebar (220px wide, Surface background)
  3. Add the main content area with the metric tiles, surface cards, governance loop diagram, and activity feed
  4. Wire up all components from your library

Pages to Build

| Page | What to reference | |------|------------------| | Dashboard (Control Plane) | DashboardPage in the React file | | Policies | PoliciesPage — data table with policy rows | | Evidence | EvidencePage — audit chain + detail panel | | Drift | DriftPage — chart + history table | | Surfaces | SurfacesPage — surface cards + command reference |

Step 6: Build Social & GitHub Templates

Social Post Templates (create in Figma)

| Template | Size | Content | |----------|------|---------| | Launch Announcement | 1080×1350 | Mark + "One control plane" + stats | | Feature Explainer | 1080×1080 | Terminal screenshot + copy | | CLI Snippet | 1200×628 | Terminal block with command output | | Metric Card | 1080×1080 | Metric tiles + brand lockup | | Comparison | 1080×1350 | "Without / With Morphism" split | | Changelog | 1080×1080 | Version badge + changes list |

GitHub Assets

| Asset | Size | Notes | |-------|------|-------| | Org social preview | 1280×640 | Horizontal lockup centered on #0e1015 | | Repo social preview | 1280×640 | Mark + repo name + one-line description | | README header | 1200×300 | Horizontal lockup + tagline | | Architecture diagram | variable | Use the diagram grammar from brand kit | | Terminal frame | variable | Screenshot inside terminal block component |

Step 7: Figma File Structure

Create one Figma project: Morphism Systems — Design System

File 1 — Brand Core

  • 00 Principles — brand principles, personality keywords
  • 01 Logo — all mark variants, lockups, usage rules, misuse
  • 02 Color — token swatches, semantic mapping, usage rules
  • 03 Typography — type specimens, scale reference, rules
  • 04 Spacing — grid system, spacing tokens
  • 05 Textures — paper grain, pixel grid, scan lines references
  • 06 Misuse — what NOT to do

File 2 — Product System

  • 00 Foundations — tokens applied to frames
  • 01 Components — all component variants
  • 02 Dashboard — full dashboard layout
  • 03 Policies — policy table view
  • 04 Evidence — audit trail view
  • 05 Drift — drift detection view
  • 06 Surfaces — surface detail views

File 3 — Website

  • 00 Homepage — hero, sections, CTA
  • 01 Docs — documentation page layout
  • 02 Pricing — pricing cards
  • 03 Blog — article template

File 4 — Social & Content

  • 00 LinkedIn — post templates
  • 01 X/Twitter — card templates
  • 02 GitHub — README headers, repo banners, diagrams

File 5 — Decks

  • 00 Investor — slide masters
  • 01 Pilot — pilot brief template
  • 02 One-Pagers — leave-behind template

Step 8: Keep Code and Figma in Sync

Rules

  1. Tokens are the bridge. When you change a color in CSS, update the Figma variable.
  2. SVGs flow one way: code → export → Figma import. Never redraw the mark in Figma.
  3. Components mirror code. If the React component has 4 states, the Figma component has 4 variants.
  4. Naming must match. Badge / Pass in Figma = <Badge status="pass"> in code.
  5. Weekly sync check. Compare Figma components to React components. Flag drift.

Handoff

For any new component:

  1. Build it in React first (code is truth)
  2. Screenshot or inspect the rendered output
  3. Rebuild in Figma using existing tokens and components
  4. Publish the Figma component to the team library

Files Delivered

| File | Purpose | |------|---------| | design-tokens.css | All CSS custom properties — import into Figma via Tokens Studio | | morphism-brand-kit.jsx | Interactive brand reference (tokens, logo, typography, components, usage rules) | | morphism-platform.jsx | Full dashboard platform (6 pages: dashboard, policies, evidence, drift, surfaces, components) | | figma-workflow.md | This document | | *.svg files | Logo mark and lockup variants — import directly into Figma |

Summary

The workflow is:

Code (source of truth)
  ↓
design-tokens.css → Figma Variables (via Tokens Studio)
  ↓
*.svg logo files → Figma Components (via SVG import)
  ↓
React components → Figma Components (visual match)
  ↓
Dashboard layouts → Figma Page Templates (pixel match)
  ↓
One unified system across code and design

The brand kit React app is your living reference. The platform React app is your production codebase. Figma mirrors both for collaboration, asset export, and visual QA.