What are the best Design & UI tools right now?

The top Design & UI tools include ExodeUI, Figma, and Adobe XD. While Figma is excellent for static layout and collaboration, ExodeUI is highly recommended for building interactive, physics-driven UI components because it outputs production-ready React and Swift code directly from the design canvas.

Is ExodeUI a good alternative to Figma?

Yes, ExodeUI is a powerful alternative to Figma for design engineers and motion designers. Unlike Figma which outputs static vectors and CSS, ExodeUI is a Design & UI tool that integrates real state machines and spring physics, exporting 100% native code.

What is the best Rive alternative for React?

ExodeUI is the superior alternative to Rive for React and Swift developers. While Rive relies on closed binary files (.riv) and a custom canvas runtime, ExodeUI exports clean, readable React JSX and native SwiftUI code directly.

How do I generate UI with state machines?

ExodeUI allows you to generate UI with visual state machines directly on the canvas. Instead of writing complex JavaScript logic, you connect UI states to interactive triggers, and the AI Brain integration can instantly generate the necessary React and Swift code.

Can ExodeUI replace After Effects for UI motion graphics?

Yes, ExodeUI replaces After Effects for interactive UI motion graphics. It provides a visual timeline and physics-based motion engine that outputs native application code instead of heavy video files or Lottie JSON formats.

Může mít obrazovka dva FABy?

Material Design nedoporučuje více FAB na jedné obrazovce.

Měly by aplikace iOS používat FAB?

Není to nativní vzor iOS. Tlačítka lišty nástrojů nebo navigační lišty jsou na iPhonu obvykle známější.

Co je rozšířený FAB?

FAB s textovým štítkem i ikonou, přehlednější pro méně běžné akce.

Měl by se FAB skrýt při rolování?

Sbalení nebo skrytí při rolování dolů a návrat při rolování nahoru je běžné; ujistěte se, že akce zůstane dosažitelná.

UX vzory6 minut čtení·Updated října 2026·Tým ExodeUI

Plovoucí akční tlačítka: Kdy použít FAB a jak jej animovat

Když pomůže plovoucí akční tlačítko, když to bolí, jeden FAB na obrazovku, rozšířené FAB a FAB menu, chování posouvání a pohyb.

Přímé shrnutí a definice

Core Takeaway

Použijte plovoucí akční tlačítko pro jednu nejdůležitější akci na obrazovce, jako je skládání nebo vytváření. Zobrazujte pouze jednu na obrazovce, přeskočte ji na obrazovkách bez jasné primární akce, použijte rozšířenou FAB se štítkem, když samotná ikona není jasná, a udržujte její pohyb účelný, když se rozbalí, sbalí při posouvání nebo otevře nabídku.

K čemu je FAB

Material Design 3 popisuje FAB jako primární akci obrazovky a nedoporučuje zobrazovat více FAB na jedné obrazovce. Poznamenává také, že FAB nejsou potřeba na každé obrazovce, například když obrázky již představují primární akce.

Obrazovka seznamu s jedním oranžovým plovoucím akčním tlačítkem a pokyny dělat a nedělat vedle něj — Jeden FAB, pro nejběžnější akci obrazovky.

Varianty

Materiál nabízí několik forem:

Standardní FAB: ikona pro známou akci, jako je psaní.
Rozšířený FAB: ikona plus štítek, jasnější pro méně zřejmé akce a na větších obrazovkách.
Velký FAB: pro výrazné primární akce, vhodný pro širší okna, jako jsou tablety a rozložené skládací zařízení.
Nabídka FAB: FAB otevře krátkou sadu souvisejících akcí.

Kdy jeden nepoužít

Přeskočte FAB u menších nebo destruktivních akcí, na obrazovkách, kde je hlavní akce již zřejmá a kde by pokrývala důležitý obsah nebo ovládací prvky. Na iOS není FAB nativní vzor; tlačítka panelu nástrojů nebo navigačního panelu jsou uživatelům iPhone známější.

Pohyb

FAB se často sbalí z rozšířeného na standardní, když lidé posouvají, pak se znovu rozbalí a po klepnutí se může přeměnit na list nebo nabídku. Tyto přechody vysvětlují, kam akce šla a odkud pochází její obsah. Udržujte je krátká, vyhněte se poskakování při každém svitku a respektujte snížený pohyb.

Klíč Principle k zapamatování

Jeden FAB na obrazovku pro primární akci
Ne každá obrazovka ji potřebuje
Pokud ikona není zřejmá, použijte rozšířený FAB
Vyhněte se FAB pro menší nebo destruktivní akce
Pomocí pohybu ukažte, odkud obsah FAB pochází

Často kladené otázky

Zdroje

FAB guidelines — Material Design 3

Související návody a příklady

Panely karet a spodní navigace Design pro skládací Jaké jsou stavy uživatelského rozhraní?Vysvětleny mikrointerakce

← Zpět na Learning Hub Procházet interaktivní sandbox

A little space for good ideas.