Multi-page import
Website to Figma: सिर्फ़ homepage नहीं, पूरी site लाएं
एक बार में 10 पेज तक import करें, site के अपने links से और पेज चुनें, और उन्हें clickable prototype के रूप में present करें।
- हर Multiple import में 10 links तक, हर plan पर
- Import किए गए पेजों के बीच के links, Navigate interactions बन जाते हैं
- Site के हर पेज के लिए एक मापी गई width
जल्द ही Figma Community पर
किसी website को Figma में लाना शायद ही कभी एक पेज का काम होता है। Redesign proposal के लिए homepage, category पेज, product पेज, pricing और checkout चाहिए। Audit के लिए हर template चाहिए। Content migration के लिए ढेरों landing पेज चाहिए। EUREKA! का Figma plugin, HTML to Frames, इसी पैमाने के काम के लिए बना है।
Multiple source एक बार में 10 links तक लेता है। पेज एक के बाद एक process होते हैं और हर पेज canvas पर अपनी अलग row में आता है, उसकी सभी screens साथ-साथ। Multiple import, Free सहित हर plan पर उपलब्ध है, इसलिए full-site workflow आज़माने के लिए पहले upgrade करने की ज़रूरत नहीं।
किसी भी import के बाद आप Import linked pages चुन सकते हैं: plugin उसी site के उन दूसरे पेजों की list दिखाता है जिनसे पेज link करता है, और आप जो चाहिए उन्हें tick करते हैं। वे Multiple import के रूप में import होते हैं, जो हाथ से URLs इकट्ठा करने से कहीं तेज़ तरीका है।
पेज आपस में जुड़े भी रहते हैं। Import किए गए पेजों के बीच के links, Navigate prototype interactions बन जाते हैं, external links एक Open link action रखते हैं, और fixed या sticky headers Present mode में काम करते रहते हैं। नतीजा मौजूदा site का एक clickable version है, जिससे आप बदलाव सुझाने से पहले client को पूरी site दिखा सकते हैं।
अगर आपके पास live address के बजाय site files हैं, तो पूरा folder या एक .zip drop करें और चुनें कि कौन-से पेज import करने हैं। एक पेज के लिए URL to Figma ज़्यादा तेज़ रास्ता है। Agencies website to Figma redesign guide पढ़ सकती हैं, और पांच seats वाले Team plan की जानकारी pricing पेज पर है।
Website को पेज दर पेज import करना
- 01
10 links तक paste करें
Multiple tab इस्तेमाल करें और ज़रूरी पेज जोड़ें; वे एक के बाद एक process होते हैं।
- 02
अपनी screens चुनें
Desktop या पूरा responsive set चुनें; site का हर पेज वही मापी गई width इस्तेमाल करता है।
- 03
Linked पेज जोड़ें
Results से Import linked pages खोलें और उसी site के और पेज tick करें।
- 04
इसे prototype के रूप में present करें
Import किए गए पेजों के बीच के links पहले से navigate करते हैं, इसलिए आप Present mode में site पर click करते हुए घूम सकते हैं।
Multi-page काम के लिए बना
हर plan पर Multiple import
हर run में 10 links तक, हर पेज canvas पर अपनी अलग row में।
Import linked pages
हाथ से URLs इकट्ठा करने के बजाय, किसी भी import के बाद उसी site के दूसरे पेज list से चुनें।
Navigate interactions
Import किए गए पेजों के बीच के links prototype connections बन जाते हैं; external links browser में खुलते हैं।
हर site के लिए एक width
मापी गई Site width सभी पेजों में share होती है ताकि frames row दर row सीध में रहें।
Site folders और .zip
30 MB तक का folder या archive drop करें और चुनें कि कौन-से पेज import करने हैं।
Shared components
Pro पर, बार-बार आने वाले cards, buttons और menu items ऐसे components बन जाते हैं जिन्हें आप पेजों में reuse कर सकते हैं।
एक URL से पूरे site map तक
एक website के कई पेजों को Figma में लाने के तीन तरीके हैं, और वे साथ में अच्छे से काम करते हैं।
Multiple links
Multiple tab में 10 URLs तक paste करें। Plugin उन्हें क्रम से process करता है और हर पेज को उसकी अपनी row में रखता है, इसलिए एक पेज का Desktop, Tablet और Mobile capture साथ रहता है और पेज एक-दूसरे के नीचे आते हैं।
Import linked pages
Import के बाद, plugin उसी site के उन दूसरे पेजों की list दिखा सकता है जो उससे linked हैं। जो चाहिए उन्हें चुनें और वे Multiple import के रूप में चलते हैं। Homepage से शुरू करके, यह आमतौर पर एक-दो rounds में main navigation कवर कर लेता है।
Site folder या .zip
अगर आपके पास static build है, तो folder को Local file tab में drag करें या 30 MB तक का .zip upload करें, फिर चुनें कि कौन-से HTML पेज लाने हैं। Files एक isolated browser के अंदर memory से खोली जाती हैं और import पूरा होते ही delete हो जाती हैं।
हर पेज एक import गिना जाता है, screens चाहे कितनी भी हों। Free पर आपको हर महीने 10 imports मिलते हैं; Pro और Team fair-use सीमा के भीतर unlimited हैं। Details के लिए pricing देखें।
मौजूदा site का clickable prototype
Frames का static set उपयोगी है, लेकिन clients और stakeholders किसी site को तब ज़्यादा जल्दी समझते हैं जब वे उस पर click करके घूम सकें। HTML to Frames आपका मौजूदा navigation बनाए रखता है:
- Import किए गए पेजों के बीच के links Navigate interactions बन जाते हैं, इसलिए homepage frame पर Pricing click करने से pricing frame पर पहुंचते हैं।
- दूसरे links एक Open link action रखते हैं और browser में खुलते हैं।
- Fixed और sticky headers Present mode में scroll करते समय अपनी जगह रहते हैं।
- Horizontal scroll areas, जैसे carousels और tab strips, बगल की ओर scroll होते हैं।
Pro पर, hover look वाले elements, Default और Hover variants व on-hover interaction वाले component sets बन जाते हैं, इसलिए mouse ले जाने पर buttons और menu items प्रतिक्रिया देते हैं।
इससे import की गई site एक baseline बन जाती है जिसे आप वैसे ही present कर सकते हैं। मौजूदा experience दिखाएं, comments से समस्याएं चिह्नित करें, फिर frames duplicate करके original के बगल में redesign शुरू करें। क्योंकि हर frame अपना source URL save रखता है, आप बाद में कोई भी पेज re-import करके live site की तुलना proposal से कर सकते हैं। पेज कैसे structure होते हैं, इस पर और जानकारी HTML to frame में।
Prototype connections सिर्फ़ उन पेजों के बीच बनते हैं जो import का हिस्सा हैं, इसलिए Import linked pages से पेज जोड़ने पर clickable flow भी बढ़ जाता है।
Agencies website to Figma का इस्तेमाल कैसे करती हैं
किसी design agency के लिए, project का पहला हफ़्ता अक्सर client की मौजूदा site दोबारा बनाने में चला जाता है, ताकि redesign करने के लिए कुछ हो। उसे import करने से वह ज़्यादातर काम हट जाता है और team को पहले से व्यवस्थित file मिलती है।
एक आम flow ऐसा दिखता है:
- Pitch से पहले: client के मुख्य templates import करें और असल में इस्तेमाल हो रहा color और type system देखने के लिए Styles & variables on करें।
- Discovery के दौरान: client को clickable import दिखाएं और pain points सीधे frames पर annotate करें।
- Redesign के दौरान: frames duplicate करें और उन्हें वहीं बदलें; बार-बार आने वाली structures से निकाले गए components global बदलावों को तेज़ करते हैं।
- Handoff पर: जो ship हुआ उसकी पुष्टि के लिए बदले गए पेज re-import करें।
Team plan एक shared license key पर पांच seats देता है, $22 प्रति माह की launch price पर, हर import में चार screens तक के साथ। यह उस छोटे studio के लिए सही है जहां कई designers parallel में client sites import करते हैं।
Client का काम संभालने वाली agencies अक्सर data के बारे में भी पूछती हैं। पेज एक isolated browser में render होते हैं, नतीजे एक बार deliver होते हैं और कभी disk पर नहीं लिखे जाते। पूरी जानकारी security पेज पर है।
अक्सर पूछे जाने वाले सवाल
हर Multiple import में 10 links तक। वे एक के बाद एक process होते हैं, और हर पेज canvas पर अपनी अलग row में अपनी screens के साथ साथ-साथ आता है। Multiple import, Free सहित हर plan पर उपलब्ध है, और ज़्यादा पेजों के लिए आप इसे फिर से चला सकते हैं।
हाँ। Import के बाद, Import linked pages उसी site के उन दूसरे पेजों की list दिखाता है जिनसे import किया गया पेज link करता है। जो चाहिए उन्हें tick करें और वे Multiple import के रूप में import हो जाते हैं, जो आमतौर पर हाथ से URLs इकट्ठा करने से तेज़ है।
हाँ। आपके import किए गए पेजों के बीच के links, Navigate interactions बन जाते हैं, इसलिए आप Present mode में site पर click करते हुए घूम सकते हैं। दूसरे links एक Open link action रखते हैं। Fixed और sticky headers और horizontal scroll areas भी वैसे ही व्यवहार करते हैं जैसे live site पर।
हाँ। Desktop Site width असली डिज़ाइन से मापी जाती है और multi-page import में एक site एक ही width रखती है, ताकि frames row दर row सीध में रहें। Tablet 768, Mobile 390 और Laptop 1280 fixed widths इस्तेमाल करते हैं, और Pro में Custom width भी है।
एक import यानी सभी screens वाला एक पेज। Desktop, Tablet और Mobile पर capture किए गए दस पेज तीस नहीं, दस imports गिने जाते हैं। Free में हर महीने 10 imports शामिल हैं; Pro और Team हर महीने 1,000 और 5,000 की fair-use सीमा के भीतर unlimited हैं।
Team plan में एक shared license key पर पांच seats और हर import में चार screens तक शामिल हैं, $22 प्रति माह की launch price पर (सामान्य कीमत $29)। शुरुआती ग्राहकों के लिए launch price बनी रहती है। Pro एक single-seat plan है जो Figma के अंदर ही खरीदा जाता है।
संबंधित
Web को दोबारा बनाना बंद करें।
Link paste करें और कुछ ही सेकंड में असली, एडिटेबल, रिस्पॉन्सिव Figma layers पाएं। शुरुआत free — हर महीने 10 imports।
कोई credit card नहीं। Pro, Figma के अंदर ही खरीदा जाता है।
जल्द ही Figma Community पर