design/framer
Framer: Od prototypu do produkcji
„Przepaść między projektowaniem a programowaniem nie powinna istnieć." — Koen Bok, współzałożyciel Framer
Framer reprezentuje pełną ewolucję narzędzia projektowego: od biblioteki prototypowania w JavaScript (2014) przez wizualne IDE (Framer X, 2018) do pełnego no-code'owego kreatora stron internetowych (2022+). Jego historia uczy nas, jak dostosowywać się do potrzeb użytkowników, zachowując podstawową filozofię.
Dlaczego Framer ma znaczenie
Framer rozwiązał „problem przekazywania projektu", całkowicie go eliminując. Zamiast projektantów tworzących makiety, które programiści następnie odtwarzają, Framer generuje gotowe do produkcji strony internetowe bezpośrednio.
Kluczowe osiągnięcia: - Całkowite zniwelowanie przepaści między projektem a kodem - Uczynienie responsywnego projektowania wizualnym i intuicyjnym - Zbudowanie prosperującego ekosystemu marketplace'u szablonów - Integracja AI bez porzucania zasad projektowania - Pozyskanie 100 mln USD przy wycenie 2 mld USD (sierpień 2025)
Kluczowe wnioski
- Pivot bez porzucania misji - Framer przeszedł od biblioteki CoffeeScript przez React IDE do no-code'owego kreatora, ale podstawowa misja nigdy się nie zmieniła: wyeliminować przepaść między projektowaniem a programowaniem
- Wizualizacja koncepcji technicznych - Responsywne breakpointy, flexbox i schematy CMS stają się intuicyjne, gdy są reprezentowane jako przeciągane uchwyty i wizualne edytory
- AI jako szkielet, nie rozwiązanie - Wireframer generuje strukturę, aby pominąć lęk przed pustym płótnem; ludzie dodają kreatywność i dopracowanie
- Property controls zamiast forkowania - Zamiast duplikować komponenty dla wariantów, eksponuj kontrolki zmieniające konfigurację przy zachowaniu jednego źródła prawdy
- Produkcyjny output waliduje projekt - Gdy narzędzie projektowe generuje kod produkcyjny, nie ma momentu „to nie jest to, co zaprojektowałem" przy przekazywaniu
Historia ewolucji
Zrozumienie ewolucji Framera pokazuje, jak udane produkty się adaptują:
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 │
│ │ │ │ │ │
└──────────────────┘ └──────────────────┘ └──────────────────┘
Odbiorcy: Projektanci → Design Engineers → Każdy,
kodujący projektujący kto potrzebuje strony
Kluczowy wniosek: Każdy pivot poszerzał grono odbiorców, zachowując podstawową misję: wyeliminować przepaść między projektem a produkcją.
Biblioteka wzorców
1. Wizualny system breakpointów
Framer przekształca responsywne projektowanie z kodu w przeciągane uchwyty, dostarczając przełomowe UX dla tradycyjnie technicznej koncepcji.
Tradycyjne podejście CSS:
/* Programista musi wyobrażać sobie każdy breakpoint */
@media (max-width: 768px) {
.hero { flex-direction: column; }
}
@media (max-width: 480px) {
.hero { padding: 16px; }
}
Wizualne podejście Framera:
┌─────────────────────────────────────────────────────────────────────────┐
│ Breakpointy │
│ ┌─────────────────────────────────────────────────────────────────────┐ │
│ │ Desktop (1440) │ Tablet (768) │ Mobile (375) │ │
│ │ ────────────────────────┬─────────────────────┬──────────────────── │ │
│ │ ◀ przeciągnij ▶ ◀ przeciągnij ▶ │ │
│ └─────────────────────────────────────────────────────────────────────┘ │
│ │
│ Podgląd │
│ ┌──────────────────────────────────────────────┐ │
│ │ │ │
│ │ Sekcja Hero │ ← Układ aktualizuje │
│ │ ──────────── │ się w czasie │
│ │ │ rzeczywistym │
│ │ [Przycisk] │ podczas przeciągania│
│ │ │ │
│ └──────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────────────────┘
Zasady projektowania w działaniu: - Bezpośrednia manipulacja zamiast abstrakcyjnej konfiguracji - Informacja zwrotna w czasie rzeczywistym eliminuje zgadywanie - Wizualna reprezentacja odpowiada modelowi mentalnemu
Wzorzec implementacji:
// Struktura danych breakpointów
const breakpoints = [
{ name: 'Desktop', width: 1440, isDefault: true },
{ name: 'Tablet', width: 768 },
{ name: 'Mobile', width: 375 },
];
// Komponent przechowuje style dla każdego breakpointu
const componentStyles = {
base: { display: 'flex', gap: 24 },
overrides: {
768: { flexDirection: 'column', gap: 16 },
375: { padding: 16 },
}
};
// Łączenie stylów dla aktualnej szerokości
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. Wzorzec komponentu Primary/Instance
Podobnie jak Figma, Framer używa modelu primary-instance. Ale Framer rozszerza go o interaktywne Warianty i property controls.
┌─ Primary Component ─────────────────────────────────────────────────┐
│ │
│ Płótno komponentu │
│ ┌────────────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ Stan domyślny Stan hover Stan wciśnięty │ │
│ │ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │ │
│ │ │ Button │ → │ Button │ → │ Button │ │ │
│ │ │ bg: #3B82F6 │ │ bg: #2563EB │ │ bg: #1D4ED8 │ │ │
│ │ │ scale: 1 │ │ scale: 1.02 │ │ scale: 0.98 │ │ │
│ │ └──────────────┘ └──────────────┘ └──────────────┘ │ │
│ │ │ │
│ │ Przejścia: spring(stiffness: 500, damping: 30) │ │
│ │ │ │
│ └────────────────────────────────────────────────────────────────┘ │
│ │
│ Property Controls │
│ ├─ Label: [pole tekstowe] │
│ ├─ Wariant: [default ▼] [hover] [pressed] │
│ ├─ Rozmiar: [small] [medium ●] [large] │
│ └─ Ikona: [none ▼] │
│ │
└─────────────────────────────────────────────────────────────────────┘
↓ Instancje dziedziczą wszystkie warianty
┌─ Płótno strony ─────────────────────────────────────────────────────┐
│ │
│ [Button Instance 1] [Button Instance 2] [Button Instance 3] │
│ Label: "Wyślij" Label: "Anuluj" Label: "Dowiedz się"│
│ Rozmiar: medium Rozmiar: small Rozmiar: large │
│ Ikona: check Ikona: none Ikona: arrow │
│ │
└─────────────────────────────────────────────────────────────────────┘
API Property Controls:
// Komponent Framer z 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>
);
}
// Te opcje pojawiają się w prawym panelu po zaznaczeniu komponentu
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",
},
});
Kluczowy wniosek: Property controls sprawiają, że komponenty są wielokrotnego użytku bez forkowania. Zmień właściwość, nie komponent.
3. Wbudowana architektura CMS
CMS Framera traktuje treść jako ustrukturyzowane dane przepływające do wizualnych komponentów.
┌─ Kolekcja CMS: Wpisy blogowe ───────────────────────────────────────┐
│ │
│ Schemat │
│ ├─ title: String (wymagany) │
│ ├─ slug: Slug (automatycznie generowany z tytułu) │
│ ├─ author: Referencja → Autorzy │
│ ├─ publishDate: Date │
│ ├─ coverImage: Image │
│ ├─ content: Rich Text │
│ └─ tags: Multi-referencja → Tagi │
│ │
│ Wpisy │
│ ┌─────────────────────────────────────────────────────────────────┐ │
│ │ Tytuł │ Autor │ Data │ Status │ │
│ ├────────────────────┼────────────┼────────────┼──────────────────┤ │
│ │ Systemy projektowe │ @jane │ 15 sty │ ● Opublikowany │ │
│ │ Wzorce komponentów │ @john │ 12 sty │ ○ Szkic │ │
│ │ Przewodnik animacji│ @jane │ 10 sty │ ● Opublikowany │ │
│ └─────────────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────┘
↓ Dane CMS przepływają do komponentów
┌─ Szablon strony kolekcji ───────────────────────────────────────────┐
│ │
│ ┌─ Karta bloga (połączona z CMS) ────────────────────────────────┐ │
│ │ │ │
│ │ ┌──────────────┐ │ │
│ │ │ {coverImage} │ {title} │ │
│ │ │ │ {author.name} · {publishDate} │ │
│ │ │ │ │ │
│ │ └──────────────┘ {tags.map(tag => )} │ │
│ │ │ │
│ └────────────────────────────────────────────────────────────────┘ │
│ │
│ Ta karta powtarza się dla każdego wpisu CMS │
│ │
└─────────────────────────────────────────────────────────────────────┘
Zasady projektowania: - Separacja treści i prezentacji - Wizualne wiązanie danych (bez kodu) - Automatyczne SEO (meta tagi z pól CMS)
4. Projektowanie wspomagane AI (Wireframer)
Funkcje AI Framera z 2025 roku demonstrują przemyślaną integrację AI: AI generuje punkty startowe, ludzie dopracowują.
┌─ Wireframer ────────────────────────────────────────────────────────┐
│ │
│ Prompt: "Landing page dla produktu SaaS z tabelą cenową" │
│ │
│ [Generuj] │
│ │
├─────────────────────────────────────────────────────────────────────┤
│ │
│ Wygenerowany układ (edytowalny wireframe) │
│ ┌─────────────────────────────────────────────────────────────────┐ │
│ │ ╔══════════════════════════════════════════════════════════╗ │ │
│ │ ║ [Logo] Funkcje Cennik O nas [CTA] ║ │ │
│ │ ╚══════════════════════════════════════════════════════════╝ │ │
│ │ │ │
│ │ ┌────────────────────────────────────────────────────────┐ │ │
│ │ │ Sekcja Hero │ │ │
│ │ │ [Placeholder nagłówka] │ │ │
│ │ │ [Placeholder podtytułu] │ │ │
│ │ │ [Przycisk CTA] [Drugorzędny] │ │ │
│ │ └────────────────────────────────────────────────────────┘ │ │
│ │ │ │
│ │ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │ │
│ │ │ Starter │ │ Pro ★ │ │ Enterprise │ │ │
│ │ │ 9$/mies. │ │ 29$/mies. │ │ Indywidual.│ │ │
│ │ │ ────── │ │ ────── │ │ ────── │ │ │
│ │ │ • Funkcja │ │ • Funkcja │ │ • Funkcja │ │ │
│ │ │ • Funkcja │ │ • Funkcja │ │ • Funkcja │ │ │
│ │ │ [Wybierz] │ │ [Wybierz] │ │ [Kontakt] │ │ │
│ │ └─────────────┘ └─────────────┘ └─────────────┘ │ │
│ │ │ │
│ └─────────────────────────────────────────────────────────────────┘ │
│ │
│ AI dostarcza strukturę, człowiek dodaje styl │
│ │
└─────────────────────────────────────────────────────────────────────┘
Filozofia AI: - Generuje responsywne układy, nie końcowe projekty - Output jest w pełni edytowalny (nie czarna skrzynka) - Pomija lęk przed pustym płótnem, zaczyna od struktury - Ludzka kreatywność nakładana na szkielet AI
5. System Auto-Layout
Auto-layout Framera dorównuje temu z Figmy, ale jest od razu gotowy do produkcji.
/* Co projektanci konfigurują wizualnie */
.auto-layout {
/* Kierunek */
display: flex;
flex-direction: row; /* lub column */
/* Odstępy */
gap: 16px; /* jednolity */
/* lub gap: 16px 24px; dla wiersza/kolumny */
/* Wyrównanie */
justify-content: flex-start;
align-items: center;
/* Rozkład */
/* "Packed" = flex-start */
/* "Space between" = space-between */
/* "Space around" = space-around */
/* Padding (niezależny dla każdej strony) */
padding: 24px 32px 24px 32px;
}
/* Zachowanie dzieci */
.auto-layout > .child {
/* "Fill" = flex: 1 */
/* "Hug" = flex: 0 0 auto */
/* "Fixed" = width: 200px */
}
Tłumaczenie z edytora wizualnego:
┌─ Panel Auto-Layout ─────────────────────────────────────────────────┐
│ │
│ Kierunek ┌───┐ ┌───┐ │
│ │ → │ │ ↓ │ │
│ └───┘ └───┘ │
│ │
│ Wyrównanie ┌───────────────┐ │
│ │ ⬜ ⬜ ⬜ │ (siatka 9-punktowa) │
│ │ ⬜ ⬛ ⬜ │ │
│ │ ⬜ ⬜ ⬜ │ │
│ └───────────────┘ │
│ │
│ Gap [16] px │
│ │
│ Padding [24] [32] [24] [32] (góra, prawo, dół, lewo) │
│ │
│ Rozkład [Packed ▼] │
│ │
└─────────────────────────────────────────────────────────────────────┘
Wizualny system projektowania
Chrome płótna
:root {
/* Tło płótna */
--canvas-bg: #1E1E1E;
--canvas-grid: rgba(255, 255, 255, 0.03);
/* Zaznaczenie */
--selection-color: #0099FF;
--selection-handle: #FFFFFF;
/* Panele */
--panel-bg: #2D2D2D;
--panel-border: rgba(255, 255, 255, 0.08);
/* Tekst */
--text-primary: #FFFFFF;
--text-secondary: #9B9B9B;
--text-placeholder: #6B6B6B;
/* Akcenty */
--accent-primary: #0099FF;
--accent-success: #00D084;
--accent-warning: #FFBB00;
--accent-error: #FF5555;
}
Typografia (UI)
:root {
--font-ui: 'Inter', -apple-system, sans-serif;
--font-mono: 'JetBrains Mono', monospace;
/* Rozmiary */
--text-xxs: 10px;
--text-xs: 11px;
--text-sm: 12px;
--text-base: 13px;
--text-lg: 14px;
/* Etykiety paneli */
--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;
}
Wzorce animacji
Przejścia paneli
/* Wysuwane panele */
.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;
}
Informacja zwrotna zaznaczenia
/* Animacja ramki zaznaczenia */
.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);
}
}
/* Uchwyty zmiany rozmiaru */
.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);
}
Lekcje dla naszej pracy
1. Pivot bez porzucania misji
Framer przeszedł od kodu do wizualności, ale misja pozostała: wyeliminować przepaść między projektem a programowaniem.
2. Wizualizacja koncepcji technicznych
Breakpointy, flexbox i schematy CMS stają się intuicyjne, gdy są reprezentowane wizualnie.
3. AI jako szkielet, nie rozwiązanie
Wireframer generuje strukturę; ludzie dodają kreatywność. AI usuwa lęk przed pustym płótnem bez odbierania sprawczości.
4. Property Controls > Forkowanie
Zamiast duplikować komponenty, eksponuj kontrolki. Ten sam komponent, inna konfiguracja.
5. Produkcyjny output waliduje projekt
Gdy twoje narzędzie projektowe generuje kod produkcyjny, nie ma momentu „to nie jest to, co zaprojektowałem".
Często zadawane pytania
Jak Framer ewoluował z biblioteki prototypowania do kreatora stron?
Framer rozpoczął w 2014 roku jako biblioteka animacji CoffeeScript dla projektantów umiejących kodować. W 2018 roku Framer X dodał wizualne IDE z obsługą komponentów React, kierując się do design engineers. Do 2022 roku Framer przekształcił się w no-code'owy kreator stron z wbudowanym CMS i funkcjami AI. Każda ewolucja poszerzała grono odbiorców, zachowując podstawową misję: wyeliminować przepaść między projektem a produkcją.
Co wyróżnia wizualny system breakpointów Framera od media queries CSS?
Tradycyjne responsywne projektowanie wymaga wyobrażania sobie, jak układy wyglądają przy każdym breakpoincie podczas pisania kodu. Framer pokazuje podgląd na żywo, który aktualizuje się podczas przeciągania uchwytów breakpointów. Widzisz dokładnie, jak twój projekt reaguje przy każdej szerokości. Wizualna reprezentacja odpowiada temu, jak projektanci myślą o responsywnym zachowaniu, czyniąc breakpointy intuicyjnymi zamiast abstrakcyjnymi.
Jak działają property controls we Framerze?
Property controls eksponują konfigurowalne opcje w prawym panelu po zaznaczeniu komponentu. Zamiast duplikować komponent przycisku dla każdego wariantu, definiujesz kontrolki dla etykiety, rozmiaru, ikony i wariantu. Projektanci dostosowują te właściwości dla każdej instancji bez dotykania kodu. Komponent pozostaje jedynym źródłem prawdy, wspierając nieograniczone konfiguracje.
Jak CMS Framera wypada w porównaniu z WordPressem lub innymi CMS-ami?
CMS Framera jest zorientowany na wizualność i zintegrowany bezpośrednio z narzędziem projektowym. Definiujesz schematy (tytuł, autor, data, obrazek), a treść przepływa do szablonów stron przez wizualne wiązanie danych. Nie ma osobnego interfejsu administracyjnego — edycja treści odbywa się w tym samym środowisku co projektowanie. Automatyczne SEO, responsywne obrazki i slogi są obsługiwane automatycznie.
Co właściwie generuje Framer AI (Wireframer)?
Wireframer generuje responsywne struktury układów, nie gotowe projekty. Z promptu takiego jak „landing page dla SaaS z cennikiem" tworzy wireframe z nawigacją, sekcją hero i kartami cenowymi używając prawidłowego auto-layout i responsywnych breakpointów. Output jest w pełni edytowalny — każdy element można zmienić stylistycznie, przenieść lub zastąpić. AI dostarcza szkielet; ludzie dodają styl i treść.