AI ve webdesignu? Framer AI, HTML do Framer, Figma do Framer

Umělá inteligence se dostává nebo už dostala do spousty odvětví, a webdesign není výjimkou. V tomto videu a článku se podíváme na to, jak vypadá AI v pojetí Frameru, aplikace pro tvorbu webů. A k tomu si představíme další dvě užitečné funkce, které Framer nabízí. Také si odpovíme na otázku, jestli AI vezme práci mě a dalším designérům a tvůrcům webů. Tak jdeme na to.

Pokud nechcete číst, tento obsah jsem připravil i jako video. Textová podoba následuje hned pod ním.

Odebírat můj youtube

Umělá inteligence se dostává a nebo už dostala do spousty odvětví, a webdesign není výjimkou. V článku se podíváme na to, jak vypadá AI v pojetí Frameru, aplikace pro tvorbu webů. A k tomu si představíme další dvě užitečné funkce, které Framer nabízí.

‍

AI ve Frameru

Framer je nástroj pro tvorbu webů, o kterém se můžete dozvědět více v mém předchozím článku. Nyní se podíváme na to, jak Framer implementoval umělou inteligenci do procesu tvorby webů dvěma způsoby:

‍

Vylepšování textu: Pokud napíšete nějaký text a kliknete na ikonku AI, Framer vám text přepíše, aby byl lepší a čtivější. Stačí tedy zadat jenom základní zadání, co v textu má být, a AI to už napíše správně. Co je podstatné, funguje to i v češtině. Tuto funkci možná znáte z ChatGPT, ale tady je super, že je to přímo součástí Frameru.

‍

‍

Generování webu

Druhá AI funkce je určitě zajímavější. Napíšete, co chcete vytvořit za web – svůj promt, tedy představu o designu, oboru, sekcích a podobně – a Framer vám na základě toho vygeneruje web. Pak už stačí jen přepsat text, vyměnit obrázky a web spustit. Zní a vypadá to neuvěřitelně, ale jak to funguje v praxi? Na to se podívejte ve videu výše.

‍

Zhodnocení

I když to není úplně dokonalé, je nutné brát v potaz, že jsme na začátku. Stačí se podívat, kam se dostaly aplikace jako ChatGPT nebo Midjourney za krátkou dobu. Nemyslím si, že AI bude úplně nahrazovat designéry, minimálně ne ty kvalitní. Spíš bude skvělým pomocníkem v rukou někoho, kdo ví, co dělá a co chce. Ale necháme se překvapit.

‍

Další užitečné funkce Frameru

Framer umí i další kouzla, která se sice už AI netýkají, ale pořád dokážou v mnoha situacích skvěle pomoct a ulehčit práci.

‍

HTML do Framer

Představte si situaci, že máte starý web, ať už statický, nebo třeba na WordPressu, a chcete ho převést do Frameru. Standardní cesta by byla, že se to musí do Frameru předělat ručně. Ale díky doplňku do prohlížeče Google Chrome vyberete část, kterou chcete zkopírovat, a jednoduše ji vložíte do Frameru. Takhle můžete postupovat i s celým webem. Z mých testů to funguje poměrně dobře – své mouchy to má, ale byl jsem pozitivně překvapený.

‍

Figma do Framer

Další způsob, jak dostat design do Frameru, aniž byste ho museli vytvářet přímo v něm, jsem zmínil už v předchozím článku o Frameru. Pokud máte design webu ve Figmě, což je skvělý nástroj pro tvorbu designu a prototypů, tyto dva nástroje spolu dobře spolupracují. Framer má podobný způsob ovládání jako Figma. Stačí mít modul a pokud dodržujete a využíváte funkce Figmy, jako je správa stylů nebo responzivita, lze to krásně vložit do Frameru. Pak už jen dopracujete funkčnost, propojíte odkazy, animace atd. Funguje to skvěle, pokud je dobrá příprava už ve Figmě.