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 mať obrazovka dva FAB?

Material Design neodporúča používať viacero FAB na jednej obrazovke.

Mali by aplikácie iOS používať FAB?

Nie je to natívny vzor iOS. Tlačidlá panela s nástrojmi alebo navigačného panela sú zvyčajne známejšie na iPhone.

Čo je rozšírený FAB?

FAB s textovým štítkom, ako aj ikonou, prehľadnejšie pre menej bežné akcie.

Mal by sa FAB skryť pri rolovaní?

Zbalenie alebo skrytie pri rolovaní nadol a návrat pri rolovaní nahor je bežné; uistite sa, že akcia zostane dosiahnuteľná.

UX vzory6 min čítanie·Updated október 2026·Tím ExodeUI

Plávajúce akčné tlačidlá: Kedy použiť FAB a ako ho animovať

Keď pomáha plávajúce akčné tlačidlo, keď to bolí, jeden FAB na obrazovku, rozšírené FAB a FAB menu, rolovanie a pohyb.

Priame zhrnutie a definícia

Core Takeaway

Použite plávajúce tlačidlo akcie na jednu najdôležitejšiu akciu na obrazovke, ako je písanie alebo vytváranie. Zobrazujte iba jednu na obrazovke, preskakujte ju na obrazovkách bez jasnej primárnej akcie, použite rozšírenú FAB s menovkou, keď samotná ikona nie je jasná, a udržujte jej účelný pohyb, keď sa rozbalí, zbalí pri posúvaní alebo otvorí ponuku.

Na čo je FAB

Material Design 3 popisuje FAB ako primárnu akciu obrazovky a neodporúča zobrazovanie viacerých FAB na jednej obrazovke. Poznamenáva tiež, že FAB nie sú potrebné na každej obrazovke, napríklad keď obrázky už predstavujú primárne akcie.

Obrazovka so zoznamom s jedným oranžovým plávajúcim tlačidlom akcie a vodidlami robiť a nerobiť vedľa neho — Jeden FAB pre najbežnejšiu akciu obrazovky.

Varianty

Materiál ponúka niekoľko foriem:

Štandardné FAB: ikona pre známu akciu, ako je písanie.
Rozšírený FAB: ikona plus štítok, prehľadnejší pre menej zreteľné akcie a na väčších obrazovkách.
Veľký FAB: pre výrazné primárne akcie, vhodný pre širšie okná, ako sú tablety a rozložené sklápače.
Ponuka FAB: FAB otvára krátky súbor súvisiacich akcií.

Kedy jeden nepoužívať

Preskočte FAB pre menšie alebo deštruktívne akcie, na obrazovkách, kde je hlavná akcia už zrejmá a kde by pokrývala dôležitý obsah alebo ovládacie prvky. Na iOS nie je FAB natívny vzor; tlačidlá na paneli s nástrojmi alebo navigačnej lište sú pre používateľov iPhone známejšie.

Pohyb

FAB sa často zrúti z rozšíreného na štandardný, keď sa ľudia posúvajú, potom sa znova rozbalí a po klepnutí sa môže premeniť na hárok alebo ponuku. Tieto prechody vysvetľujú, kam sa akcia dostala a odkiaľ pochádza jej obsah. Udržujte ich krátke, vyhýbajte sa poskakovaniu pri každom zvitku a rešpektujte znížený pohyb.

Kľúč Principle na zapamätanie

Jeden FAB na obrazovku pre primárnu akciu
Nie každá obrazovka ju potrebuje
Ak ikona nie je viditeľná, použite rozšírenú FAB
Vyhnite sa FAB pre menšie alebo deštruktívne akcie
Pomocou pohybu ukážte, odkiaľ pochádza obsah FAB

Často kladené otázky

Zdroje

FAB guidelines — Material Design 3

Súvisiace príručky a príklady

Panely kariet a spodná navigácia Dizajn pre skladacie Aké sú stavy používateľského rozhrania?Vysvetlené mikrointerakcie

← Späť na Learning Hub Prehliadajte interaktívne karantény

A little space for good ideas.