Languageहिन्दी
स्तंभ 06 · डिज़ाइन सिस्टम
मोशन टोकन: डिज़ाइन सिस्टम के लिए संपूर्ण आर्किटेक्चर
अपने संपूर्ण उत्पाद पारिस्थितिकी तंत्र में गति को मानकीकृत करें। दर्जनों डेवलपर रिपॉजिटरी में मनमाने ढंग से 300ms क्यूबिक बेज़ियर को हार्डकोड करना बंद करें।
What is मोशन टोकन: in ExodeUI?
मोशन टोकन मानकीकृत डिज़ाइन टोकन हैं जो मशीन-पठनीय प्रारूप में एनीमेशन मापदंडों को परिभाषित करते हैं - जैसे कि स्प्रिंग कठोरता, भिगोना अनुपात, द्रव्यमान, सहजता वक्र और अवधि। हमारा मुफ़्त मोशन टोकन जेनरेटर एक स्टार्टर सेट बनाता है जिसे आप CSS और JSON के लिए निर्यात कर सकते हैं, और टोकन बिल्ड टूल उन्हें प्रत्येक प्लेटफ़ॉर्म के लिए कोड में बदल देते हैं।
कोर आर्किटेक्चर
इंजीनियर और डिज़ाइनर क्यों चुनते हैं ExodeUI
Design, logic and motion in one file that runs inside your app.
स्प्रिंग भौतिकी टोकन
गति को मनमानी समय संख्याओं के बजाय भौतिक टोकन (कठोरता, भिगोना, द्रव्यमान) के साथ परिभाषित करें।
स्वचालित कोड जनरेशन
अपने मौजूदा टोकन बिल्ड पाइपलाइन के साथ टोकन को CSS वेरिएबल और प्लेटफ़ॉर्म कोड में बदलें।
सिमेंटिक पदानुक्रम
मोशन टोकन को वैश्विक, सिमेंटिक और घटक स्तरों (जैसे मोशन.स्प्रिंग.स्नैपी, मोशन.फीडबैक.सक्सेस) में व्यवस्थित करें।
डिज़ाइन टूल सिंक्रोनाइज़ेशन
Figma वेरिएबल्स और प्रोडक्शन Git कोडबेस के बीच मोशन टोकन को सहजता से सिंक करें।
वस्तुनिष्ठ मूल्यांकन
कैसे ExodeUI से तुलना की जाती है Traditional Design Tokens (Color/Type Only)
Where ExodeUI is stronger, and what to weigh before you switch.
ExodeUI
- भौतिक स्प्रिंग टोकन और वेग वक्रों के लिए पूर्ण प्रथम श्रेणी समर्थन
- मूल मोबाइल (SwiftUI/Compose) और वेब प्रारूपों में एक साथ निर्यात करता है
- विज़ुअल इंस्पेक्टर डिजाइनरों को वास्तविक समय में टोकन भौतिकी का अनुभव कराता है
- प्रेफरेंस-रिड्यूस्ड-मोशन के लिए स्वचालित एक्सेसिबिलिटी फ़ॉलबैक
Traditional Design Tokens (Color/Type Only)
- अधिकांश टोकन उपकरण केवल स्थिर रंग, टाइपोग्राफी और रिक्ति का समर्थन करते हैं
- मोशन को "300ms ईज़-इन-आउट" जैसे अपरिष्कृत अवधि के स्ट्रिंग में घटा दिया गया है
- कोड पर शिपिंग से पहले टोकन गतिशीलता का परीक्षण करने का कोई दृश्य तरीका नहीं है
- इंजीनियरों को फ्रेमवर्क कोड में मोशन स्पेक्स की मैन्युअल रूप से व्याख्या करनी चाहिए
डेवलपर हैंडऑफ़
इसे अपने कोड में उपयोग करना
Your app loads the compiled file through the ExodeUI runtime and talks to it through inputs and events.
'एक्सोडुई' से आयात { ExodeUICanvas };
// स्प्रिंग्स, स्टेट्स और टाइमिंग .exode फ़ाइल में लाइव हैं (में डिज़ाइन किया गया है)।
//संपादक). आपका कोड इनपुट भेजता है और घटनाओं को वापस सुनता है।
निर्यात फ़ंक्शन स्नैपी बटन() {
वापसी (
<ExodeUICanvas
src='/snappy_button.bexode'
onTrigger={(नाम) => कंसोल.लॉग('ExodeUI इवेंट:', नाम)}
/>
);
}डिज़ाइन सिस्टम गति में विफल क्यों होते हैं?
आधुनिक डिज़ाइन प्रणालियों में उत्तम रंग पैलेट, टाइपोग्राफी स्केल, ऊंचाई छाया और रिक्ति ग्रिड हैं। लेकिन गति भूली हुई डिज़ाइन टोकन बनी हुई है। अधिकांश संगठनों में, मोशन दस्तावेज़ीकरण में अस्पष्ट दिशानिर्देश शामिल होते हैं जैसे "एनिमेशन तेज़ होना चाहिए" या स्थिर 250ms अवधि चर।
- असंगत ब्रांड अनुभव: एक इंजीनियर ईज़-आउट का उपयोग करता है, दूसरा ईज़-इन-आउट का उपयोग करता है, और मोबाइल ऐप्पल डिफ़ॉल्ट का उपयोग करता है।
- भंगुर अवधि वक्र: समयबद्ध एनिमेशन छोटे तत्वों पर धीमे लगते हैं और बड़ी निचली शीटों पर तेज़ लगते हैं।
- अभिगम्यता की उपेक्षा: टीमें सभी घटकों में सुसंगत कम गति वाले ओवरराइड को लागू करने में विफल रहती हैं।
3-स्तरीय मोशन टोकन पदानुक्रम
ExodeUI तीन संरचित स्तरों में मोशन टोकन मॉडल करता है:
टियर 1: वैश्विक आदिम टोकन
कच्चे गणितीय स्थिरांक (जैसे, कठोरता-400, अवमंदन-25, द्रव्यमान-1)।
टियर 2: सिमेंटिक इंटेंट टोकन
उद्देश्य से जुड़े कार्यात्मक नाम (उदाहरण के लिए, मोशन.इंटरैक्टिव.स्नैपी, मोशन.मोडल.एंटर)।
टियर 3: घटक-विशिष्ट टोकन
विशिष्ट घटकों (जैसे, बटन.टॉगल.स्विच) से जुड़ा ओवरराइड।
Topic Cluster Network
कनेक्टेड अवधारणाओं और टूलींग का अन्वेषण करें
प्रश्न मिले?
अक्सर पूछे जाने वाले प्रश्नों
वास्तविक गति के साथ जीवित घटकों का निर्माण करें।
Start free in the browser or download the desktop app. Compile spring physics and state machines directly to React and SwiftUI.