Intermediate

Google Stitch Integration

Learn how to export designs to production code, set up developer handoff workflows, manage design tokens, and integrate with your team's development pipeline.

Export to Code

One of Stitch's most powerful features is its ability to generate production-ready code from your designs. Stitch supports multiple output targets:

HTML/CSS Export

Generated HTML/CSS 
<!-- Generated by Google Stitch -->
<div class="card card--elevated">
  <img class="card__media"
       src="hero-image.jpg"
       alt="Product preview" />
  <div class="card__content">
    <h3 class="card__title">Premium Plan</h3>
    <p class="card__subtitle">$29/month</p>
    <p class="card__body">
      Unlimited access to all features.
    </p>
  </div>
  <div class="card__actions">
    <button class="btn btn--filled">
      Subscribe
    </button>
  </div>
</div>

React Export

Generated React Component 
// Generated by Google Stitch
import React from 'react';
import styles from './PricingCard.module.css';

interface PricingCardProps {
  title: string;
  price: string;
  description: string;
  onSubscribe: () => void;
}

export const PricingCard: React.FC<PricingCardProps> = ({
  title, price, description, onSubscribe
}) => (
  <div className={styles.card}>
    <img className={styles.media}
         src="hero-image.jpg"
         alt="Product preview" />
    <div className={styles.content}>
      <h3 className={styles.title}>{title}</h3>
      <p className={styles.subtitle}>{price}</p>
      <p className={styles.body}>{description}</p>
    </div>
    <div className={styles.actions}>
      <button className={styles.btnFilled}
              onClick={onSubscribe}>
        Subscribe
      </button>
    </div>
  </div>
);

Flutter Export

Generated Flutter Widget 
// Generated by Google Stitch
class PricingCard extends StatelessWidget {
  final String title;
  final String price;
  final String description;
  final VoidCallback onSubscribe;

  const PricingCard({
    required this.title,
    required this.price,
    required this.description,
    required this.onSubscribe,
  });

  @override
  Widget build(BuildContext context) {
    return Card(
      elevation: 2,
      child: Column(
        children: [
          Image.asset('assets/hero-image.jpg'),
          Padding(
            padding: EdgeInsets.all(16),
            child: Column(
              children: [
                Text(title, style: Theme.of(context)
                    .textTheme.headlineSmall),
                Text(price, style: Theme.of(context)
                    .textTheme.titleMedium),
                Text(description),
              ],
            ),
          ),
          FilledButton(
            onPressed: onSubscribe,
            child: Text('Subscribe'),
          ),
        ],
      ),
    );
  }
}
✅
Code quality: Stitch generates clean, well-structured code that follows platform conventions. HTML uses semantic elements, React uses TypeScript with proper props, and Flutter follows Material widget patterns.

Developer Handoff

Stitch streamlines the design-to-development transition with dedicated handoff tools:

Feature Description
Inspect Mode Developers can inspect any element to see its dimensions, spacing, colors, typography, and CSS properties
Redlines Automatic measurement overlays showing distances between elements, padding, and margins
Asset Download Developers can download any asset in the required format and resolution directly from the handoff view
Style Guide Auto-generated style guide documenting all colors, typography, spacing, and components used in the project
Component Specs Detailed specifications for each component including states, variants, and interaction behaviors

Design Tokens

Design tokens bridge the gap between design and code. Stitch exports tokens in multiple formats:

CSS Custom Properties Export 
/* Generated by Google Stitch */
:root {
  /* Colors */
  --md-sys-color-primary: #6750A4;
  --md-sys-color-on-primary: #FFFFFF;
  --md-sys-color-secondary: #625B71;
  --md-sys-color-surface: #FFFBFE;
  --md-sys-color-error: #B3261E;

  /* Typography */
  --md-sys-typescale-headline-large: 400 32px/40px Roboto;
  --md-sys-typescale-body-large: 400 16px/24px Roboto;

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;

  /* Elevation */
  --md-sys-elevation-1: 0 1px 3px rgba(0,0,0,0.12);
  --md-sys-elevation-2: 0 2px 6px rgba(0,0,0,0.12);
}

Version Control

Stitch integrates with your existing version control workflows:

  • Built-in Versioning: Automatic version history with named checkpoints and the ability to compare any two versions side by side.
  • Branch-Based Design: Create design branches for experiments and features, then merge approved changes back to the main design.
  • Git Integration: Sync design tokens and exported code to your Git repository automatically when designs change.
  • Change Log: Auto-generated change logs documenting what changed between versions, who made changes, and when.

Team Collaboration

Stitch is built for team collaboration with Google-style real-time editing:

  • Multi-User Editing: Multiple designers can work on the same project simultaneously with real-time cursors and changes.
  • Component Libraries: Share component libraries across projects and teams for consistent design language.
  • Approval Workflows: Set up review and approval processes for design changes before they reach development.
  • Team Spaces: Organize projects into team spaces with shared settings, permissions, and design systems.

Plugin Ecosystem

Extend Stitch's capabilities with plugins from the marketplace:

📷

Content Plugins

Unsplash for stock photos, Lorem Ipsum generators, avatar creators, and icon packs for realistic mockups.

🔧

Developer Plugins

Tailwind CSS export, Storybook integration, GitHub sync, and accessibility checkers.

📊

Analytics Plugins

Design analytics, component usage tracking, and design system health monitoring.

API Access

Automate design operations with the Stitch API:

Stitch API Example (JavaScript) 
// Export design tokens programmatically
const response = await fetch(
  'https://api.stitch.google.com/v1/projects/PROJECT_ID/tokens',
  {
    headers: {
      'Authorization': `Bearer ${API_KEY}`,
      'Accept': 'application/json'
    }
  }
);

const tokens = await response.json();
console.log(tokens.colors.primary); // "#6750A4"

// Generate a component from description
const generated = await fetch(
  'https://api.stitch.google.com/v1/generate',
  {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${API_KEY}`,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      prompt: "A user profile card with avatar and stats",
      format: "react",
      designSystem: "material-design-3"
    })
  }
);
📚
Next up: In the Best Practices lesson, you'll learn design system strategies, accessibility guidelines, performance optimization, and team collaboration patterns for getting the most out of Stitch.