Sníte o vlastním webu, ale děsí vás představa programování nebo složitého nastavování WordPress pluginů? Nebo jste grafik, který chce pracovat rychleji a efektivněji? Vítejte v éře no-code nástrojů, kde vládne jeden král – Framer AI.
Framer se na trhu objevil jako nástroj pro prototypování, ale rychle se vyvinul v plnohodnotný nástroj pro tvorbu a publikaci webů. S příchodem umělé inteligence (AI) se z něj stal absolutní zabiják pro ty, kteří chtějí výsledky "hned teď". V tomto tutoriálu vám krok za krokem ukážu, jak Framer AI funguje, jak si s ním vytvořit web od nuly a proč je volbou číslo jedna pro designéry i začátečníky.
Co je Framer AI a proč je tak populární?
Framer je webový nástroj, který kombinuje sílu Adobe XD (pro design) a Webflow (pro vývoj). Umožňuje vám navrhovat webové stránky vizuálně, jako byste kreslili obrázek, a Framer za vás píše kód (HTML, CSS a JS).
Klíčové vlastnosti, které Framer odlišují od konkurence:
- Plná designová svoboda: Nejsete omezeni šablonami. Můžete dělat cokoliv, od jednoduchých landing pages po složité webové aplikace.
- CMS (Content Management System): Správa obsahu je snadná. Můžete mít blog, referencované projekty nebo katalog produktů.
- Vestavěné SEO: Framer se postará o technické SEO za vás, aby se váš web dobře umisťoval ve vyhledávání.
- AI generátor: Stačí napsat větu o tom, co chcete, a AI vám vygeneruje celý návrh webu.
A to nejlepší? Základní plán je zdarma a umožňuje publikovat neomezené množství stránek na doméně .framer.website.
Krok 1: První kroky a "Magický" AI Prompt
Vše začíná na framer.com. Nemusíte nic stahovat, Framer běží kompletně v prohlížeči.
- Registrace: Vytvořte si účet pomocí e-mailu nebo Google účtu.
- Výba šablony: Po přihlášení uvidíte dvě hlavní možnosti – Start from a blank canvas (Začít od nuly) nebo Start with AI (Začít s umělou inteligencí).
Jak používat Framer AI?
Zde ta zábavná část. V sekci Start with AI uvidíte textové pole. Zde napíšete tzv. prompt (příkaz). Čím konkrétnější budete, tím lepší výsledek dostanete.
Příklad špatného promptu:
"Vytvořte web." (Příliš obecné, AI nebude vědět, co má dělat)
Příklad skvělého promptu:
"Vytvořte moderní landing page pro mou kavárnu 'Pražská Zrnka'. Použij teplé barvy, hnědou a béžovou. Sekce: Hero s velkou fotkou kávy, O nás, Naše nabídka (espressa, latte), Galerie a Kontakt. Minimalistický styl, elegantní typografie."
Jakmile zadáte tento text a stisknete Generate, Framer AI začne pracovat. Během několika sekund vám předloží hotový návrh, který bude obsahovat texty, obrázky (generované AI) i základní strukturu.
Tip pro copywritery: I když AI vygeneruje texty, vždy je upravte. Nikdo nezná váš byznys lépe než vy. Texty z AI berte jako kostru, kterou oživíte svým tónem komunikace.
Krok 2: Práce s rozhraním a editace
Nyní se nacházíte v editoru. Na první pohled může vypadat trochu matoucím, ale logika je jednoduchá.
Pracovní plocha (Canvas)
Uprostřed vidíte svůj web. Můžete na něj klikat a vybírat jednotlivé prvky.
Vrstevník (Layers Panel)
Vlevo vidíte stromovou strukturu vaší stránky. To je klíčové pro orientaci. Pokud se vám ztratí nějaký prvek v náhledu, najdete ho zde. Je to jako ve Photoshopu nebo Figma – máte své sekce, kontejnery a uvnitř nich texty a obrázky.
Vlastnosti (Properties Panel)
Vpravo se nastavují věci vybraného prvku. Zde měníte barvy, velikosti písem, okraje (padding/margin) a efekty.
Jak upravit obsah?
Jednoduše klikněte na text na ploše a přepište ho. Klikněte na obrázek a nahraďte ho vlastním (můžete ho nahrát z počítače nebo vložit odkaz z Unsplashu/Flickr přímo ve Frameru).
Krok 3: Základy designu – Barvy, Typografie a Grid
Aby web vypadal profesionálně, musíte sjednotit design. Framer na to má skvělý systém.
Nastavení Layout (Rozložení)
Toto je část, kde začátečníci nejčastěji chybují. V Frameru musíte pochopit rozdíl mezi Auto Layout (Flexbox) a Stack.
- Auto Layout: Používá se, když chcete zarovnat prvky vedle sebe nebo pod sebe a chcete, aby se automaticky přizpůsobovaly. Například tlačítka v navigaci nebo sekce funkcí. Zapnete ho v pravém panelu tlačítkem "Auto Layout".
- Stack: Starší způsob, ale stále užitečný pro jednoduché zarovnání pod sebe.
Praktický příklad: Chcete vytvořit sekci "Naše služby". Vytvořte kontejner, zapněte mu "Auto Layout" a nastavte směr na svislý (Vertical). Do něj vložte tři menší kontejnery pro jednotlivé služby. Díky tomu se při změně velikosti okna prohlížeče vše hezky posouvá.
Globální styly (Design System)
Profesionálové nepřepisují barvu u každého tlačítka zvlášť. V horním menu klikněte na Project Settings (ikona ozubeného kola) a poté na Typography a Colors.
Zde definujete:
- Hlavní barvu (Primary Color): Tuto barvu budou mít všechna tlačítka a odkazy automaticky.
- Písma: Vyberte si písmo pro nadpisy (např. Inter) a pro tělo textu (např. Roboto). Framer tyto fonty automaticky načte z Google Fonts.
Díky tomu, když změníte barvu v nastavení, změní se na celém webu okamžitě.
Krok 4: Interaktivita a Animace (To pravé ořechové)
Framer je proslulý svými animacemi. To je to, co dělá web "živým".
Hover Effects (Efekty po najetí myší)
Vyberte si tlačítko. V pravém panelu přepněte záložku na Interaction. Zde můžete nastavit, co se stane, když uživatel najede myší.
- Změna barvy.
- Zvětšení (Scale).
- Stín (Shadow).
Stačí kliknout na + a přidat efekt.
Prototypování (Klikání mezi stránkami)
Pokud máte více stránek (např. Domů, O nás, Kontakt), chcete mezi nimi vytvořit odkazy.
- Označte tlačítko v menu.
- V pravém panelu v sekci Link zvolte cílovou stránku.
- Zapněte Transition (Přechod).
- Můžete si vybrat efekty jako Fade, Push, Slide nebo dokonce animace z aplikace Lottie.
Krok 5: CMS a Blogování
Framer není jen pro jednoduché stránky. Má mocný CMS (Content Management System). To znamená, že data oddělíte od designu.
Příklad: Chcete sekci Portfolio. Místo toho, abyste kopírovali sekci "Projekt 1" desetkrát a měnili text, vytvoříte v CMS Collection (Kolekci).
- Vlevo v panelu přejděte na záložku CMS.
- Vytvořte novou kolekci "Projekty".
- Definujte pole: Název projektu, Popis, Obrázek, Odkaz.
- Vytvořte několik záznamů (projektů).
Nyní se vraťte do designu, vytvořte jeden "šablonovací" prvek (jak má jeden projekt vypadat) a spojte ho s daty z CMS. Framer automaticky vygeneruje tolik kopií, kolik máte položek v CMS. Je to efektivní a šetří hodiny práce.
Krok 6: Publikace a Doména
Jste spokojeni s výsledkem? Je čas světlo světa vidět.
V pravém horním rohu klikněte na tlačítko Publish.
- Zdarma: Framer vám vygeneruje odkaz typu
vase-jmeno.framer.website. Ten můžete sdílet hned. - Vlastní doména: Pokud máte vlastní doménu (např. z Wedosu nebo Forpsi), můžete ji připojit. V plánu Free si ji musíte nastavit manuálně přes DNS záznamy (CNAME). V placených plánech (Basic, Pro) to Framer udělá za vás nebo vám poskytne SSL certifikát a lepší výkon.
SEO Checkliste před publikací
Než kliknete na publikovat, projděte si nastavení stránky (klikněte na ikonu stránky vlevo nahoře):
- Title: Název stránky (zobrazuje se ve vyhledávání).
- Description: Krátký popis webu.
- Social Image: Obrázek, který se zobrazí, když někdo sdílí váš odkaz na Facebooku nebo LinkedInu.
Proč zvolit Framer místo WordPressu nebo Webflow?
Mnoho lidí se ptá: "Proč bych se měl učit nový nástroj?"
Odpověď je jednoduchá: Rychlost a svoboda.
- Oproti WordPressu: Nemusíte řešit aktualizace pluginů, bezpečnostní díry nebo pomalé načítání. Framer je extrémně rychlý. Navíc design ve WordPressu je často "krabicový" – děláte to, co šablona dovolí. Ve Frameru děláte, co chcete.
- Oproti Webflow: Webflow je mocný, ale extrémně složitý na naučení. Framer je intuitivní. Pokud umíte pracovat v PowerPointu nebo Canvě, pravděpodobně se ve Frameru zorijentujete během hodiny.
Shrnutí: Je Framer AI to pravé pro vás?
Pokud jste začátečník, Framer AI vám umožní vytvořit web, který vypadá, jako by ho dělal profesionální designér za tisíce korun. AI vám dodá návrh, vy jen doladíte detaily.
Pokud jste designér, Framer vám dá nástroje, které potřebujete pro pixel-perfect výsledky, aniž byste museli být programátorem.
Začněte zdarma. Vytvořte si první jednoduchou stránku pro svůj koníček, portfolium nebo malou živnost. Uvidíte, že tvorba webu může být zábava, ne noční můra.
Jste připraveni začít?
Navštivte Framer.com a pusťte se do tvorby. Máte nějaké otázky ohledně nastavení nebo potřebujete poradit s vaším prvním projektem? Dejte nám vědět v komentářích níže nebo se podívejte na další návody zde na začínámsAI.cz!