Figma file ऐसे बनाइए कि Framer build तेज़ चले

अपनी Figma file ऐसे बनाइए। desktop frame 1200 चौड़ा रखिए। हर container पर auto layout लगाइए, बाहर वाले frame पर भी। हर element के लिए fill या fixed का फ़ैसला Figma में ही कर लीजिए। इतना कर लिया तो landing page एक दोपहर में Framer में आ जाता है। छोड़ दिया तो आधा page हाथ से दोबारा बनाना पड़ता है, और यही एक दिन के build और तीन दिन के build का फ़र्क़ है।

उन्हीं widths पर design कीजिए जो Framer असल में इस्तेमाल करता है

Framer के canvas में तीन breakpoints आते हैं, और उसके product pages पर tabs दिखते हैं, Desktop 1200 और Tablet 810. framer.com पर publish हुआ code भी यही कहता है। responsive images तीन हालात के हिसाब से दी जाती हैं: min-width 1200px, 810px से 1199.98px तक, और max-width 809.98px. तो desktop frame 1200 चौड़ा बनाइए। अगर tablet पर layout सच में बदलता है, तो 810 चौड़ा frame भी जोड़ लीजिए। phone frame लगभग 390 का रखिए। 1440 पर design करके सब ठीक होने की उम्मीद रखेंगे, तो hero सिर्फ़ आपके अपने monitor पर सही दिखेगा।

हर चीज़ पर auto layout, बाहर वाले frame पर भी

Framer का academy lesson कहता है कि import के समय auto layout, hierarchy और fill properties साथ चली आती हैं। पूरा खेल यही है। auto layout से बना section Framer में ऐसे stack की तरह आता है जिसे resize करना पहले से आता है। box खींच-खींचकर जमाया गया section ढीले layers की तरह आता है, जिन्हें दोबारा बनाना पड़ता है। हर section को vertical auto layout में रखिए। हर row को horizontal में। चीज़ों को अलग करने के लिए ख़ाली जगह खिसकाने की जगह gaps इस्तेमाल कीजिए। जो layer auto layout frame से बाहर बैठा है, वो layer आपको दो बार बनाना पड़ेगा।

handover से पहले fill या fixed तय कर लीजिए

Figma में section wrapper को fill container कर दीजिए। अंदर वाले content wrapper को fixed max width दीजिए, जैसे 1200 या 1140। row के अंदर के cards को fill रखिए, ताकि चौड़ाई बराबर बँट जाए। यह सीधे Framer पर बैठ जाता है, जहाँ आप Width को 100% या 1fr करते हैं और Max Width content wrapper पर डालते हैं। Framer का troubleshooting article कहता है कि Phone breakpoint पर page के screen न भरने की सबसे आम वजह कोई fixed width या हद से बड़ी Max Width होती है। Figma में छूटा हुआ हर fixed number एक bug है जो आप आगे भेज रहे हैं।

अपनी text styles के नाम रखिए और उन्हीं को दोहराइए

अपने type के नाम तय कीजिए और उन्हीं को दोबारा इस्तेमाल कीजिए: H1, H2, H3, body large, body, caption, eyebrow. Framer में इन्हें एक बार Assets panel के Styles में बना लीजिए, फिर दाईं panel में Text और Styles से लगा दीजिए। हर Framer text style अपने साथ Desktop, Tablet और Mobile के अलग-अलग breakpoint sizes रख सकती है, जिसमें font size, line height, letter spacing और paragraph spacing सब आ जाते हैं। अगर आपकी Figma file में चौदह थोड़े-थोड़े अलग heading sizes हैं, तो या तो चौदह text styles बनानी पड़ेंगी, या mobile पर ग़लत दिखने वाले type के साथ रहना पड़ेगा।

font का licence moodboard वाले चरण में ही देख लीजिए

Framer के साथ Google Fonts और Fontshare आते हैं, और font picker के Custom tab से अपनी files upload की जा सकती हैं। Framer यह भी कहता है कि website पर कोई font upload करने से पहले उसका सही licence आपके पास होना चाहिए। desktop licence Figma mockup तक चलता है। live page उसमें नहीं आता। यह काम typeface चुनते समय ही निपटा लीजिए, launch से एक रात पहले नहीं, क्योंकि font बदलने से page का हर line break बदल जाता है।

images उसी size पर export कीजिए जिस size पर वो दिखती हैं

Framer images को edge पर WebP और AVIF में compress करता है और हर device के लिए resize कर देता है, यह उसके performance page पर लिखा है। delivery इससे संभल जाती है। 4000 pixel चौड़ा paste किया हुआ screenshot इससे ठीक नहीं होता, और PNG logo अपने आप SVG नहीं बन जाता। raster images को उनके display size से लगभग दोगुने पर export कीजिए। logos और icons के लिए SVG रखिए। alt text तभी लिख लीजिए जब content आपके दिमाग़ में ताज़ा हो।

Figma file handover की checklist

Figma file को पूरा कहने से पहले सात चीज़ें जाँच लीजिए। desktop frame 1200 चौड़ा है। हर section किसी auto layout frame के अंदर है। section wrappers fill हैं, और max width content wrappers पर है। type नाम वाली styles पर चल रहा है, कोई अकेला अलग size नहीं बचा। fonts का web licence है और files upload के लिए तैयार हैं। images ठीक size पर export हैं, और जो vector है उसके लिए SVG है। layer के नाम वैसे ही हैं जैसे आप उन्हें Framer की layer list में देखना चाहते हैं, क्योंकि नाम हूबहू वैसे ही चले आते हैं।