17 मई 2026 · 11 मिनट में पढ़ें

How to Design App Store Screenshots in Figma

यदि आप कुल लेआउट नियंत्रण चाहते हैं तो ऐप स्टोर स्क्रीनशॉट डिजाइन करने के लिए Figma एक ठोस तरीका है। आप अपने खुद के डिवाइस फ्रेम, टाइपोग्राफी, ग्रेडिएंट, घटक, निर्यात प्रीसेट और स्थानीयकृत वेरिएंट बना सकते हैं। इसका समझौता यह है कि फिग्मा को ऐप स्टोर कनेक्ट या Google Play के बारे में ज्यादा जानकारी नहीं है। उत्पादन प्रणाली आपको खुद बनानी होगी।

यह ट्यूटोरियल बताता है कि फिग्मा में ऐप स्टोर स्क्रीनशॉट को फ़ाइल को डुप्लिकेट फ़्रेमों के ढेर में बदले बिना कैसे डिज़ाइन किया जाए। यह iOS, iPadOS, macOS और Android स्क्रीनशॉट के लिए काम करता है, और यह विशेष रूप से तब उपयोगी होता है जब आप अभी भी यह तय कर रहे हों कि फिग्मा पर्याप्त है या आपको एक समर्पित ऐप स्टोर स्क्रीनशॉट टूलकी आवश्यकता है।

1. स्टोर आकारों के साथ शुरुआत करें

किसी भी यादृच्छिक प्रस्तुति फ़्रेम से शुरुआत न करें। उन पिक्सेल आकारों से शुरुआत करें जिन्हें स्टोर वास्तव में स्वीकार करते हैं। Apple और Google उन स्क्रीनशॉट को अस्वीकार कर सकते हैं जो उनके आयाम, प्रारूप या पहलू अनुपात नियमों से मेल नहीं खाते हैं.

वर्तमान iPhone स्क्रीनशॉट के लिए, 6.9" उपकरणों के लिए एक सुरक्षित प्राथमिक ऐप स्टोर आकार 1320 x 2868 है। iPad के लिए, सामान्य आकारों में 13" iPad के लिए 2064 x 2752 और 11" iPad के लिए 1668 x 2388 शामिल हैं। Google Play अधिक लचीला है, लेकिन स्क्रीनशॉट को अभी भी Google के साइड लंबाई और पहलू अनुपात नियमों के अनुकूल होना चाहिए।

उपयोगी संदर्भ:

2. प्रत्येक स्टोर सतह के लिए एक फिग्मा पेज बनाएं

फ़ाइल को सरल और अनुमानित रखें। एक साफ संरचना एक चालाकी भरी संरचना से अधिक मूल्यवान है:

मुख्य ऐप स्टोर फोन स्क्रीनशॉट के लिए 01 - iPhone 6.9।
iPad स्क्रीनशॉट के लिए 02 - iPad 13।
Android फोन स्क्रीनशॉट के लिए 03 - Google Play Phone।
साझा शैलियों, डिवाइस फ़्रेम, बैज और कॉपी ब्लॉक के लिए 04 - Components।
पुराने स्क्रीनशॉट के लिए 05 - Archive जिनकी आपको बाद में आवश्यकता हो सकती है।

प्रत्येक पृष्ठ के अंदर, प्रत्येक स्क्रीनशॉट स्लॉट के लिए एक फ्रेम बनाएं:01 - Main Benefit, 02 - Feature Detail,03 - Social Proof, और इसी तरह। फ़्रेम नाम में संख्या उपसर्ग रखें क्योंकि फिग्मा निर्यात को सॉर्ट करना आसान होगा।

3. एक पुन: प्रयोज्य स्क्रीनशॉट घटक बनाएं

सबसे बड़ी गलती प्रत्येक स्क्रीनशॉट को एक अद्वितीय आर्टबोर्ड के रूप में डिज़ाइन करना है। यह एक रिलीज के लिए काम करता है, फिर जैसे ही आप ऐप अपडेट करते हैं, कोई भाषा जोड़ते हैं, या पृष्ठभूमि शैली बदलते हैं, वैसे ही टूट जाता है।

इसके बजाय, एक पुन: प्रयोज्य स्क्रीनशॉट संरचना का निर्माण करें:

आपके रंग, ग्रेडिएंट या छवि उपचार के साथ एक पृष्ठभूमि परत।
साझा टाइपोग्राफी शैलियों के साथ एक हेडलाइन टेक्स्ट ब्लॉक।
एक वैकल्पिक सबहेडलाइन ब्लॉक।
एक डिवाइस फ़्रेम घटक।
डिवाइस फ़्रेम के अंदर एक नकाबपोश स्क्रीनशॉट परत।
वैकल्पिक बैज, तीर, कॉलआउट या सुविधा लेबल।

डिवाइस फ़्रेम, बैज और कॉलआउट लेबल जैसे दोहराए गए भागों के लिए Figma घटकों का उपयोग करें। ऑटो लेआउट का उपयोग करें जहां सामग्री को रीफ़्लो करना चाहिए, विशेष रूप से टेक्स्ट समूहों के लिए जो स्थानीयकरण के दौरान लंबाई बदल सकते हैं।

Figma संदर्भ: घटक गुण, वेरिएंट, और ऑटो लेआउट।

4. पहले स्क्रीनशॉट को एक स्टोर विज़िटर की तरह डिज़ाइन करें

आपके पहले स्क्रीनशॉट को एक प्रश्न का उत्तर देना चाहिए: किसी व्यक्ति को इस ऐप की परवाह क्यों करनी चाहिए? सेटिंग्स स्क्रीन, ऑनबोर्डिंग स्क्रीन, या अस्पष्ट सुविधा सूची के लिए पहले स्लॉट का उपयोग करने से बचें।

एक व्यावहारिक सूत्र:

हेडलाइन: 4 से 8 शब्द जो परिणाम बताते हैं।
डिवाइस स्क्रीनशॉट: ऐप को काम करते हुए दिखाएं, खाली स्थिति नहीं।
सहायक विजुअल: यदि यह मूल्य स्पष्ट करता है तो एक बैज, चार्ट या कॉलआउट।
बैकग्राउंड: ब्रांडेड, सरल, और पूरे सेट में सुसंगत।

ऐप स्टोर खोज परिणामों और उत्पाद-पृष्ठ पूर्वावलोकन में पढ़ने के लिए टेक्स्ट को पर्याप्त बड़ा रखें। यदि टेक्स्ट केवल फिग्मा कैनवास के ज़ूम इन होने पर ही काम करता है, तो यह शायद बहुत छोटा है।

5. एक लेआउट को एक सेट में बदलें

एक बार जब पहला स्क्रीनशॉट काम करने लगे, तो प्रत्येक स्टोर स्लॉट के लिए फ्रेम को डुप्लिकेट करें और एक समय में एक संदेश बदलें। एक सामान्य सात-स्क्रीनशॉट अनुक्रम:

मुख्य परिणाम।
मुख्य वर्कफ़्लो।
सुविधा जो ऐप को अलग करती है।
निजीकरण या सेटिंग्स।
विश्वास, गोपनीयता, सिंक, या एकीकरण।
माध्यमिक उपयोग मामला।
डाउनलोड करने का अंतिम कारण।

डिवाइस की स्थिति, हेडलाइन की स्थिति और बैकग्राउंड ट्रीटमेंट को सुसंगत रखें जब तक कि आपके पास उन्हें बदलने का कोई जानबूझकर कारण न हो। सेट को एक उत्पाद कहानी की तरह महसूस होना चाहिए, सात अलग-अलग विज्ञापनों की तरह नहीं।

6. अनुवाद करने से पहले स्थानीयकरण की तैयारी करें

स्थानीयकरण वह जगह है जहां कई Figma स्क्रीनशॉट फ़ाइलें कठिन हो जाती हैं। यदि आप प्रत्येक भाषा के लिए प्रत्येक आर्टबोर्ड को डुप्लिकेट करते हैं, तो एक छोटा डिज़ाइन परिवर्तन दर्जनों मैन्युअल संपादन में बदल जाता है।

स्थानीयकरण को कम नाजुक बनाने के लिए:

टेक्स्ट को अनुमानित परतों में रखें: Headline, Subheadline, Badge।
उन टेक्स्ट कंटेनरों के लिए ऑटो लेआउट का उपयोग करें जिन्हें बढ़ने की आवश्यकता है।
कठिन लाइन ब्रेक से बचें जब तक कि वाक्यांश अंतिम न हो।
जर्मन, फ्रेंच, स्पेनिश और अन्य लंबे अनुवादों के लिए अतिरिक्त चौड़ाई छोड़ें।
मूल अंग्रेजी लेआउट स्थिर होने के बाद ही प्रति लोकेल एक अलग पृष्ठ या अनुभाग बनाएं।

यदि आप कई भाषाओं का समर्थन करते हैं, तो यह वह बिंदु है जहां फिग्मा अक्सर उत्पादन अड़चन बन जाता है। आप अभी भी ऐसा कर सकते, हैं लेकिन आपको अनुशासन की आवश्यकता है: नामकरण, घटक, निर्यात प्रीसेट, और हर रिलीज के लिए एक चेकलिस्ट। यदि स्थानीयकरण एक आवर्ती काम है, तो उस मैन्युअल सेटअप की तुलना एक समर्पित स्क्रीनशॉट स्थानीयकरण वर्कफ़्लो से करें。

7. निर्यात प्रीसेट सेट करें

Figma आपको सामान्य छवि प्रारूपों में चयनित परतों और फ़्रेमों को निर्यात करने की अनुमति देता है। स्टोर स्क्रीनशॉट के लिए, अंतिम शीर्ष-स्तरीय फ़्रेम निर्यात करें, नेस्टेड समूह नहीं।

अनुशंसित निर्यात सेटअप:

प्रत्येक स्क्रीनशॉट फ़्रेम को सटीक स्टोर पिक्सेल आयामों पर सेट करें।
प्रत्येक अंतिम फ़्रेम के लिए एक PNG निर्यात सेटिंग जोड़ें।
शून्य-पैडेड उपसर्ग के साथ फ़्रेम का नाम रखें: 01, 02, 03।
एक बार में एक ही डिवाइस फ़ैमिली का निर्यात करें ताकि फ़ाइलें मिश्रित न हों।
अपलोड करने से पहले फ़ाइंडर में निर्यात किए गए PNG की समीक्षा करें।

Figma का निर्यात व्यवहार उसके निर्यात गाइडमें प्रलेखित है। महत्वपूर्ण उत्पादन नियम सरल है: ऐप स्टोर कनेक्ट और Google Play अंतिम फ़ाइल की परवाह करते हैं, न कि इस बात की कि आपकी फिग्मा फ़ाइल कितनी साफ दिखती है।

8. सावधानी से अपलोड करें

अपलोड करने से पहले, चार चीज़ें जाँचें:

फ़ाइल आयाम लक्षित स्टोर स्लॉट से मेल खाते हैं।
फ़ाइलें सही क्रम में व्यवस्थित हैं।
स्क्रीनशॉट सही लोकेल में हैं।
कोई पारदर्शी बैकग्राउंड या आकस्मिक क्रॉप समस्याएँ नहीं छूटी हैं।

विशेष रूप से ऐप स्टोर कनेक्ट के लिए, प्रत्येक लोकेल का अपना स्क्रीनशॉट सेट होता है। यदि आप फिग्मा से अंग्रेजी, जर्मन, स्पेनिश और फ्रेंच निर्यात करते हैं, तो उन फ़ोल्डरों को अलग रखें और उन्हें एक समय में एक लोकेल अपलोड करें। गहन पूर्वाभ्यास के लिए, पढ़ें App Store Connect पर स्क्रीनशॉट कैसे अपलोड करें।

जहां Figma अच्छा काम करता है

Figma एक अच्छा विकल्प है जब आपको कस्टम लेआउट की आवश्यकता होती है, एक डिज़ाइनर पहले से ही शामिल होता है, और आपका स्क्रीनशॉट सेट हर हफ्ते नहीं बदलता है। यह आपको रचना, टाइपोग्राफी, ब्रांड सिस्टम और विज़ुअल पॉलिश पर पूर्ण नियंत्रण देता है।

जहां Figma कठिन हो जाता है

Figma तब कठिन हो जाता है जब स्क्रीनशॉट आपके नियमित रिलीज़ प्रक्रिया का हिस्सा होते हैं। सामान्य दर्द बिंदु:

प्रत्येक डिवाइस आकार के लिए डुप्लिकेट फ़्रेम।
प्रत्येक लोकेल के लिए डुप्लिकेट फ़्रेम।
सिम्युलेटर स्क्रीनशॉट का मैन्युअल प्रतिस्थापन।
मैन्युअल निर्यात और फ़ोल्डर संगठन।
अनुवादित पाठ लंबा होने पर आसानी से टूटने वाले लेआउट।
कोई मूल ऐप स्टोर कनेक्ट अपलोड वर्कफ़्लो नहीं।

इनमें से कोई भी Figma को एक बुरा उपकरण नहीं बनाता है। उनका मतलब केवल यह है कि फिग्मा एक सामान्य डिज़ाइन उपकरण है, न कि ऐप स्टोर स्क्रीनशॉट वर्कफ़्लो के लिए उद्देश्य-निर्मित।

इंडी डेवलपर्स के लिए एक तेज़ विकल्प

यदि आप साल में केवल एक या दो बार ही स्क्रीनशॉट बनाते हैं, तो Figma काफी हो सकता है। यदि आप अक्सर शिप करते हैं, कई भाषाओं का समर्थन करते हैं, या ऐप स्टोर और Google Play स्क्रीनशॉट को एक साथ बनाए रखते हैं, तो आज़माएं Screenshot Bro।

Screenshot Bro स्टोर स्क्रीनशॉट डिजाइन करने, स्थानीयकृत करने, निर्यात करने और अपलोड करने के लिए एक मूल macOS ऐप है। यह आपको डिवाइस पंक्तियाँ, पुन: प्रयोज्य टेम्पलेट, अंतर्निहित स्थानीयकरण, बैच निर्यात और ऐप स्टोर कनेक्ट अपलोड सुविधा प्रदान करता है बिना फिग्मा में उत्पादन प्रणाली को फिर से बनाए। आप यह देखने के लिए सुविधा अवलोकन भी देख सकते हैं कि यह वर्कफ़्लो एक सामान्य डिज़ाइन फ़ाइल से कैसे भिन्न है।