Dnes si povíme o interaktivních součástech – nové funkčnosti beta- společnosti Figma.
Dobrý den! Jmenuji se Evgeny Shevtsov, jsem vedoucím směru UX v Usetechu a ve svém volném čase provozuji telegramový kanál Mamkin Designer, kde hovořím o životě designéra a tricích ve Figmě.
Na posledním programu Figma Config 2020 byla představena nová funkcionalita, která vám umožní nevytvářet další obrazovky nebo rozložení „berlí“ pro pokročilé zobrazování prototypů ve Figmě.
V březnu 2021 se interaktivní komponenty konečně dočkaly světlo, i když zatím v beta testu. Kdokoli se může přihlásit a získat přístup během několika dní.
Zaregistrujte se k interaktivním komponentům beta Pomocí interaktivních komponent můžete přidávat interakce mezi variantami a znovu je používat v… docs.google.com
Figma varoval uživatele, že nová funkce ještě nemusí fungovat správně a měli byste je používat opatrně.
Jak to funguje
Proces vytváření interaktivních komponent je velmi jednoduchý a souvisí s jednou z funkcí – variantami.
Musíme vytvořit komponentu, do které umístíme všechny naše varianty této komponenty. Otevřete panel „Prototyp“ a propojte jednotlivé varianty komponent navzájem konkrétní událostí.
Dále uvedu malý příklad práce s interaktivní komponentou. Pokud nejste obeznámeni se základními prototypy Figmy a Varianty, pak je vhodná doba si je přečíst.
Příklad
Jako příklad si vytvořme zavaděč, který se bude neustále točit . Sestavme jej ve variantách a pomocí inteligentní animace jej propojíme do prototypu.
Krok 1. Hlavní komponenta
Musíme vytvořit hlavní komponentu, která bude ovládat naše možnosti.
V mém případě jsou to dvě elipsy, jedna s plným tahem, druhá oříznutá na čtvrtinu. Zabalíme dva objekty do komponenty a pojmenujeme ji .loader .
Krok 2. Proveďte hlavní složka
Vytvoříme duplikát komponenty (instance) a zabalíme ji znovu do komponenty. Měli bychom tedy mít strukturu vnořených vrstev jako na obr.
Krok 3. Vytváření variant
Nyní musíte povolit varianty pro nově vytvořenou komponentu. Potřebujeme 4 možnosti. Vrstvy by měly být vnořeny, jak je znázorněno na obrázku 3.
Hlavní složkou je & gt; Možnost – & gt; .loader (instance hlavní součásti)
Krok 4. Otočení možností
Aby se náš nakladač roztočil, je nutné umístit každou možnost do správné polohy.
Důležité: není nutné měnit úhel otočení pro samotnou variantu, ale pro instanci hlavní komponenty v ní vnořené. Viz obrázek 4
Krok 5. Propojení variant
Nyní musíme nastavit spouštěče chování pro variace. ..
Na kartě Prototyp přejděte doprava, vyberte vůbec první možnost zavaděče. Vedle něj se objeví bod, ze kterého vytáhneme šipku na druhou možnost.
Tuto operaci provádíme se všemi možnostmi. Propojme poslední s první.
V nastavení prototypu proveďte následující nastavení:
- Událost, při které dojde k přechodu: Po zpoždění.
Tato událost nevyžaduje zásah uživatele, událost se spustí automaticky podle nastaveného časového zpoždění. - Zpoždění: 1 ms;
- Animace: Inteligentní animace.
Inteligentní animace rozumí poloze a názvu vrstev, což umožňuje plynulé přechody na prototypu; - Typ animace: Lineární.
Lineární animace, takže se nic nezpomaluje ani nezrychluje. - Rychlost animace: volitelná.
V mém příkladu to stojí 300 ms a to mi stačí, ale můžete experimentovat a nastavit požadovanou rychlost.
Krok 6. Spusťte prototyp
< p> Vyjmeme naši součást, abychom vytvořili rám a spustili prototyp.
Nuance
Dva body, které bych rád objasnil:
- u variant vždy vytvořte hlavní komponentu, se kterou můžete centrálně spravovat své varianty;
- ve jménu hlavní komponentu, dal jsem tečku, takže figma bude ignorovat komponentu a nevloží ji do sdílené knihovny. Výstup lib bude tedy čistý a bez duplikátů.
Závěr
V několika krocích jsme sestavili jednoduchou interaktivní komponentu. Tyto komponenty lze dále vložit do dalších interaktivních komponent, například do tlačítek.
Zapamatovat a buďte opatrní – toto je pouze beta funkce a může být chybná. Nespouštějte to na velkých bojových projektech, kde je zapojeno mnoho lidí z týmu.
Pokud se chcete dozvědět více o interaktivních součástech, můžete si prohlédnout video, kde shromažďuji příklady: tlačítka, zavaděč, hamburgerová nabídka, která se změní na zavírací tlačítko, rozevírací seznamy se zaškrtávacími políčky a tipy.
< p> Vezmeme-li v úvahu složité příklady: běžící sekundy, indikátor průběhu a posuvník hlasitosti.
Také provozuji telegramový kanál o designu, návrhových tématech a tricích ve Figmě.
interaktivní komponenty. Cvičení a příklady //Mamkin Designer
Související materiály:
Soubor pro nahrávání komunit Figma:
Figma – Infinity Loader (Varianty + Interaktivní … Figma Community file – Telegram Channel: https://t.me/uxrdesign Nyní ve vašich prototypech nejsou žádné gify … www.figma.com
Hřiště pro interaktivní komponenty:
Figma – hřiště pro interaktivní komponenty Figma … Soubor komunity Figma – sledujte zaznamenaný přímý přenos! Zjednodušte vytváření prototypů pomocí opakovaně použitelných … www.figma.com
Získejte beta přístup k interaktivním komponentám:
Zaregistrujte se k interaktivním komponentům beta S interaktivními komponentami můžete přidávat interakce mezi variantami a znovu je používat na… docs.google.com
