LanguageБългарски
Стълб 02 · Ръководство за дизайн на движение
Figma Motion: Какво може и какво не може да прави (и какво да използва за производство)
Figma Motion е най-бързият начин за проектиране на движение вътре в Figma. ExodeUI е, когато това движение трябва да се изпълнява в продукта, със състояния, физика и вход от потребителя.
What is Figma Motion: in ExodeUI?
Figma Motion е вграденият анимационен режим на Figma, стартиран в отворена бета версия на 24 юни 2026 г. Той добавя времева линия към дизайнерска рамка, така че можете да зададете позиция на ключовия кадър, мащаб, ротация, цвят и непрозрачност, след което да експортирате резултата като MP4, WebM, GIF, анимиран SVG, Lottie или dotLottie. Спира до файла с дизайн: експортирана анимация не изпълнява вашия продукт сама и състоянието, въвеждането и обвързването на данни все още трябва да бъдат вградени в код. ExodeUI е по-подходящ, когато движението трябва да се изпълнява в реално приложение в мрежата, iOS и Android, управлявано от състояния, физика и вход от потребителя.
Основна архитектура
Защо инженерите и дизайнерите избират ExodeUI
Design, logic and motion in one file that runs inside your app.
Изпълняем компонент срещу експортиран клип
ExodeUI изходът е .exode файл, който времето за изпълнение се възпроизвежда във вашето приложение. Figma Motion експортира видео, GIF, SVG или Lottie, което възпроизвежда анимация, но не пренася състоянието на вашето приложение.
Държавни машини, свързани към вашето приложение
Моделирайте неактивност, зареждане, успех и грешка като състояния с тригери, които вашият код задейства, вместо да държи всяка комбинация като Figma вариант.
Физика, която реагира на въвеждане
Пружините и непрекъснатата инерция работят в живия продукт, така че плъзгането или хвърлянето продължава със скоростта на потребителя, а не с фиксирана крива.
Донесете своята Figma работа
Рамките се срещат с приставката ExodeUI Figma, така че продължавате да проектирате в Figma и да изграждате интерактивната част в ExodeUI.
Обективна оценка
Как ExodeUI се сравнява с Figma Motion
Where ExodeUI is stronger, and what to weigh before you switch.
ExodeUI
- Доставя се като работещ компонент: файлът .exode се възпроизвежда в React, React Native, SwiftUI, Flutter и др., така че движението не се възстановява на ръка
- Състояние машина с входове и събития, които вашето приложение задейства по време на изпълнение
- Пружини и физика, които реагират на скоростта на плъзгане и жестове в живия продукт
- MCP сървър, така че инструментите за AI кодиране като Claude Code и Cursor могат да създават и редактират файла за движение
Figma Motion
- Движението живее във файла с дизайн, освен ако не го експортирате като видео, GIF, SVG или Lottie; той не работи като компонент на вашето приложение самостоятелно
- Експортираните Lottie и dotLottie могат да възпроизвеждат анимация и да пренасят интерактивни състояния на ниво формат, но не са свързани с данните на вашето приложение
- Figma Motion е в отворена бета версия; публикуването на анимирани компоненти, генерирането на агенти и експортирането с висока разделителна способност изискват платено пълно място
- 3D трансформациите са обявени като предстоящи скоро, но не са изпратени
Разработчик Handoff
Използването му във вашия код
Your app loads the compiled file through the ExodeUI runtime and talks to it through inputs and events.
импортиране { ExodeUICanvas } от 'exodeui';
// Пружини, състояния и синхронизиране на живо във файла .exode (проектиран в
// редактор). Вашият код предава входове и чува събитията обратно.
функция за експортиране FluidCard() {
връщане (
<ExodeUIПлатно
src="/fluid_card.bexode"
onTrigger={(име) => console.log('ExodeUI събитие:', име)}
/>
);
}Какво е Figma Motion
Figma Motion е режим в Figma, който поставя времева линия на анимация до вашия дизайн. Figma го представи на Config 2026 и започна да го разпространява на 24 юни 2026 г. и все още е в отворена бета версия, така че функциите могат да се променят. Превключвате кадър в режим на движение и свойства на ключовия кадър като позиция, мащаб, въртене, цвят, ширина на щриха, изрязване на пътя и дъги. Доставя се с предварително зададени анимации (избледняване, завъртане, мащабиране, преоразмеряване и други) и персонализирани стилове, променливи на движение за облекчаване и синхронизиране, криви на Безие и пружини и автоматично натискане, което записва промените, докато търкате. По-късните актуализации добавиха текстова анимация и аудио на времевата линия. Движението е налично, докато редактирате във всички Figma планове, включително Starter; Figma за правителствените планове го няма.
- Стартира в Config 2026, разпространява се от 24 юни 2026 г., в отворена бета версия
- Времева линия, ключови кадри, предварително зададени настройки, персонализирани стилове, променливи на движение и пружини
- Текстова анимация и аудио на времевата линия пристигнаха в актуализацията на 30 септември 2026 г
- 3D трансформациите са посочени като очаквани скоро на страницата Figma Motion
Какво Figma Motion може да експортира
От рамка с анимация можете да експортирате MP4, WebM, GIF или анимиран SVG директно от Figma. На 30 септември 2026 г. Figma добави и Lottie и dotLottie експорт. Експортиране, по-голямо от 1920 на 1080 или над 30 кадъра в секунда, се нуждае от платен план. Експортирането на Lottie не поддържа всичко: шейдъри, видео и ъглови градиенти излизат като статични изображения, а някои ефекти като падаща сянка, шум и стъкло се изравняват до техния вид на първия кадър, така че Figma препоръчва да тествате файла в плейъра, който планирате да използвате. Режимът Dev показва пълната времева линия на движение и може да копира анимационни стойности като CSS, JSON или React (включително motion.dev), а Figma MCP сървърът предава анимации на кодиращи агенти. Копирането на код и публикуването на анимирани компоненти изисква платено пълно място или място за разработчици.
Видео и изображение
MP4, WebM, GIF и анимирани SVG, ограничени до 1920×1080 и 30 FPS при безплатни планове.
Lottie и dotLottie
Добавен на 30 септември 2026 г.; шейдъри, видео и ъглови градиенти не се поддържат, а някои ефекти се изравняват до първия кадър.
Код и агенти
Режимът Dev копира стойности като CSS, JSON или React, а сървърът Figma MCP предава движение на кодиращи агенти на платено място.
Къде Figma Motion спира за производство
Figma Motion е силен в проектирането на движение до интерфейса и неговият експорт и изход в режим Dev затварят голяма част от старата празнина при предаване. Ограничението е това, което е експортирането: видео, GIF или Lottie файл е актив за възпроизвеждане, а кодът от Dev Mode е фрагмент, който разработчикът все още свързва. Нито един от тях не работи самостоятелно като компонент на вашия продукт и нито е обвързан със състоянията и данните във вашето приложение. Ако даден бутон трябва да е неактивен, да се задържа, да е натиснат, да се зарежда, да е деактивиран и да е в грешка и анимацията трябва да реагира на данни и въвеждане от потребителя в мрежата, iOS и Android, тази логика трябва да бъде изградена във всяка кодова база. Figma Motion сега покрива повече от дизайна на движението и стъпката на предаване, отколкото при стартирането; стъпката по време на изпълнение е мястото, където се предава на създаден за него инструмент.
Ако движението трябва да се изпълнява в приложението
ExodeUI е инструмент за браузър и настолен компютър за интерактивен потребителски интерфейс и анимация за дизайнери, разработчици и AI агенти. Изграждате движението веднъж в отворен .exode файл с автомати, пружинна физика, входове и събития, след което го изпращате с пакети за изпълнение за React, Vue, Svelte, Angular, Solid, React Native, SwiftUI и Flutter. Вашият код предава входове и чува събитията обратно, така че същият файл се изпълнява в приложението, вместо да бъде преустройван за платформа. MCP сървър позволява на Claude Code, Cursor и други инструменти за кодиране на AI да създават и редактират файла от подкани на обикновен език. Можете да въвеждате рамки от Figma с плъгина ExodeUI Figma. Ние правим ExodeUI, така че претеглете тази част съответно.
Topic Cluster Network
Разгледайте свързаните концепции и инструменти
ExodeUI срещу Figma Motion
Разликата във времето на изпълнение, една до друга
Преглед на Figma до Exode
Мигриране на работата по движение на Figma към ExodeUI
Среда за разработка на движение
Разгледайте пълната категория MDE
Инструмент за преобразуване на Figma в Exode
Превърнете анимационните стойности на Figma в производствени пружини
Речник: Пролетна физика
Обяснена математика на пружината, затихване и твърдост
Имате въпроси?
Често задавани въпроси
Изградете живи компоненти с реално движение.
Start free in the browser or download the desktop app. Compile spring physics and state machines directly to React and SwiftUI.