Visual Designer: बिना कोड लिखे UI बनाना

Visual Designer: खींचकर और छोड़कर इंटरफ़ेस बनाएँ

Visual Designer PocketCode की सबसे शक्तिशाली सुविधाओं में से एक है। यह आपको उपयोगकर्ता इंटरफ़ेस दृश्य रूप से बनाने देता है और ऐसा HTML और CSS जनरेट करता है जिसे आप खोलकर एडिट कर सकते हैं; Pro में React, Vue और Svelte में एक्सपोर्ट भी है।

एक visual designer क्यों?

फ़ोन स्क्रीन पर UI डिज़ाइन करना चुनौतीपूर्ण हो सकता है। छोटी स्क्रीन पर layout कोड हाथ से लिखना धीमा और ग़लतियों से भरा होता है। visual designer इसे एक सहज drag & drop इंटरफ़ेस के साथ हल करता है।

फ़ायदे

• गति: मिनटों में डिज़ाइन करें, घंटों में नहीं
• दृश्य: परिणाम को रीयल-टाइम में देखें
• असली कोड: ऐसा HTML और CSS एक्सपोर्ट करता है जिसे आप पढ़ और एडिट कर सकते हैं
• मल्टी-टारगेट: HTML/CSS और SVG, साथ में Pro के साथ React, Vue और Svelte

शुरू करना

designer खोलें

1. नीचे की बार (टैबलेट पर साइड रेल) से Tools शीट खोलें और Designer पर टैप करें। आप कमांड पैलेट या होम की क्विक एक्शन भी इस्तेमाल कर सकते हैं
2. खाली canvas के लिए Manual Design पर टैप करें (नाम, आकार, और Page flow या Free canvas) या My Designs खोलकर From Template इस्तेमाल करें
3. जब चाहें एक्सपोर्ट करें: HTML, CSS, SVG, ZIP या .pcd मुफ़्त, React, Vue या Svelte Pro के साथ

My Designs से आप .pcd फ़ाइल, Figma JSON फ़ाइल या HTML भी इम्पोर्ट कर सकते हैं (टैग का एक हिस्सा ही: div, section, heading, p, a, button, img, input)। .html फ़ाइल को एडिटर से सीधे Designer में नहीं खोला जा सकता: उसे My Designs में इम्पोर्ट करें।

बुनियादी इंटरफ़ेस

designer इसमें बँटा है:

• साइड पैनल — components, properties, layers, theme और tools, पाँच टैब में
• Canvas — आपका डिज़ाइन क्षेत्र, artboard और गाइड के साथ

टैबलेट पर साइड पैनल canvas के बगल में डॉक रहता है, इसलिए वह कभी उस चीज़ को नहीं ढकता जिस पर आप काम कर रहे हैं। फ़ोन पर नीचे की बार (Pages, Components, Style, Layers, Tools) ज़रूरत पड़ने पर उन्हें शीट के रूप में खोलती है, और Theme Tools के अंदर है।

उपलब्ध components

पैलेट 49 component प्रकार कवर करता है, आठ सेक्शन में: Basics, Text, Forms, Containers, Navigation, Media, Feedback और Data। एक चयन:

Containers

Forms

Basics, text और media

Navigation

व्यावहारिक ट्यूटोरियल: Login स्क्रीन

आइए चरण-दर-चरण एक पूरी login स्क्रीन बनाएँ:

चरण 1: बुनियादी संरचना

एक Column को canvas पर खींचें और सेट करें:

• Alignment: center
• Padding: 24px
• Background: #0a0a0a

चरण 2: लोगो जोड़ें

column के अंदर, एक Image खींचें:

• Size: 120x120
• Border-radius: full (वृत्त)
• Margin-bottom: 32px

चरण 3: टेक्स्ट फ़ील्ड

दो Text Field components जोड़ें:

Email:

• Placeholder: "Email"
• Type: email
• Width: Fill

Password:

• Placeholder: "Password"
• Type: password
• Width: Fill

चरण 4: Login बटन

एक Button खींचें:

• Text: "Log In"
• Style: primary
• Full width: चालू
• Border-radius: 12px

चरण 5: अतिरिक्त लिंक

इनके लिए Text और Link components जोड़ें:

• "Forgot your password?" (link style)
• "Don't have an account? Sign up" (धुंधला टेक्स्ट + link)

जनरेट किया गया कोड

designer लेआउट को markup और उसके लिए ज़रूरी CSS के रूप में एक्सपोर्ट करता है। नीचे के स्निपेट React और Vue आउटपुट का मोटा स्वरूप दिखाते हैं, सटीक टेक्स्ट नहीं:

// React आउटपुट (सिर्फ़ स्वरूप): एक फ़ाइल जिसमें CSS अंदर ही है
import React from "react";

const styles = `
  /* आपके components के लिए जनरेट की गई CSS */
`;

export default function LoginScreen() {
	return (
		<div className="design-container">
			<style>{styles}</style>
			{/* आपके components, जनरेट की गई class वाले सादे एलिमेंट के रूप में */}
		</div>
	);
}

<!-- Vue आउटपुट (सिर्फ़ स्वरूप) -->
<template>
  <div class="design-container">
    <!-- आपके components -->
  </div>
</template>

<script>
export default { name: "LoginScreen" };
</script>

<style scoped>
/* आपके components के लिए जनरेट की गई CSS */
</style>

framework एक्सपोर्ट markup और styles हैं: state, event handler और routing बाद में कोड में जोड़े जाते हैं।

उन्नत सुविधाएँ

रिस्पॉन्सिव डिज़ाइन

designer में दो layout मोड हैं। Page flow (नए मैनुअल डिज़ाइन में डिफ़ॉल्ट) ब्लॉक को क्रम से जमाता है और असली, रिस्पॉन्सिव HTML एक्सपोर्ट करता है; Free canvas हर एलिमेंट को वहीं रखता है जहाँ आप उसे छोड़ते हैं, और templates व इम्पोर्ट किए डिज़ाइन वहीं से शुरू होते हैं। एक्सपोर्ट से पहले designer free-canvas डिज़ाइन को flow में बदलने का सुझाव देता है।

• Preview चौड़ाई: Original के साथ छह चौड़ाइयाँ (Mobile S 320, Mobile 375, Mobile L 428, Tablet 768, Desktop 1280, Desktop L 1440)। Mobile S, Mobile L और Desktop L Pro हैं
• Breakpoints: डिफ़ॉल्ट रूप से Tablet (900 px तक) और Mobile (480 px तक), और आप उन्हें मुफ़्त में बदल या अपने जोड़ सकते हैं। हर breakpoint पर position, size, visibility और styles बदले जा सकते हैं, और वे असली @media नियमों के रूप में एक्सपोर्ट होते हैं
• Sizing: Fixed, Hug या Fill, न्यूनतम और अधिकतम मान के साथ

States और interactions

हर component के पाँच states हैं: Normal, Hover, Active, Focus और Disabled। आप उन्हें अलग-अलग स्टाइल कर सकते हैं और वे :hover, :active, :focus व :disabled के रूप में एक्सपोर्ट होते हैं। Interactions टैब सरल व्यवहार जोड़ता है:

1. कोई component चुनें (जैसे Button)
2. एक trigger चुनें: Tap, Hover, Scroll into view, Page load, After a delay या Form submit
3. एक action चुनें: Navigate to page, Open overlay, Close overlay, Toggle visibility, Scroll to, Set state या Open URL

HTML एक्सपोर्ट में ये पेज नेविगेशन, डायलॉग और फ़ॉर्म validation के लिए एक छोटी स्क्रिप्ट बन जाते हैं। React, Vue और Svelte एक्सपोर्ट markup और styles हैं, इसलिए वहाँ व्यवहार (click handler, routing, data) कोड में जोड़ा जाता है।

दोबारा इस्तेमाल होने वाले हिस्से

• Components: चयन को component में बदलें और My components से दोबारा इस्तेमाल करें। instances कॉपी हैं: मूल को एडिट करने के बाद Update all instances टैप करें
• Design system: tokens (रंग, spacing, typography और अन्य), text styles और लाइट व डार्क theme तय करें
• Templates और blocks: 5 बिल्ट-इन templates (Landing Page, Login Form, Dashboard, Portfolio, E-Commerce) में से किसी से शुरू करें या 5 तैयार blocks में से कोई जोड़ें। Free प्लान में templates से अधिकतम 3 डिज़ाइन बन सकते हैं

जेस्चर सपोर्ट

designer को टच इंटरैक्शन के लिए बनाया गया है:

• canvas पर Pinch से ज़ूम (दो उँगलियों से पैन भी होता है)
• सबसे अंदर वाले एलिमेंट को चुनने के लिए टैप करें और एक स्तर ऊपर जाने के लिए फिर टैप करें; किसी container को अलग करने के लिए डबल-टैप करें, या टेक्स्ट को एडिट करने के लिए
• चुने हुए एलिमेंट पर लॉन्ग-प्रेस से संदर्भ मेनू खुलता है, बिना चुने पर मल्टी-सिलेक्शन शुरू होता है
• फ़ोन पर पैनलों के बीच जाने के लिए स्वाइप करें

एक्सपोर्ट टारगेट

designer असली, एडिट करने योग्य कोड जनरेट करता है — सब वेब-आधारित। आठ एक्सपोर्ट फ़ॉर्मेट हैं:

आप किसी एक component को HTML स्निपेट के रूप में भी कॉपी कर सकते हैं, और PocketCode Project (Pro) डिज़ाइन को कोड प्रोजेक्ट के रूप में सहेजता है, जो आपकी प्रोजेक्ट सीमा में गिना जाता है। वेब फ़ॉन्ट Google Fonts से लिंक होते हैं, इसलिए एक्सपोर्ट किए HTML को उन्हें दिखाने के लिए कनेक्शन चाहिए।

सुझाव और सर्वोत्तम अभ्यास

1. संरचना से शुरू करें: सामग्री से पहले containers रखें
2. Page flow इस्तेमाल करें: यह रिस्पॉन्सिव HTML एक्सपोर्ट करता है; जहाँ हो सके fixed sizes से बचें
3. अपने components को नाम दें: ज़्यादा पठनीय कोड बनता है
4. बार-बार प्रीव्यू करें: अलग-अलग स्क्रीन साइज़ पर जाँचें
5. धीरे-धीरे एक्सपोर्ट करें: कोड जाँचने के लिए अंत तक इंतज़ार न करें

---

visual designer आपको एक ही डिवाइस से डिज़ाइन और प्रोग्राम करने देता है — एक स्क्रीन का खाका बनाएँ, HTML/CSS (या Pro में React, Vue और Svelte) एक्सपोर्ट करें, और वहीं आगे बनाते रहें। आज ही आज़माएँ और अपना डेवलपमेंट तेज़ करें!