Figma design को Framer में कैसे import करें

Figma design को Framer में लाने के लिए मुफ़्त plugin Figma to HTML with Framer install कीजिए, जो frames चाहिए उन्हें select कीजिए, फिर उन्हें अपने Framer project में paste कर दीजिए। Framer आपके layers, groups और structure वैसे ही रखता है, इसलिए आपको एक असली web canvas मिलता है, न कि जमा हुआ static code export। paste के बाद का सारा काम सफ़ाई का है, और इसी सफ़ाई के बारे में कोई पहले से नहीं बताता।

Figma design को Framer में import कैसे करें, step by step

Figma Community से Figma to HTML with Framer install कीजिए। यह मुफ़्त है और Framer इस पर 6 लाख से ज़्यादा users बताता है, यानी यह Framer का अपना official रास्ता है, कोई बाहरी bridge नहीं। जो layers या frames ले जाने हैं उन्हें select करके plugin चलाइए। एक message आता है कि कितने layers copy हुए। अब अपना Framer project खोलिए, canvas पर click कीजिए और paste कर दीजिए। Framer का अपना Figma to HTML page भी यही आठ steps बताता है: plugin install करना, अपने Figma design copy करना, Framer में paste करना, editing जारी रखना, उसे responsive बनाना, effects और animations जोड़ना, pages और links जोड़ना, और publish करना।

एक बार में एक ही section paste कीजिए

पूरा page frame select करके एक ही बार में मत ले जाइए। एक landing page में सैकड़ों layers होते हैं, और कुछ गड़बड़ हो जाए तो पता ही नहीं चलता कि किस हिस्से से हुई। hero paste कीजिए, hero ठीक कीजिए। logo strip paste कीजिए, logo strip ठीक कीजिए। page पर उसी क्रम में नीचे बढ़िए जिस क्रम में visitor scroll करता है। Framer खुद कहता है कि कुछ जटिल Figma structures को web पर लाने के लिए सफ़ाई की ज़रूरत पड़ती है, तो अपने हिस्से छोटे रखिए।

सबसे पहले fonts ठीक कीजिए

Framer के help docs इस पर साफ़ लिखते हैं। Figma से import करते समय जो custom font Framer के पास नहीं है, वो Framer के default font से बदल जाता है। आपका hero अचानक system sans में दिखने लगता है, हर line की लंबाई बदल जाती है और उसके साथ spacing भी। layout छूने से पहले type संभाल लीजिए। एक text layer जोड़िए, दाईं panel में font picker खोलिए, Custom tab पर जाइए, Upload Fonts पर click करके अपनी file upload कीजिए। load speed के लिए Framer .woff2 की सलाह देता है। इसके बाद import हुए text layers select करके font दोबारा लगाइए। पहले built-in library देख लीजिए, क्योंकि Framer के साथ Google Fonts और Fontshare आते हैं और हो सकता है आपका typeface उन्हीं में मिल जाए।

क्या साथ आता है और क्या नहीं

Layers, groups और hierarchy साथ आ जाते हैं। layout settings भी आती हैं, और Framer का academy lesson कहता है कि auto layout, hierarchy और fill properties अपने आप carry हो जाती हैं। जो चीज़ें Figma में कभी थीं ही नहीं, वो नहीं आतीं: breakpoints, hover states, scroll effects, या Framer वाले components. Framer की अपनी FAQ कहती है कि import के बाद static हिस्सों को असली components से बदल दीजिए। इस बात को गंभीरता से लीजिए। अपने nav, button और card को Framer components की तरह दोबारा बनाइए, वरना paste की हुई चालीस copies रह जाएंगी, जिन्हें चालीस बार edit करना पड़ेगा।

paste किए हुए frames को ऐसे stacks बनाइए जो resize हों

जिस paste किए हुए section में अब भी fixed pixel width पड़ी है, वो phone पर बाहर निकल जाएगा। Framer का troubleshooting article इसी को Phone breakpoint पर page के screen न भरने की सबसे आम वजह बताता है: कोई element mobile viewport से चौड़ा, आमतौर पर 321px जैसी कोई fixed width, या Max Width बहुत बड़ी रखी हुई। एक-एक section लीजिए, containers select कीजिए और दाईं panel के Size हिस्से में Width को fixed number से बदलकर 100% या 1fr कर दीजिए। Max Width सिर्फ़ content wrapper पर रखिए, ताकि चौड़े monitor पर आपका text column पढ़ने लायक रहे। यह काम पहले Desktop पर कीजिए, क्योंकि Desktop की values नीचे छोटे breakpoints तक जाती हैं।

अब वो चीज़ें जोड़िए जो Framer में ही हो सकती हैं

code export करने की जगह Framer इस्तेमाल करने का असली फ़ायदा यही है। अपने तीन breakpoints set कीजिए। buttons को hover और tap states दीजिए। sections में scroll reveal जोड़िए। बार-बार आने वाले blocks को components बना दीजिए, ताकि एक बदलाव हर जगह लागू हो जाए। Assets panel में Styles के नीचे अपने text styles बनाइए, Desktop, Tablet और Mobile के अलग-अलग size के साथ, ताकि type अपने आप scale हो और हर layer को हाथ न लगाना पड़े। Figma file में इनमें से कुछ भी नहीं था। यही हिस्सा एक mockup को असली page बनाता है।

हम किस क्रम में काम करते हैं

पहले fonts, फिर colours और text styles। इसके बाद ऊपर से नीचे एक-एक section लीजिए और साथ-साथ fixed widths को fill में बदलते जाइए। जो कुछ बार-बार आता है, उसके components बना दीजिए। फिर breakpoints set कीजिए, Desktop से Tablet और Tablet से Phone, और उसके बाद interactions जोड़िए। Metadata और links सबसे आख़िर में, जब structure हिलना बंद कर दे। इस क्रम में एक landing page एक दिन में बन जाता है। क्रम बिगड़ जाए तो तीन दिन लगते हैं, क्योंकि हर नया fix पिछले वाले को बिगाड़ देता है।