Předání designu z Figmy do Webflow: jak připravit soubor

Proč o rozpočtu rozhoduje předání z Figmy do Webflow

Většina hodin při stavbě webu ve Webflow se nestráví stavěním. Stráví se ptaním, čekáním a předělávkami. Uklizený soubor to většinou odstraní.

Navrhuji a ve Webflow stavím od roku 2018, takže znám obě strany. Vzorec je pořád stejný: když je soubor postavený jako web ve Webflow, stavba je mechanická. Když je postavený jako plakát, každá sekce se mění v vyjednávání.

Webflow není nástroj na screenshoty. Myslí v třídách, komponentách, proměnných a kolekcích. Čím blíž je k tomu váš soubor ve Figmě, tím rychleji to jde. Níže je checklist, který bych chtěl mít u každého souboru.

Framy, breakpointy a auto layout

Dodejte mi jeden frame na stránku a breakpoint. Minimum je desktop, tablet a mobil. Webflow má navíc breakpoint pro velké displeje, takže pokud se má design roztáhnout nad 1440 px, napište to.

• Pojmenujte framy jasně: Home / Desktop, Home / Tablet, Home / Mobile.
• Použijte skutečnou mřížku. Uveďte maximální šířku kontejneru a počet sloupců. Layout ve Webflow stojí na těchto dvou číslech.
• Auto layout všude. Odpovídá téměř přímo flexboxu a gridu. Frame s absolutně umístěnými vrstvami mě nutí hádat záměr.
• Ukažte změny, ne zmenšenou kopii. Pokud se třísloupcová řada na mobilu změní na jeden sloupec, nakreslete to. Pokud je tablet jen zmenšený desktop, napište to a frame vynechte.

Přidejte také stavy, které se vždy objeví: nadpis zalomený na čtyři řádky, navigace, která se nevejde, karta bez obrázku.

Komponenty, varianty, styly a proměnné

Tady se potkává Client-First s Figmou. Stavím na Client-First (Finsweet), takže soubor, který mluví stejným jazykem, ušetří skutečný čas.

Komponenty a varianty

Komponentu udělejte ze všeho, co se opakuje: tlačítka, karty, navigace, patička, pole formuláře, CTA bloky. Varianty použijte pro stavy a typy (primární, sekundární, hover, disabled). Pokud se karta objevuje ve třech podobách, nekreslete tři nesouvisející framy, ale jednu komponentu s vlastností varianty.

Barevné a textové styly

Každá barva má být styl nebo proměnná, nikdy volný hex. Pojmenujte je podle role, například text-primary, background-dark, border-subtle. Stejně tak texty: styl pro každou úroveň nadpisu, běžný text, malý text a text tlačítka.

Spacing škála

Zvolte škálu a držte se jí, například 4, 8, 16, 24, 32, 48, 64, 96, 128. Client-First používá utility pro padding sekcí a mezery, takže jednotná škála znamená, že utility vytvořím jednou a použiji opakovaně. Náhodné hodnoty typu 37 px a 53 px znamenají vlastní třídy a chaotický stylesheet.

Mapování na proměnné ve Webflow

Pokud používáte proměnné ve Figmě, pojmenujte je tak, jak byste pojmenovali proměnné ve Webflow. Stačí jednoduchá tabulka v souboru nebo na stránce v Notionu:

Označte, co je řízené z CMS

To je nejčastější mezera. Designér vidí mřížku šesti karet. Vývojář musí rozhodnout: je to šest ručně vytvořených bloků, nebo kolekce?

Napište to. Vedle každé sekce z CMS přidejte krátkou poznámku, například Kolekce: Blog, zobrazit poslední 3, odkaz na archiv.

• Vypište pole každé kolekce: titulek, slug, obrázek, kategorie, datum, rich text, autor a další.
• Dodejte dvě až tři ukázkové položky, ne jeden vyleštěný příklad. Zahrňte nejdelší titulek, nejkratší a jednu položku bez obrázku.
• Popište vztahy mezi položkami. Kategorie, autoři a související články jsou referenční pole a mění způsob stavby kolekce.
• Nakreslete i šablony detailu: samostatný článek, case study, stránku produktu. Snadno se zapomenou a tvoří většinu práce.

U velkých katalogů záleží na filtrování a řazení. Pokud uživatelé filtrují podle ceny, značky nebo kategorie, popište chování. Webflow toho umí hodně, ale pravidla musím znát dopředu.

Interakce a poznámky k animacím

Statické framy pohyb neukážou. Pokud animaci vynecháte, vymyslím si ji. Pokud ji popíšete špatně, postavím něco jiného.

• Záměr napište jednou větou: Karty se při vstupu sekce do viewportu jemně vyjedou nahoru s malým zpožděním.
• Přidejte Loom nebo odkaz na prototyp u složitých věcí: efekty navázané na scroll, horizontální posuvníky, připnuté sekce, přechody mezi stránkami.
• Řekněte, co poběží na mobilu. Spoustu scroll efektů je lepší na dotykových zařízeních zjednodušit nebo vypustit.
• Uveďte timing a easing, pokud jsou pro značku důležité. Pokud ne, napište to a rozhodnutí nechte na mně.

Pro vše nad rámec nativních interakcí Webflow používám GSAP. Když to vím předem, ovlivní to, jak strukturuji layout, takže náročné stránky označte včas.

Podklady, SEO, formuláře a přístupnost

Podklady

• Ikony a loga jako SVG, s čistými cestami a bez vložených rastrových obrázků.
• Fotografie v plné velikosti nebo exportované ve 2x. Převedu je do WebP a zkomprimuji, takže mi dejte zdrojovou kvalitu.
• Fonty s licencemi. Napište, zda jde o Google Fonts, Adobe Fonts nebo zakoupenou licenci, a u placených fontů pošlete soubory a licenci pro doménu.

SEO

• Označte H1 a hierarchii nadpisů na každé stránce. Úrovně nadpisů nevolte podle velikosti písma.
• Dodejte title a meta description pro klíčové stránky.
• Přidejte alt texty u smysluplných obrázků, nebo napište, které jsou dekorativní.
• Při redesignu pošlete seznam starých URL, abych naplánoval přesměrování.

Formuláře a integrace

Vypište každý formulář: pole, pravidla validace, potvrzovací zprávu a kam se data odesílají (e-mail, CRM, Slack, scénář v Make nebo Zapieru). Uveďte i vložené třetí strany, například Calendly, HubSpot, chatovací widgety, analytiku a cookie lištu.

Přístupnost

Před předáním zkontrolujte kontrast barev (pro běžný text se obvykle cílí na 4,5:1). Navrhněte viditelné focus stavy pro odkazy, tlačítka a inputy a ukažte stav hover a pressed. Teď je navrhnete levně, dodatečně je to drahé.

Checklist předání ke zkopírování

Vložte si ho do poznámek k projektu nebo ho pošlete vývojáři spolu se souborem.

• Framy pro desktop, tablet a mobil u každé stránky, pojmenované jednotně
• Uvedená maximální šířka kontejneru a počet sloupců
• Použitý auto layout, žádné absolutně umístěné vrstvy
• Komponenty a varianty pro tlačítka, karty, navigaci, patičku, formuláře
• Barevné a textové styly pojmenované podle role
• Jedna spacing škála, žádné náhodné hodnoty
• Sekce z CMS označené, s poli a 2-3 ukázkovými položkami
• Nakreslené šablony detailů (článek, case study, produkt)
• Záměr animací zapsaný, u složitých částí Loom nebo prototyp
• Ikony jako SVG, obrázky ve zdrojové kvalitě, fonty s licencemi
• Označené H1 a hierarchie nadpisů, poznámky k alt textům
• Formuláře a integrace vypsané s cílem odesílání
• Zkontrolovaný kontrast, navržené focus a hover stavy
• Přiložená sitemapa, finální texty a seznam starých URL

Chyby, které stojí hodiny

Tohle jsou problémy, které stojí nejvíc času, zhruba podle toho, jak moc bolí.

1. Zástupné texty. Lorem ipsum skrývá, jak dlouhý je skutečný text. Finální texty mění layout a design pak neplatí.
2. Chybějící mobilní design. Vývojář ho musí navrhnout, obvykle bez zadání a bez schválení.
3. Nepropojené a odpojené styly. Každá textová vrstva má svou velikost a barvu. Systém musím zpětně dohledávat.
4. Všechno je plochý frame. Žádné komponenty, žádná opakovaná struktura, takže každou sekci stavím od nuly.
5. Neoznačené CMS. Sekce se postaví ručně a po přání klienta je editovat se předělávají na kolekce.
6. Efekty, které Webflow nativně neumí. Složitá rozmazání, blend módy a překrývající se masky vypadají ve Figmě skvěle, ale chtějí obejít. Ptejte se včas.
7. Pozdní změny po zahájení stavby. Přesunutá sekce je na papíře levná, ale když už existují třídy a interakce, je drahá.
8. Chybějící fonty. Licence, která se najde na konci projektu, je nepříjemné překvapení.

Nic z toho není chyba designu. Je to jazyková bariéra mezi Figmou a Webflow a krátký checklist ji zavře.

Můj pohled: rozpracované designy a proč pomáhá designér i vývojář v jednom

Často přebírám soubory, které nejsou hotové: desktop bez mobilu, style guide, který se zastaví v půlce, nebo klienta, který už schválil něco, co se vývojáři špatně staví. Je to normální, zvlášť když agentura honí termín.

Protože jsem designér i Webflow vývojář, nevracím to jako seznam otázek. Chybějící části, tedy mobilní layouty, stavy a mezery, dokončím a napíšu vám, jak jsem se rozhodl. Dostanete hotový web místo vlákna ticketů.

Agenturám to šetří čas projektových manažerů. Mezi designem a vývojem není překladová vrstva, nemusí se řešit, jestli rozhodnutí patří designérovi, nebo vývojáři, a není potřeba další kolo schvalování jen kvůli upřesnění záměru. Pracuji ve vašem workspace ve Webflow, se staging odkazem, a končím Loom prohlídkou. Takto spolupracuji s agenturami jako Boldhuman a Landrieau Studio. Na Stone Hedge Capital například design vzešel z Boldhumanu a postavil jsem ho já: konzervativní web pro investory s CMS a decentní animací.

Jak model funguje obecně, najdete v článku white-label Webflow vývoj. K rozpočtu se podívejte na ceny white-label Webflow. Pokud máte soubor připravený, pošlete mi ho a řeknu vám, co chybí.

Časté otázky

AutorPeter CekanakDesignér a Webflow vývojář · white-label partner pro agentury

Od roku 2018 navrhuji a stavím weby ve Webflow pro agentury a startupy — Client-First, GSAP, CMS a AI automatizace. Weby, které jsem postavil, pomohly klientovi k exitu za 10 mil. $ a jednomu SaaS ztrojnásobily poptávky dema.

Webflow Certified ExpertRelume ExpertClient-First