Exportujte návrhy z Figma do WIX Studio
- Veronika Knirsch
- 27. 3.
- Minut čtení: 5
Chcete přenést své návrhy z Figma do Wix a vytvořit responzivní weby bez námahy? S pluginem Figma to Wix Studio je to jednoduché. Rychle exportujte své návrhy, přidejte animace, interakce a laďte detaily tak, aby vaše stránky vypadaly skvěle na všech zařízeních. Pojďme si ukázat, krok za krokem, jak nejlépe postupovat při přenosu návrhů z Figmy do Wix Studia.
PŘÍSTUP K PLUGINU WIX STUDIO A JEHO INSTALACE
Pro zahájení procesu budete muset pracovat současně ve Figmě a Studiu.
Ve Figmě
Nejprve si nainstalujte plugin – buď přes stránku Figma Community, nebo přímo ze svého souboru ve Figmě.
1️⃣ Otevřete Plugins panel (Shift + I)
2️⃣ Vyhledejte "Figma to Wix Studio"
3️⃣ Klikněte na Instalovat
Po instalaci se zobrazí nový panel s instrukcemi. Klikněte na Get Started, poté zkopírujte URL souboru Figmy, který chcete propojit.
💡Tip: Pokud používáte desktopovou aplikaci Figmy, můžete použít klávesovou zkratku: Cmd/Ctrl + L pro zkopírování odkazu.
Poté přejděte do Wix Studio.
Ve Wix Studiu
1️⃣ Otevřete prázdné plátno nebo existující web v Editoru.
2️⃣ V horní liště najeďte kurzorem na logo Studio, čímž se zobrazí nabídka webu.
3️⃣ Klikněte pro rozbalení možností.
4️⃣ Vyberte Tools (Nástroje) > Import from Figma (Importovat z Figmy).
💡 Tip: Chcete-li dosáhnout 1:1 výsledku při exportu rámců z Figmy do Wix Studia, doporučuji nejprve sladit
šířku rámce v Figmě s velikostí úprav ve Studiu.
👉 Pokud to neuděláte, váš design nebude mít stejný poměr – místo toho se může zvětšit nebo zmenšit.
Výběr výchozího bodu
Při exportu máte 3 možnosti:
1️⃣ Exportovat styly (doporučeno ✅)
Přenese typografii a barvy pro maximální konzistenci designu.
Pokud styly neexportujete, importované prvky ve Studiu dostanou výchozí styl, což může ovlivnit vzhled a rozložení.
2️⃣ Exportovat rámec (pouze vybrané prvky)
Pokud exportujete rámec bez předchozího exportu stylů, budete muset ručně aktualizovat vzhled a rozložení ve Studiu.
3️⃣ Použít wireframy (začít od nuly)
Využijte 100+ předpřipravených komponent, včetně wireframů optimalizovaných pro export do Studia.
JAK EXPORTOVA STYLY
1️⃣ Vyberte rámečky
Označte všechny rámečky, které obsahují styly, jež chcete exportovat pro svůj web.
Můžete vybrat jeden nebo více rámců, včetně hlavních (top-level).
2️⃣ Automatická detekce stylů
Plugin automaticky rozpozná barvy a typografii ve vybraném rámečku.
Zahrnuje všechny textové prvky (font, velikost, barva, formátování) a také barvy tlačítek, tvarů a pozadí.
3️⃣ Kontrola a export
Před exportem si zkontrolujte nastavení stylů.
Jakmile jste spokojeni, klikněte na Exportovat styly.
Po dokončení exportu se zobrazí notifikace o úspěšném přenosu.
Importování stylů do WIX Studio
1️⃣ Najděte importované styly
Ve WIX Studio se styly zobrazí v panelu Import from Figma.
2️⃣ Použití stylů na web
Klikněte na Apply Styles to Site (Použít styly na web).
3️⃣ Kde je najdete?
Po aplikaci budou všechny vaše styly a barevná schémata dostupné v panelu Themes (Témata) pod sekcemi Typography (Typografie) a Colors (Barvy).
📌 Pokud některé písma chybí, zobrazí se upozornění v panelu. Můžete je nahrát ručně do Studio. Pokud tak neučiníte, chybějící fonty budou nahrazeny výchozími, což může ovlivnit vzhled vašeho designu.
Exportování rámců z Figma
🔄 Pokračujte zpět do Figma a vyberte Export Frame z dostupných možností.
JAK EXPORTOVAT RÁMCE
1️⃣ Klikněte na rámec, který chcete exportovat.
2️⃣ V panelu uvidíte jeho šířku.
📌 Typ importu závisí na designu rámce:
Page (Stránka) → Pouze pro top-level rámce
Section (Sekce) → Vnořené rámce širší než 1001px
Container (Kontejner) → Jakákoliv velikost rámce
Stack (Skupina) → Pouze pro rámce s auto layoutem
3️⃣ Až budete připraveni, klikněte na Export Frame a přejděte do Studio, kde ho naimportujete.
💡 Tip:Chcete-li zachovat prvky seřazené horizontálně nebo vertikálně, přidejte auto layout k vybranému rámci nebo komponentám ve Figma.➡️ Ve Wix Studio se importovaný rámec automaticky identifikuje jako Stack (flexbox kontejner), který zachová mezery a rozložení prvků, aby se nepřekrývaly.
Ve Wix Studio
📌 Exportovaný rámec se objeví v panelu Import from Figma.
1️⃣ Vyberte rámec, který chcete přidat na web.
2️⃣ Klikněte na "Add frame as" a zobrazí se možnosti importu (viz níže).
3️⃣ Vyberte formát importu:
🔹 Add as a Section → Přidá rámec jako sekci do aktuálního zobrazení.
🔹 Add as a Page → Vytvoří z rámce novou stránku. (Poznámka: Pouze top-level rámce mohou být převedeny na stránky.)
🔹 Add as a Container → Přidá rámec doprostřed vybraného prvku.
4️⃣ Klikněte na Add to Site. 📌 Na obrazovce se zobrazí oznámení o úspěšném přidání.
5️⃣ Pokračujte v přidávání rámců, dokud nebudou všechny designy převedeny do Studio.
Podpora prvků při exportu do Wix Studio
✅ Automaticky rozpoznané prvky:
Stránka
Sekce
Stack
Kontejner
Obrázky
Tlačítko
Text
GIF
SVG (max. 250 KB)
⚠️ Nepodporované prvky:
Menu, formuláře, galerie, videa a vstupní prvky (je nutné je ručně vytvořit v editoru Studio)
Export obrázků
Wix Studio automaticky rozpozná a extrahuje obrázky v rámci vybraného rámce.
Maskované obrázky se importují ve své maskované podobě, ale nelze je odmaskovat.
Všechny importované obrázky se automaticky uloží do správce médií pro budoucí použití.
Export vektorových tvarů (SVG)
Wix Studio automaticky detekuje a importuje vektorové tvary jako SVG.
Podporovány jsou SVG soubory do velikosti 250 KB.
Importované SVG se uloží do správce médií.
Tvorba sekcí v Figma
Při exportu top-level rámce se v Studio automaticky vytvoří sekce podle mezery mezi jednotlivými prvky.
Doporučení:
Uspořádejte prvky v jasně definovaných sekcích.
Zabraňte překrytí mezi sekcemi držením klávesy Cmd / Ctrl při úpravě velikosti.
Uspořádejte vrstvy v hierarchii shora dolů, aby odpovídaly vizuálnímu pořadí designu.
Podpora pozadí
✅ Wix Studio podporuje tyto typy pozadí pro sekce:
Plná barva
Obrázek
Gradient (Lineární / Radiální / Kónický)
📌 Po exportu se:
Gradienťové barvy uloží do My color gradients v panelu výběru barev.
Obrázky pozadí se uloží do správce médií.
💡 Tip: Exportujte celoplošné obrázky nebo obdélníky s výplní obrázkem, aby bylo pozadí správně zobrazeno.
Tlačítka
✅ Wix Studio importuje tlačítka jako komponenty tlačítek za podmínky, že:
Obsahují pouze text.
Mají výplňovou barvu.
Jsou vytvořeny jako symbol/frame s jedním textovým prvkem.
❌ Tlačítka obsahující ikony nebo tvary nebudou rozpoznána jako tlačítka a je nutné je vytvořit znovu.
Kontejnery
Kontejnery pomáhají strukturovat obsah na webu.
V kontejneru lze vytvořit mřížku pro přesné rozmístění prvků.
Wix Studio automaticky převádí rámce obsahující více prvků na kontejnery.
Pokud si nepřejete, aby byl rámec importován jako kontejner, odstraňte zbytečné skupiny v Figma.
Použití Auto Layout pro Stacky
✅ Stack zajistí správné zarovnání prvků v horizontálním nebo vertikálním směru.
Vertikální Stack → přidá Auto Layout v ose Y.
Horizontální Stack → přidá Auto Layout v ose X a nastaví šířku na "Hug contents".
Mezery mezi prvky v Figma se převedou na marginy v Wix Studio.
💡 Tip: Používejte Auto Layout pro prvky, které se mají přizpůsobit velikosti obrazovky.
Úpravy webu ve Wix Studio
Po importu designu z Figma můžete provádět další úpravy:
✅ Responzivita:
Použijte AI nástroj pro responzivitu nebo nastavte manuálně chování prvků.
✅ Animace a efekty:
Přidejte no-code animace pro pohyb prvků a vylepšení interaktivity.
✅ Obchodní funkce:
Připojte nativní řešení jako eCommerce, Rezervace, Restaurace, Hotely aj.
✅ Dynamický obsah:
Použijte CMS pro snadnou správu obsahu bez úprav designu.
✅ SEO optimalizace:
Wix Studio nabízí integrované nástroje pro SEO, které pomohou s lepší viditelností webu.
Publikování webu
Jakmile je vše připraveno:
1️⃣ Připojte vlastní doménu nebo použijte bezplatnou Wix doménu.
2️⃣ Klikněte na "Publish" a web je online!
Comments