Z hotového návrhu ve Figmě produkční front end v Next.js.
Návrh zůstává váš. Já ho převedu do kódu: typografie, kterou jste nastavili, pohyb, který jste popsali, a web, který je rychlý i na průměrném Androidu. Pro návrhy, na které stavitel webů nestačí.
Co je v dodávce
Tři fáze, jedna dohodnutá cena. Návrh procházím dřív, než něco podepíšeme, takže rozsah vychází z vašeho skutečného souboru, ne z odhadu.
Průchod návrhem
Projdu stránky, komponenty a jejich varianty, auto layout, textové a barevné styly, písma a jejich licence, exportované assety, prototypové interakce a každý stav, který návrh nechává otevřený pro tablet a mobil. Seznam otevřených otázek dostanete před dohodou o rozsahu, ne v půlce stavby.
Produkční front end
Next.js a Tailwind, komponenty kopírující strukturu vašeho design systému, plynulé breakpointy místo tří pevných šířek, obrázky v moderních formátech ve velikostech, které se opravdu použijí, a pohyb na GSAP, který běží po GPU a na slabších zařízeních se zjednoduší místo toho, aby sekal.
Kontroly před spuštěním
Lighthouse na výkon, přístupnost i SEO. Ovládání klávesnicí a viditelný focus, varianta pro omezený pohyb, metadata a náhledy odkazů, přesměrování, souhlas s měřením a průchod na skutečném průměrném telefonu, ne na zúženém okně prohlížeče.
Pevná cena za dohodnutý rozsah
Převod z Figmy do Next.js začíná na 2 500 € po průchodu návrhem. Výsledné číslo závisí na počtu stránek, množství pohybu v návrhu, potřebě CMS, integracích a připravenosti obsahu. Dostanete jednu cenu za dohodnutý rozsah, ne hodinovku.
Ručně, ale jen tam, kde to dává smysl
Stavitel webů je často lepší nákup. Vyplatí se vědět, na které straně té čáry váš projekt stojí, dřív než vám kdokoli pošle cenu.
Kdy stačí stavitel webů
Webflow, Framer nebo dobrá šablona jsou správná volba pro prezentační web s běžnými sekcemi, jednoduchým CMS a bez neobvyklého pohybu. Takových projektů je většina. Pokud je váš mezi nimi, řeknu vám to a ušetříte.
Kdy je kód jediná cesta
Vlastní scroll choreografie, 3D přímo ve stránce, design systém se skutečnou logikou komponent, přísný rozpočet na výkon, uživatelské účty, API nebo backend za webem a všechno, z čeho bude klient později chtít aplikaci. Tam začíná stavitel stát víc, než ušetří.
Postaveno podle cizího návrhu
Dva veřejné projekty, kde návrh přišel zvenčí a já dodal stavbu. Každé tvrzení níže si můžete změřit na veřejné adrese.
vondrart.studio
Brandové studio dodalo vizuál a přesnou představu, jak se má web hýbat. Já dodal kód, animace a optimalizaci, bez ztráty jediného snímku ze záměru a bez propadu na slabším telefonu.
vondrovi2026.cz
Postaveno podle dodaného návrhu na Next.js 16 a Tailwindu bez jediné další závislosti. Vyhledávání hostů běží na serveru, takže seznam hostů se do prohlížeče vůbec nedostane, a sdílená galerie nahrává přes QR kód rovnou do soukromé složky na Drivu.
Autorství návrhu zůstává v obou případech designérovi. Já stavěl front end. Další jsou pod NDA a ukázat je nemůžu, a radši uvedu dva doložitelné než abych seznam nafukoval.
Co stavba unese
Tenhle jsem navrhl i postavil, takže to není reference na předaný návrh. Je tady proto, že je to nejjasnější veřejně měřitelný důkaz technické laťky, na které pracuji.
syndikat.studio
Signature 3D objekt a scroll storytelling. Lighthouse 100 v přístupnosti i SEO a celý web včetně 3D scény pod půl megabajtu přenosu. Náročné scény se na slabší telefony vůbec nestahují.
Živý webJak to probíhá
Tři pracovní dny od vašeho souboru k rozsahu a číslu.
Pošlete soubor
Figma, Sketch nebo XD a informaci, které stránky považujete za hotové. Do tří pracovních dnů máte otevřené otázky, rozsah a jednu cenu.
Stavba na náhledové adrese
Web roste po sekcích na odkazu, který si můžete kdykoli otevřít. Připomínkujete ve Figmě nebo na náhledu. Žádné tři týdny ticha a pak odhalení.
Spuštění a předání
Nasazení, kontroly popsané výš a repozitář, který převezme váš vlastní vývojář: čitelné komponenty, běžné nástroje, žádný můj vlastní vymyšlený framework.
Co doopravdy dostanete
Repozitář
Kompletní zdrojový kód ve vaší Git organizaci, nebo v mé s převodem na vás, s readme k lokálnímu spuštění, proměnným prostředí a nasazení.
Vlastnictví
Kód je po doplacení váš. Žádná licence, žádné uvázání na hosting, žádná závislost na mně, když chcete publikovat změnu.
Po spuštění
Čtrnáct dní na cokoli, co se ukáže jako rozbité, zdarma. Dál buď malý paušál, nebo o mně už neuslyšíte, podle toho, co vám vyhovuje.
Časté otázky k převodu z Figmy
Jak převod z Figmy do Next.js probíhá?
Ne automaticky. Nejdřív si přečtu soubor: komponenty, varianty, styly, responzivní stavy a to, co návrh nechává otevřené. Pak návrh znovu postavím jako komponenty v Next.js podle struktury vašeho design systému, se skutečnými breakpointy, optimalizovanými assety a pohybem, který běží po GPU. Pluginy, které exportují Figmu do kódu, vyrobí kód, který za měsíc nikdo neudrží.
Děláte poddodávky pro designová studia?
Většina téhle práce je přesně to. Studiu zůstává vztah s klientem, autorství návrhu i fakturace. Vystupuji jako váš vývojář, nebo vůbec, podle toho, co se vám lépe prodává. Na téhle bázi mám podepsané NDA a nezveřejňuji nic, co jste neodsouhlasili.
Jak přesně to bude sedět s návrhem?
Pixelově přesně na breakpointech, které jsou v souboru, a s odůvodněním tam, kde soubor mlčí. Každý návrh nechává mezery mezi artboardy. Ty mezery vypíšu v průchodu návrhem a rozhodnete o nich vy, místo abyste můj odhad našli až při spuštění.
Proč ne rovnou Webflow nebo Framer?
U běžného prezentačního webu byste měli. Kód stavím tam, kde návrh potřebuje vlastní scroll choreografii, 3D, přísný rozpočet na výkon, skutečnou logiku komponent, uživatelské účty nebo backend. Tam začíná stavitel stát víc, než ušetří. Když váš projekt sedne na stavitele, řeknu vám to.
Co od nás potřebujete na začátek?
Soubor s návrhem a informaci, které stránky jsou hotové, písma a jejich licence, případná pravidla značky a pohybu, a obsah nebo jasnou poznámku, že dorazí později. Chybějící obsah nevadí. Projekty zdržují chybějící rozhodnutí o mobilu.
Odkud pracujete a jak spolupráce vypadá?
Z Česka, ve středoevropském čase, který se překrývá s celým pracovním dnem v Německu, Rakousku i Švýcarsku. Všechno běží přes e-mail, sdílený náhledový odkaz a hovor tehdy, když je hovor opravdu rychlejší.
Pošlete návrh.
Přiložte odkaz na Figmu nebo soubor. Do tří pracovních dnů máte otevřené otázky, rozsah a jednu cenu.