Framer: Du Prototype à la Production
Comment Framer a évolué de bibliothèque de prototypage à constructeur de sites web no-code : breakpoints visuels, variantes de composants, architecture CMS et wireframing IA.
Framer : Du Prototype à la Production
« L'écart entre design et développement ne devrait pas exister. » — Koen Bok, Co-fondateur de Framer
Framer représente l'évolution complète d'un outil de design : d'une bibliothèque de prototypage JavaScript (2014) à un IDE visuel (Framer X, 2018) jusqu'à un constructeur de sites web no-code complet (2022+). Son parcours nous enseigne comment s'adapter aux besoins des utilisateurs tout en maintenant une philosophie fondamentale.
Pourquoi Framer Est Important
Framer a résolu le « problème du handoff » en l'éliminant entièrement. Au lieu que les designers créent des maquettes que les développeurs doivent reconstruire, Framer produit directement des sites web prêts pour la production.
Réalisations clés : - A comblé entièrement le fossé entre design et code - A rendu le design responsive visuel et intuitif - A construit un écosystème florissant de marketplace de templates - A intégré l'IA sans abandonner les principes de design - A levé 100M$ pour une valorisation de 2Md$ (août 2025)
Points Clés à Retenir
- Pivoter sans abandonner sa mission - Framer est passé d'une bibliothèque CoffeeScript à un IDE React puis à un constructeur no-code, mais la mission fondamentale n'a jamais changé : éliminer le fossé entre design et développement
- Rendre les concepts techniques visuels - Les breakpoints responsive, flexbox et les schémas CMS deviennent intuitifs lorsqu'ils sont représentés par des poignées déplaçables et des éditeurs visuels
- L'IA comme échafaudage, pas comme solution - Wireframer génère une structure pour éviter l'angoisse de la page blanche ; les humains ajoutent créativité et raffinement
- Contrôles de propriétés plutôt que duplication - Au lieu de dupliquer les composants pour créer des variations, exposez des contrôles qui modifient la configuration tout en maintenant une source unique
- La sortie en production valide le design - Quand l'outil de design produit du code de production, il n'y a plus de moment de handoff « ce n'est pas ce que j'avais designé »
L'Histoire de l'Évolution
Comprendre l'évolution de Framer révèle comment les produits à succès s'adaptent :
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 │
│ │ │ │ │ │
└──────────────────┘ └──────────────────┘ └──────────────────┘
Audience: Designers → Design Engineers → Everyone
who code who design who needs websites
Insight clé : Chaque pivot a élargi l'audience tout en maintenant la mission fondamentale : éliminer le fossé entre design et production.
Bibliothèque de Patterns
1. Système de Breakpoints Visuels
Framer transforme le design responsive du code en poignées déplaçables, offrant une UX révolutionnaire pour un concept traditionnellement technique.
Approche CSS traditionnelle :
/* Le développeur doit imaginer chaque breakpoint */
@media (max-width: 768px) {
.hero { flex-direction: column; }
}
@media (max-width: 480px) {
.hero { padding: 16px; }
}
Approche visuelle de Framer :
┌─────────────────────────────────────────────────────────────────────────┐
│ Breakpoints │
│ ┌─────────────────────────────────────────────────────────────────────┐ │
│ │ Desktop (1440) │ Tablet (768) │ Mobile (375) │ │
│ │ ────────────────────────┬─────────────────────┬──────────────────── │ │
│ │ ◀ drag ▶ ◀ drag ▶ │ │
│ └─────────────────────────────────────────────────────────────────────┘ │
│ │
│ Preview │
│ ┌──────────────────────────────────────────────┐ │
│ │ │ │
│ │ Hero Section │ ← La mise en page │
│ │ ──────────── │ se met à jour │
│ │ │ en temps réel │
│ │ [Button] │ pendant le drag │
│ │ │ │
│ └──────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────────────────┘
Principes de design à l'œuvre : - Manipulation directe plutôt que configuration abstraite - Le feedback en temps réel élimine les approximations - La représentation visuelle correspond au modèle mental
Pattern d'implémentation :
// 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. Pattern de Composant Primary/Instance
Comme Figma, Framer utilise un modèle primary-instance. Mais Framer l'étend avec des Variants interactifs et des contrôles de propriétés.
┌─ 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 ▼] │
│ │
└─────────────────────────────────────────────────────────────────────┘
↓ Les instances héritent de tous les 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 │
│ │
└─────────────────────────────────────────────────────────────────────┘
API des Property Controls :
// 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>
);
}
// These appear in the right panel when component is selected
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",
},
});
Point clé : Les contrôles de propriétés rendent les composants réutilisables sans duplication. Modifiez la propriété, pas le composant.
3. Architecture CMS intégrée
Le CMS de Framer traite le contenu comme des données structurées qui alimentent les composants visuels.
┌─ 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 data flows into components
┌─ Collection Page Template ──────────────────────────────────────────┐
│ │
│ ┌─ Blog Card (connected to CMS) ─────────────────────────────────┐ │
│ │ │ │
│ │ ┌──────────────┐ │ │
│ │ │ {coverImage} │ {title} │ │
│ │ │ │ {author.name} · {publishDate} │ │
│ │ │ │ │ │
│ │ └──────────────┘ {tags.map(tag => <Tag />)} │ │
│ │ │ │
│ └────────────────────────────────────────────────────────────────┘ │
│ │
│ This card repeats for each CMS entry │
│ │
└─────────────────────────────────────────────────────────────────────┘
Principes de conception : - Séparation du contenu et de la présentation - Liaison de données visuelle (aucun code requis) - SEO automatique (balises meta générées depuis les champs CMS)
4. Conception assistée par IA (Wireframer)
Les fonctionnalités IA 2025 de Framer illustrent une intégration élégante de l’IA : l’IA génère des points de départ, les humains affinent.
┌─ Wireframer ────────────────────────────────────────────────────────┐
│ │
│ Prompt: "Landing page for a SaaS product with pricing table" │
│ │
│ [Generate] │
│ │
├─────────────────────────────────────────────────────────────────────┤
│ │
│ Generated Layout (editable 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] │ │ │
│ │ └─────────────┘ └─────────────┘ └─────────────┘ │ │
│ │ │ │
│ └─────────────────────────────────────────────────────────────────┘ │
│ │
│ AI provides structure, human provides style │
│ │
└─────────────────────────────────────────────────────────────────────┘
Philosophie IA : - Génère des mises en page responsive, pas des designs finaux - Le résultat est entièrement modifiable (pas de boîte noire) - Évite l’angoisse de la page blanche, commence avec une structure - La créativité humaine s’applique sur l’échafaudage IA
5. Système Auto-Layout
L’auto-layout de Framer correspond à celui de Figma mais est immédiatement prêt pour la production.
/* What designers configure visually */
.auto-layout {
/* Direction */
display: flex;
flex-direction: row; /* or column */
/* Spacing */
gap: 16px; /* uniform */
/* or gap: 16px 24px; for row/column */
/* Alignment */
justify-content: flex-start;
align-items: center;
/* Distribution */
/* "Packed" = flex-start */
/* "Space between" = space-between */
/* "Space around" = space-around */
/* Padding (independent per side) */
padding: 24px 32px 24px 32px;
}
/* Children behavior */
.auto-layout > .child {
/* "Fill" = flex: 1 */
/* "Hug" = flex: 0 0 auto */
/* "Fixed" = width: 200px */
}
Correspondance avec l’éditeur visuel :
┌─ Auto-Layout Panel ─────────────────────────────────────────────────┐
│ │
│ Direction ┌───┐ ┌───┐ │
│ │ → │ │ ↓ │ │
│ └───┘ └───┘ │
│ │
│ Alignment ┌───────────────┐ │
│ │ ⬜ ⬜ ⬜ │ (9-point grid) │
│ │ ⬜ ⬛ ⬜ │ │
│ │ ⬜ ⬜ ⬜ │ │
│ └───────────────┘ │
│ │
│ Gap [16] px │
│ │
│ Padding [24] [32] [24] [32] (top, right, bottom, left) │
│ │
│ Distribution [Packed ▼] │
│ │
└─────────────────────────────────────────────────────────────────────┘
Système de design visuel
Chrome du canevas
:root {
/* Canvas background */
--canvas-bg: #1E1E1E;
--canvas-grid: rgba(255, 255, 255, 0.03);
/* Selection */
--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;
}
Typographie (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;
}
Modèles d'animation
Transitions des panneaux
/* 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;
}
Retour visuel de sélection
/* 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);
}
Enseignements pour notre travail
1. Pivoter sans abandonner la mission
Framer est passé du code au visuel, mais la mission est restée la même : éliminer le fossé entre design et développement.
2. Rendre visuels les concepts techniques
Les breakpoints, flexbox et les schémas CMS deviennent intuitifs lorsqu'ils sont représentés visuellement.
3. L'IA comme échafaudage, pas comme solution
Wireframer génère la structure ; les humains ajoutent la créativité. L'IA supprime l'angoisse de la page blanche sans supprimer l'autonomie.
4. Contrôles de propriétés > duplication
Au lieu de dupliquer les composants, exposez des contrôles. Même composant, configuration différente.
5. Le code de production valide le design
Quand votre outil de design produit du code de production, il n'y a plus de moment « ce n'est pas ce que j'avais designé ».
Foire aux questions
Comment Framer a-t-il évolué d'une bibliothèque de prototypage à un créateur de sites web ?
Framer a débuté en 2014 comme une bibliothèque d'animation CoffeeScript pour les designers qui codent. En 2018, Framer X a ajouté un IDE visuel avec support des composants React, ciblant les design engineers. En 2022, Framer a pivoté vers la création de sites web no-code avec un CMS intégré et des fonctionnalités IA. Chaque évolution a élargi l'audience tout en maintenant la mission fondamentale : éliminer le fossé entre design et production.
Qu'est-ce qui différencie le système de breakpoints visuel de Framer des media queries CSS ?
Le responsive design traditionnel exige d'imaginer l'apparence des mises en page à chaque breakpoint tout en écrivant du code. Framer affiche un aperçu en direct qui se met à jour lorsque vous faites glisser les poignées de breakpoint. Vous voyez exactement comment votre design répond à chaque largeur. La représentation visuelle correspond à la façon dont les designers pensent le comportement responsive, rendant les breakpoints intuitifs plutôt qu'abstraits.
Comment fonctionnent les contrôles de propriétés Framer ?
Les contrôles de propriétés exposent des options configurables dans le panneau de droite lorsqu'un composant est sélectionné. Au lieu de dupliquer un composant bouton pour chaque variation, vous définissez des contrôles pour le libellé, la taille, l'icône et la variante. Les designers ajustent ces propriétés par instance sans toucher au code. Le composant reste une source unique de vérité tout en supportant des configurations illimitées.
Comment le CMS de Framer se compare-t-il à WordPress ou aux autres CMS ?
Le CMS de Framer est visuel d'abord et intégré directement dans l'outil de design. Vous définissez des schémas (titre, auteur, date, image) et le contenu s'intègre dans les templates de page via une liaison de données visuelle. Il n'y a pas d'interface d'administration séparée — l'édition du contenu se fait dans le même environnement que le design. Le SEO auto-généré, les images responsives et les slugs sont gérés automatiquement.
Que génère réellement Framer AI (Wireframer) ?
Wireframer génère des structures de mise en page responsives, pas des designs finalisés. À partir d'un prompt comme « landing page pour SaaS avec tarification », il crée un wireframe avec navigation, section hero et cartes de tarification utilisant un auto-layout approprié et des breakpoints responsives. Le résultat est entièrement modifiable — chaque élément peut être restylé, déplacé ou remplacé. L'IA fournit l'échafaudage ; les humains ajoutent le style et le contenu.