Framer: Vom Prototyp zur Produktion
Wie Framer sich von einer Prototyping-Bibliothek zum No-Code Website-Builder entwickelte: visuelle Breakpoints, Komponenten-Varianten, CMS-Architektur und AI-Wireframing.
Framer: Vom Prototyp zur Produktion
„Die Lücke zwischen Design und Entwicklung sollte nicht existieren." — Koen Bok, Framer Mitgründer
Framer repräsentiert die vollständige Evolution eines Design-Tools: von der JavaScript-Prototyping-Bibliothek (2014) über die visuelle IDE (Framer X, 2018) bis hin zum vollwertigen No-Code-Website-Builder (2022+). Seine Entwicklung lehrt uns, wie man sich an Nutzerbedürfnisse anpasst und dabei die Kernphilosophie bewahrt.
Warum Framer wichtig ist
Framer löste das „Übergabeproblem", indem es dieses vollständig eliminierte. Anstatt dass Designer Mockups erstellen, die Entwickler nachbauen, gibt Framer produktionsreife Websites direkt aus.
Zentrale Errungenschaften: - Die Lücke zwischen Design und Code vollständig geschlossen - Responsives Design visuell und intuitiv gestaltet - Ein florierendes Template-Marktplatz-Ökosystem aufgebaut - KI integriert, ohne Designprinzipien aufzugeben - 100 Millionen Dollar bei einer Bewertung von 2 Milliarden Dollar eingesammelt (August 2025)
Kernerkenntnisse
- Pivot ohne die Mission aufzugeben - Framer entwickelte sich von einer CoffeeScript-Bibliothek über eine React-IDE zum No-Code-Builder, aber die Kernmission blieb unverändert: die Lücke zwischen Design und Entwicklung eliminieren
- Technische Konzepte visuell darstellen - Responsive Breakpoints, Flexbox und CMS-Schemas werden intuitiv, wenn sie als ziehbare Griffe und visuelle Editoren dargestellt werden
- KI als Gerüst, nicht als Lösung - Wireframer generiert Strukturen, um die Angst vor der leeren Leinwand zu überwinden; Menschen fügen Kreativität und Feinschliff hinzu
- Property Controls statt Duplizierung - Anstatt Komponenten für Varianten zu duplizieren, werden Steuerelemente exponiert, die die Konfiguration ändern und dabei eine einzige Quelle beibehalten
- Produktionsausgabe validiert das Design - Wenn das Design-Tool Produktionscode ausgibt, gibt es keinen „das habe ich nicht so designt"-Übergabemoment
Die Entwicklungsgeschichte
Das Verständnis von Framers Evolution zeigt, wie erfolgreiche Produkte sich anpassen:
2014 (Framer.js) 2018 (Framer X) 2022+ (Framer Sites)
┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐
│ │ │ │ │ │
│ Code-First │ → │ Visual + Code │ → │ Visual-First │
│ Prototyping │ │ React Components│ │ Production │
│ │ │ │ │ │
│ • CoffeeScript │ │ • TypeScript │ │ • No code needed │
│ • Animation lib │ │ • IDE-like │ │ • Built-in CMS │
│ • Designer tools │ │ • Component sys │ │ • AI generation │
│ │ │ │ │ │
└──────────────────┘ └──────────────────┘ └──────────────────┘
Zielgruppe: Designer → Design Engineers → Alle,
die coden die designen die Websites brauchen
Zentrale Erkenntnis: Jeder Pivot erweiterte die Zielgruppe und bewahrte gleichzeitig die Kernmission: die Lücke zwischen Design und Produktion eliminieren.
Pattern-Bibliothek
1. Visuelles Breakpoint-System
Framer transformiert responsives Design von Code zu ziehbaren Griffen und liefert eine bahnbrechende UX für ein traditionell technisches Konzept.
Traditioneller CSS-Ansatz:
/* Entwickler muss sich jeden Breakpoint vorstellen */
@media (max-width: 768px) {
.hero { flex-direction: column; }
}
@media (max-width: 480px) {
.hero { padding: 16px; }
}
Framers visueller Ansatz:
┌─────────────────────────────────────────────────────────────────────────┐
│ Breakpoints │
│ ┌─────────────────────────────────────────────────────────────────────┐ │
│ │ Desktop (1440) │ Tablet (768) │ Mobile (375) │ │
│ │ ────────────────────────┬─────────────────────┬──────────────────── │ │
│ │ ◀ ziehen ▶ ◀ ziehen ▶ │ │
│ └─────────────────────────────────────────────────────────────────────┘ │
│ │
│ Vorschau │
│ ┌──────────────────────────────────────────────┐ │
│ │ │ │
│ │ Hero Section │ ← Layout aktualisiert│
│ │ ──────────── │ sich in Echtzeit │
│ │ │ beim Ziehen │
│ │ [Button] │ │
│ │ │ │
│ └──────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────────────────┘
Designprinzipien in Aktion: - Direkte Manipulation statt abstrakter Konfiguration - Echtzeit-Feedback eliminiert Rätselraten - Visuelle Darstellung entspricht dem mentalen Modell
Implementierungsmuster:
// Breakpoint data structure
const breakpoints = [
{ name: 'Desktop', width: 1440, isDefault: true },
{ name: 'Tablet', width: 768 },
{ name: 'Mobile', width: 375 },
];
// Component stores styles per breakpoint
const componentStyles = {
base: { display: 'flex', gap: 24 },
overrides: {
768: { flexDirection: 'column', gap: 16 },
375: { padding: 16 },
}
};
// Merge styles for current width
function getStylesForWidth(width) {
let styles = { ...componentStyles.base };
for (const [breakpoint, overrides] of Object.entries(componentStyles.overrides)) {
if (width <= parseInt(breakpoint)) {
styles = { ...styles, ...overrides };
}
}
return styles;
}
2. Primary/Instance-Komponentenmuster
Wie Figma verwendet Framer ein Primary-Instance-Modell. Aber Framer erweitert es mit interaktiven Variants und Property Controls.
┌─ Primary Component ─────────────────────────────────────────────────┐
│ │
│ Component Canvas │
│ ┌────────────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ Default State Hover State Pressed State │ │
│ │ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │ │
│ │ │ Button │ → │ Button │ → │ Button │ │ │
│ │ │ bg: #3B82F6 │ │ bg: #2563EB │ │ bg: #1D4ED8 │ │ │
│ │ │ scale: 1 │ │ scale: 1.02 │ │ scale: 0.98 │ │ │
│ │ └──────────────┘ └──────────────┘ └──────────────┘ │ │
│ │ │ │
│ │ Transitions: spring(stiffness: 500, damping: 30) │ │
│ │ │ │
│ └────────────────────────────────────────────────────────────────┘ │
│ │
│ Property Controls │
│ ├─ Label: [text input] │
│ ├─ Variant: [default ▼] [hover] [pressed] │
│ ├─ Size: [small] [medium ●] [large] │
│ └─ Icon: [none ▼] │
│ │
└─────────────────────────────────────────────────────────────────────┘
↓ Instanzen erben alle Variants
┌─ Page Canvas ───────────────────────────────────────────────────────┐
│ │
│ [Button Instance 1] [Button Instance 2] [Button Instance 3] │
│ Label: „Submit" Label: „Cancel" Label: „Learn More" │
│ Size: medium Size: small Size: large │
│ Icon: check Icon: none Icon: arrow │
│ │
└─────────────────────────────────────────────────────────────────────┘
Property Controls API:
// Framer component with property controls
import { addPropertyControls, ControlType } from "framer"
function Button({ label, size, icon }) {
const styles = sizeStyles[size];
return (
<motion.button
className="button"
style={styles}
whileHover={{ scale: 1.02 }}
whileTap={{ scale: 0.98 }}
>
{icon && <Icon name={icon} />}
{label}
</motion.button>
);
}
// Diese erscheinen im rechten Panel, wenn die Komponente ausgewählt ist
addPropertyControls(Button, {
label: {
type: ControlType.String,
title: "Label",
defaultValue: "Button",
},
size: {
type: ControlType.Enum,
title: "Size",
options: ["small", "medium", "large"],
defaultValue: "medium",
},
icon: {
type: ControlType.Enum,
title: "Icon",
options: ["none", "check", "arrow", "plus"],
defaultValue: "none",
},
});
Zentrale Erkenntnis: Property Controls machen Komponenten wiederverwendbar ohne Forking. Ändere die Property, nicht die Komponente.
3. Integrierte CMS-Architektur
Framers CMS behandelt Inhalte als strukturierte Daten, die in visuelle Komponenten fließen.
┌─ CMS Collection: Blog Posts ────────────────────────────────────────┐
│ │
│ Schema │
│ ├─ title: String (required) │
│ ├─ slug: Slug (auto-generated from title) │
│ ├─ author: Reference → Authors │
│ ├─ publishDate: Date │
│ ├─ coverImage: Image │
│ ├─ content: Rich Text │
│ └─ tags: Multi-reference → Tags │
│ │
│ Entries │
│ ┌─────────────────────────────────────────────────────────────────┐ │
│ │ Title │ Author │ Date │ Status │ │
│ ├────────────────────┼────────────┼────────────┼──────────────────┤ │
│ │ Design Systems │ @jane │ Jan 15 │ ● Published │ │
│ │ Component Patterns │ @john │ Jan 12 │ ○ Draft │ │
│ │ Animation Guide │ @jane │ Jan 10 │ ● Published │ │
│ └─────────────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────┘
↓ CMS-Daten fließen in Komponenten
┌─ Collection Page Template ──────────────────────────────────────────┐
│ │
│ ┌─ Blog Card (connected to CMS) ─────────────────────────────────┐ │
│ │ │ │
│ │ ┌──────────────┐ │ │
│ │ │ {coverImage} │ {title} │ │
│ │ │ │ {author.name} · {publishDate} │ │
│ │ │ │ │ │
│ │ └──────────────┘ {tags.map(tag => <Tag />)} │ │
│ │ │ │
│ └────────────────────────────────────────────────────────────────┘ │
│ │
│ Diese Karte wiederholt sich für jeden CMS-Eintrag │
│ │
└─────────────────────────────────────────────────────────────────────┘
Design-Prinzipien: - Trennung von Inhalt und Präsentation - Visuelle Datenbindung (kein Code erforderlich) - Automatische SEO (Meta-Tags aus CMS-Feldern)
4. KI-unterstütztes Design (Wireframer)
Framers KI-Funktionen von 2025 demonstrieren geschmackvolle KI-Integration: KI generiert Ausgangspunkte, Menschen verfeinern.
┌─ Wireframer ────────────────────────────────────────────────────────┐
│ │
│ Prompt: "Landing page for a SaaS product with pricing table" │
│ │
│ [Generate] │
│ │
├─────────────────────────────────────────────────────────────────────┤
│ │
│ Generiertes Layout (bearbeitbarer Wireframe) │
│ ┌─────────────────────────────────────────────────────────────────┐ │
│ │ ╔══════════════════════════════════════════════════════════╗ │ │
│ │ ║ [Logo] Features Pricing About [CTA] ║ │ │
│ │ ╚══════════════════════════════════════════════════════════╝ │ │
│ │ │ │
│ │ ┌────────────────────────────────────────────────────────┐ │ │
│ │ │ Hero Section │ │ │
│ │ │ [Headline placeholder] │ │ │
│ │ │ [Subhead placeholder] │ │ │
│ │ │ [CTA Button] [Secondary] │ │ │
│ │ └────────────────────────────────────────────────────────┘ │ │
│ │ │ │
│ │ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │ │
│ │ │ Starter │ │ Pro ★ │ │ Enterprise │ │ │
│ │ │ $9/mo │ │ $29/mo │ │ Custom │ │ │
│ │ │ ────── │ │ ────── │ │ ────── │ │ │
│ │ │ • Feature │ │ • Feature │ │ • Feature │ │ │
│ │ │ • Feature │ │ • Feature │ │ • Feature │ │ │
│ │ │ [Select] │ │ [Select] │ │ [Contact] │ │ │
│ │ └─────────────┘ └─────────────┘ └─────────────┘ │ │
│ │ │ │
│ └─────────────────────────────────────────────────────────────────┘ │
│ │
│ KI liefert Struktur, Mensch liefert Stil │
│ │
└─────────────────────────────────────────────────────────────────────┘
KI-Philosophie: - Generiert responsive Layouts, keine fertigen Designs - Output ist vollständig bearbeitbar (keine Blackbox) - Überwindet die Angst vor der leeren Leinwand, startet mit Struktur - Menschliche Kreativität wird auf das KI-Gerüst angewandt
5. Auto-Layout-System
Framers Auto-Layout entspricht Figmas, ist aber sofort produktionsreif.
/* Was Designer visuell konfigurieren */
.auto-layout {
/* Richtung */
display: flex;
flex-direction: row; /* oder column */
/* Abstände */
gap: 16px; /* einheitlich */
/* oder gap: 16px 24px; für Zeile/Spalte */
/* Ausrichtung */
justify-content: flex-start;
align-items: center;
/* Verteilung */
/* "Packed" = flex-start */
/* "Space between" = space-between */
/* "Space around" = space-around */
/* Padding (unabhängig pro Seite) */
padding: 24px 32px 24px 32px;
}
/* Verhalten der Kindelemente */
.auto-layout > .child {
/* "Fill" = flex: 1 */
/* "Hug" = flex: 0 0 auto */
/* "Fixed" = width: 200px */
}
Übersetzung des visuellen Editors:
┌─ Auto-Layout Panel ─────────────────────────────────────────────────┐
│ │
│ Richtung ┌───┐ ┌───┐ │
│ │ → │ │ ↓ │ │
│ └───┘ └───┘ │
│ │
│ Ausrichtung ┌───────────────┐ │
│ │ ⬜ ⬜ ⬜ │ (9-Punkt-Raster) │
│ │ ⬜ ⬛ ⬜ │ │
│ │ ⬜ ⬜ ⬜ │ │
│ └───────────────┘ │
│ │
│ Abstand [16] px │
│ │
│ Padding [24] [32] [24] [32] (oben, rechts, unten, links) │
│ │
│ Verteilung [Packed ▼] │
│ │
└─────────────────────────────────────────────────────────────────────┘
Visuelles Design-System
Canvas Chrome
:root {
/* Canvas-Hintergrund */
--canvas-bg: #1E1E1E;
--canvas-grid: rgba(255, 255, 255, 0.03);
/* Auswahl */
--selection-color: #0099FF;
--selection-handle: #FFFFFF;
/* Panels */
--panel-bg: #2D2D2D;
--panel-border: rgba(255, 255, 255, 0.08);
/* Text */
--text-primary: #FFFFFF;
--text-secondary: #9B9B9B;
--text-placeholder: #6B6B6B;
/* Accents */
--accent-primary: #0099FF;
--accent-success: #00D084;
--accent-warning: #FFBB00;
--accent-error: #FF5555;
}
Typografie (UI)
:root {
--font-ui: 'Inter', -apple-system, sans-serif;
--font-mono: 'JetBrains Mono', monospace;
/* Sizes */
--text-xxs: 10px;
--text-xs: 11px;
--text-sm: 12px;
--text-base: 13px;
--text-lg: 14px;
/* Panel labels */
--label-size: var(--text-xs);
--label-weight: 600;
--label-color: var(--text-secondary);
--label-spacing: 0.02em;
}
.panel-label {
font-family: var(--font-ui);
font-size: var(--label-size);
font-weight: var(--label-weight);
color: var(--label-color);
letter-spacing: var(--label-spacing);
text-transform: uppercase;
}
Animationsmuster
Panel-Übergänge
/* Slide-in panels */
.panel {
transform: translateX(100%);
opacity: 0;
transition:
transform 200ms cubic-bezier(0.16, 1, 0.3, 1),
opacity 150ms ease-out;
}
.panel.open {
transform: translateX(0);
opacity: 1;
}
Auswahl-Feedback
/* Selection box animation */
.selection-box {
border: 1px solid var(--selection-color);
background: rgba(0, 153, 255, 0.1);
animation: selection-appear 100ms ease-out;
}
@keyframes selection-appear {
from {
opacity: 0;
transform: scale(0.98);
}
to {
opacity: 1;
transform: scale(1);
}
}
/* Resize handles */
.resize-handle {
width: 8px;
height: 8px;
background: var(--selection-handle);
border: 1px solid var(--selection-color);
border-radius: 1px;
transition: transform 100ms ease;
}
.resize-handle:hover {
transform: scale(1.3);
}
Erkenntnisse für unsere Arbeit
1. Pivotieren ohne die Mission aufzugeben
Framer wechselte von Code zu visuell, aber die Mission blieb: die Lücke zwischen Design und Entwicklung zu schließen.
2. Technische Konzepte visuell darstellen
Breakpoints, Flexbox und CMS-Schemas werden intuitiv, wenn sie visuell dargestellt werden.
3. KI als Gerüst, nicht als Lösung
Wireframer generiert Struktur; Menschen fügen Kreativität hinzu. KI beseitigt die Angst vor der leeren Leinwand, ohne die Handlungsfähigkeit zu nehmen.
4. Property Controls statt Forking
Anstatt Komponenten zu duplizieren, werden Steuerelemente exponiert. Dieselbe Komponente, unterschiedliche Konfiguration.
5. Produktions-Output validiert Design
Wenn dein Design-Tool produktionsreifen Code ausgibt, gibt es keinen „Das habe ich nicht so designt"-Moment mehr.
Häufig gestellte Fragen
Wie hat sich Framer von einer Prototyping-Bibliothek zum Website-Builder entwickelt?
Framer startete 2014 als CoffeeScript-Animationsbibliothek für Designer, die programmieren. 2018 fügte Framer X eine visuelle IDE mit React-Komponentenunterstützung hinzu, die auf Design Engineers abzielte. Bis 2022 pivotierte Framer zum No-Code-Website-Building mit integriertem CMS und KI-Funktionen. Jede Evolution erweiterte die Zielgruppe, während die Kernmission erhalten blieb: die Lücke zwischen Design und Produktion zu schließen.
Was unterscheidet Framers visuelles Breakpoint-System von CSS Media Queries?
Traditionelles responsives Design erfordert, sich vorzustellen, wie Layouts bei jedem Breakpoint aussehen, während man Code schreibt. Framer zeigt eine Live-Vorschau, die sich aktualisiert, wenn du die Breakpoint-Handles ziehst. Du siehst genau, wie dein Design bei jeder Breite reagiert. Die visuelle Darstellung entspricht der Art, wie Designer über responsives Verhalten denken, und macht Breakpoints intuitiv statt abstrakt.
Wie funktionieren Framer Property Controls?
Property Controls exponieren konfigurierbare Optionen im rechten Panel, wenn eine Komponente ausgewählt ist. Anstatt eine Button-Komponente für jede Variante zu duplizieren, definierst du Controls für Label, Größe, Icon und Variante. Designer passen diese Eigenschaften pro Instanz an, ohne Code anzufassen. Die Komponente bleibt eine einzige Quelle der Wahrheit und unterstützt dabei unbegrenzte Konfigurationen.
Wie vergleicht sich Framers CMS mit WordPress oder anderen CMS?
Framers CMS ist visual-first und direkt in das Design-Tool integriert. Du definierst Schemas (Titel, Autor, Datum, Bild) und Inhalte fließen durch visuelles Data Binding in Seitentemplates. Es gibt keine separate Admin-Oberfläche – Content-Bearbeitung findet in derselben Umgebung statt wie Design. Auto-generiertes SEO, responsive Bilder und Slugs werden automatisch gehandhabt.
Was generiert Framer AI (Wireframer) tatsächlich?
Wireframer generiert responsive Layout-Strukturen, keine fertigen Designs. Aus einem Prompt wie „Landing Page für SaaS mit Preisgestaltung" erstellt es ein Wireframe mit Navigation, Hero-Bereich und Pricing Cards unter Verwendung von korrektem Auto-Layout und responsiven Breakpoints. Der Output ist vollständig editierbar – jedes Element kann umgestaltet, verschoben oder ersetzt werden. KI liefert das Gerüst; Menschen fügen Stil und Inhalt hinzu.