Design system és prototípus, kódolható handoff-fal
Wireframe-től high-fidelity prototípusig Figma-ban. A handoff napján a fejlesztő-csapat az 1. komponensnél már nem kérdez vissza.
Helyzet
Mikor érdemes design-csomagot venni
Inkonzisztens UI
Minden oldal kicsit más: spacing, button-stílus, color palette. A user frusztrált, a csapat folyton újra implementál.
Tervek vs valóság
A Figma-ban szép, a production-ben csúnya. A fejlesztő nem érti, mit akart a designer.
Nincs design system
Új feature design-ja minden alkalommal 1 hét. Pedig kellene 1 óra, ha lenne tokenizált komponens-set.
Rossz accessibility
Contrast-fail, kis tap-targetek, nincs focus-state. A Lighthouse 60 alatt, és senki nem érti, hol kezdje.
Folyamat
Hogyan dolgozunk
Discovery
User-flow, content-inventory, brand-audit. Az első héten átlátjuk a teljes scope-ot.
Wireframe
Low-fidelity wireframe a kulcs-flow-kra. Gyors iteráció, no visual noise.
High-fidelity
Design system tokenek (spacing, color, type), komponens-library, kulcs-oldalak.
Handoff
Figma Dev Mode, design tokens JSON-export, komponens-spec. A frontend-csapat azonnal indul.
Mit kapsz
Output design-csomag végén
- Figma file: pages, components, design tokens (mind verziókövethető)
- Design system dokumentáció: spacing scale, color palette, type ramp
- High-fidelity prototípus mind a kulcs flow-kra (mobile + desktop)
- Komponens-spec: states (hover, focus, disabled, loading), responsive viselkedés
- Accessibility audit: WCAG 2.1 AA compliance, contrast-check, keyboard nav
- Frontend handoff session 90 perc — Dev Mode walkthrough
Eszközök
Design-stack
Iparági standard tooling.
- Figma
- Figma Dev Mode
- Tokens Studio
- Stark
- FigJam
- Notion
- Loom
Időtáv
Átlagos design-ciklus
Phase 01
Discovery
1 hét
User-flow, brand audit, scope-rögzítés.
Phase 02
Wireframe + design
2-3 hét
Low → high fidelity, iteratív review.
Phase 03
Handoff
2-3 nap
Dokumentáció, tokens export, Dev Mode walkthrough.
Árazás
Design-csomagok
Fix árú csomagok scope-pal. Bővítés change-request alapján.
Landing redesign
0K Ft-tól
2 hét
Egy landing page + 3-5 kulcs-section design + handoff.
- Wireframe + high-fidelity
- Mobile + desktop
- Figma handoff
Product UI
0.0M Ft-tól
4 hét
Komplex web-app vagy mobil-app UI. Design system + 8-15 kulcs-screen.
- Design system tokenek
- 8-15 screen + states
- A11y audit
- 90 perces handoff
Design system
árajánlat
4-8 hét
Teljes design system felépítés meglévő termékhez vagy újhoz.
- Tokens, components, patterns
- Dokumentáció + storybook
- Adoption-roadmap
GYIK
Gyakori kérdések
Design-call 30 percben
Megnézzük a meglévő UI-t, beszélünk a célokról, és pontos scope-vázlatot adunk 24 órán belül.