Figma यूआई डिजाइनरों के लिए एक ग्राफिक्स उपकरण है। इसमें एक साधारण इंटरफ़ेस है और आपको अपने साथियों के साथ काम पर सहयोग करने में सक्षम बनाता है। यदि आप ऑफ़लाइन काम करना चाहते हैं, तो आप डेस्कटॉप ऐप का उपयोग करना चुन सकते हैं। वैकल्पिक रूप से, फिग्मा किसी भी ऑपरेटिंग सिस्टम (हैलो, विंडोज) पर काम करता है, इसलिए आपको कुछ भी इंस्टॉल करने की आवश्यकता नहीं है। और शुरू करना आसान है - आप स्केच से अपने पिछले लेआउट डिज़ाइन आयात कर सकते हैं।
एक वेबसाइट बिल्डर चुनें: 16 शीर्ष उपकरण
[1 1]
फिग्मा में, आप अपने इंटरफ़ेस के लिए आवश्यक सब कुछ बना सकते हैं, सचित्र वेक्टर आइकन से कस्टम लेआउट तक। मल्टीप्लेयर संपादन डिजाइन टीमों के लिए अधिक समय बचा सकता है, क्योंकि इसका मतलब है कि सभी टीम के सदस्य एक ही समय में एक ही लेआउट पर काम कर सकते हैं। और ये अपनी सभी बेहतरीन विशेषताएं भी नहीं हैं।
इस ट्यूटोरियल में मैं आपको दिखाऊंगा कि फ़ैमा के साथ कैसे सेट अप किया जाए, फिर मोबाइल ऐप स्क्रीन बनाने के तरीके के माध्यम से चलना, चरण-दर-चरण। इस मामले में, हम एक काल्पनिक सांख्यिकी ऐप के लिए डैशबोर्ड डिजाइन करेंगे। जब आप पूरा कर लें, तो आप फिग्मा में विभिन्न इंटरफेस बनाने और वास्तविक समय में अपनी टीम के साथ उन पर काम करने में सक्षम होंगे।
01. साइन अप करें
[1 9]
सबसे पहले, आपको साइन अप करने की आवश्यकता है
www.figma.com
। तय करें कि क्या आप अपने ब्राउज़र में टूल का उपयोग करना चाहते हैं या डेस्कटॉप ऐप डाउनलोड करना चाहते हैं। डेस्कटॉप संस्करण डाउनलोड करने के लिए, ऊपरी बाएं कोने में हैमबर्गर मेनू पर जाएं और 'डेस्कटॉप ऐप प्राप्त करें' पर क्लिक करें।
मारो
ए
एक आर्टबोर्ड बनाने के लिए। आप प्रीसेट में से एक चुन सकते हैं या अपना खुद का कस्टम आकार बना सकते हैं। इस परियोजना के लिए, हम फोन और जीटी का उपयोग करने जा रहे हैं; आईफोन 7 (375x667px)। एक ग्रिड बनाने के लिए, पहले आर्टबोर्ड का चयन करें। फिर दाएं हाथ की साइडबार पर 'लेआउट ग्रिड' ढूंढें और '+' दबाएं। सेट अप कॉलम गणना: 6, गटर: 16, मार्जिन: 8 और टाइप: खिंचाव।
03. पृष्ठभूमि के लिए एक आयत बनाएं
[1 9]
चलो पृष्ठभूमि से शुरू करते हैं। दबाएँ
आर
आयताकार उपकरण लाने के लिए और किसी भी सीमा के साथ एक आयताकार # 5f98fa खींचने के लिए। दाईं ओर गुण पैनल का उपयोग करके 375x363 में आयाम सेट करें।
04. एक स्टेटस बार जोड़ें
[1 9]
[5 9]
[3 9]
स्क्रीन पर दाईं ओर गुण पैनल का उपयोग करके स्टेटस बार के लिए ढाल सेट करें। यहां आप एक रैखिक ढाल बनाने के लिए रंग विकल्पों को समायोजित कर सकते हैं (विस्तार करने के लिए छवि पर क्लिक करें)
इसके बाद हम स्क्रीन के शीर्ष पर एक स्टेटस बार रखना चाहते हैं। दबाएँ
आर
चौड़ाई सेट करने के लिए: 375, ऊंचाई: 64, स्थिति (x: 0; y: 0)। हमारे नेविगेशन बार के लिए दाईं ओर संपत्ति निरीक्षक पैनल का उपयोग करके ढाल भरने के लिए तैयार करें। 'भरें' विकल्प ढूंढें, रंग पूर्वावलोकन पर दबाएं और ड्रॉप-डाउन मेनू से 'रैखिक' का चयन करें। शीर्ष पर रंग # 77A6F7 होना चाहिए, और नीचे # 5a93f5 (दोनों के लिए अस्पष्टता 100 प्रतिशत) होना चाहिए।
05. आईओएस स्टेटस बार आयात करें
[1 9]
दुर्भाग्यवश, Figma में डिफ़ॉल्ट रूप से आईओएस यूआई तत्व शामिल नहीं हैं। हालांकि, 'नमूना फ़ाइल' नामक एक फ़ाइल है, जो एक आईओएस ऐप डिज़ाइन है, इसलिए हम उस से स्टेटस बार उधार ले सकते हैं। प्रकाश स्थिति बार विकल्प को कॉपी करें, इसे वर्तमान फ़ाइल में पेस्ट करें और इसे रखें (x: 0; y: 0)। पाठ उपकरण का उपयोग करना (
टी
), नेविगेशन बार में हेडर जोड़ने के लिए अपने आर्टबोर्ड पर क्लिक करें। मैं Avenir भारी, 15px, #ffffff के लिए गया हूँ। क्षैतिज केंद्र द्वारा शीर्षक को संरेखित करें, y: 33।
06. बैक आइकन बनाएं
[1 9]
नेविगेशन बार के बाईं ओर एक 'बैक' आइकन होना चाहिए। मैं इसे खरोंच से बनाने जा रहा हूं। एक आयताकार 14x14px बनाएँ, 45 डिग्री रोटेशन जोड़ें, x: 14; वाई: 43। इस आयत को डुप्लिकेट करें और इसे x: 18 पर रखें; वाई: 43। आयत दोनों का चयन करें और शीर्ष मेनू के तहत बूलियन समूहों और जीटी पर जाएं; चयन घटाना। उसके बाद, बूलियन समूहों में वापस जाएं और जीटी; फ़्लेटन चयन, या प्रेस
cmd + e
।
07. तीर आइकन समाप्त करें
[1 9]
हमारा तीर आइकन लगभग किया जाता है। अब हमें सिर्फ चौड़ाई और ऊंचाई को संख्यात्मक मानों को सेट करने की आवश्यकता है - मेरे मामले में चौड़ाई: 12 पीएक्स; ऊंचाई: 20px। अंतिम चरण भरने वाले रंग को #FFFFFF पर सेट करना है।
08. एक ग्राफ बनाएं
[1 9]
अब हम एक ग्राफ बनाने जा रहे हैं। सबसे पहले, हम कुछ दिशानिर्देशों में डाल देंगे। आयत उपकरण का चयन करें (
आर
) और सेट x: 24 y: 147; चौड़ाई: 1; ऊंचाई: 166; रंग # B3DCFF और अस्पष्टता 20% भरें।
80px मार्जिन के साथ चार बार इस आयताकार को डुप्लिकेट करें। प्रत्येक दिशानिर्देश के निचले भाग पर, हमें टेक्स्ट परतों ('फरवरी 2', 'फरवरी 9', 'फरवरी 16', 'फरवरी 23', 'मार्च 1') का उपयोग करके दिनांक लेबल जोड़ने की आवश्यकता है। मैंने 11 पीएक्स, # सी 1 डी 8 एफएफ पर एवेनिर माध्यम का उपयोग किया है।
09. डेटा लाइन बनाएं
[1 9]
पेन टूल का उपयोग करना (
पी
) हमें डेटा लाइन का प्रतिनिधित्व करने के लिए एक वेक्टर बनाने की आवश्यकता है। Bézier बिंदु बनाने के लिए क्लिक करें और खींचें। इस आकार में 4px स्ट्रोक होना चाहिए और कोई भराव नहीं होना चाहिए, #ffffffff।
आइए लाइन स्टैंड आउट करने में मदद करने के लिए एक ड्रॉप छाया जोड़ें: प्रभाव अनुभाग पर '+' पर क्लिक करें और 'ड्रॉप छाया' चुनें। एक चिकनी और सुरुचिपूर्ण छाया बनाने के लिए निम्नलिखित सेटिंग्स का उपयोग करें: धुंध: 3 पीएक्स, वाई: 7 पीएक्स, # 2 9 51 एफएफ, अस्पष्टता: 100%।
10. ग्राफ में विस्तार से जोड़ें
[1 9]
[3 9]
डेटा लाइन के साथ दिशानिर्देशों को प्रतिच्छेद करने के लिए मूल्यों को जोड़ने के लिए टेक्स्ट टूल का उपयोग करें
उन बिंदुओं पर जहां दिशानिर्देश डेटा लाइन के साथ छेड़छाड़ करते हैं, हम मंडलियों को जोड़ने जा रहे हैं। इस बार हम दीर्घवृत्त उपकरण का उपयोग करेंगे (
हे
), जिसे आप आयताकार उपकरण के साथ ड्रॉप-डाउन मेनू में पाएंगे। प्रत्येक चौराहे पर 8x8px मंडल ड्रा करें और भरने वाले रंग को # 5F98FA पर सेट करें। हमें एक स्ट्रोक जोड़ने की आवश्यकता है: स्ट्रोक सेक्शन के बगल में '+' बटन पर क्लिक करें, वजन सेट करें: 2 पीएक्स और संरेखित करें: केंद्र।
11. अंतिम स्पर्श
[1 9]
ग्राफ अनुभाग को समाप्त करने के लिए, हमें केवल हमारे चौराहे बिंदुओं में मान जोड़ने की आवश्यकता है। पाठ उपकरण के साथ (
टी
) Avenir काला, 11px, # 1f4991 का चयन करें।
12. तीन सूचनात्मक बक्से
[1 9]
रेखाचित्र के नीचे हम तीन कोशिकाओं को बनाने जा रहे हैं जो अधिक जानकारी प्रदर्शित करते हैं। पाठ उपकरण का उपयोग करना (
टी
) आइए हमारा पहला शीर्षक बनाएं: 'आपके शेयरों का अनुमानित मूल्य': एक्स: 16; वाई: 3 9 1, एवेनिर माध्यम, 15 पीएक्स, # 5 डी 7 ईबी 6। सेल के दाईं ओर मूल्य '$ 1,115', टेक्स्ट शैली: एवेनिर हेवी, 22 पीएक्स, # 5 एफ 9 8 एफए, टेक्स्ट संरेखण: बाएं, एक्स: 287; वाई: 387।
13. एक विभाजक बनाना
[1 9]
एक आयताकार बनाएं जो ऊंचाई में 1px है और स्क्रीन की पूरी चौड़ाई फैलाता है (# F5F5F5; X: 0; y: 435) - यह कोशिकाओं के बीच विभाजक के रूप में कार्य करेगा। शीर्षक, मूल्य और विभाजक का चयन करें और एक समूह बनाएं (
सीएमडी + जी
)।
14. शीर्षलेख जोड़ना
[1 9]
[15 9]
[3 9]
ग्राफ के नीचे तीन कोशिकाएं होंगी डेटा के मुख्य टुकड़े दिखाएगी (विस्तार करने के लिए छवि पर क्लिक करें)
इस समूह को डुप्लिकेट करें ताकि आपके पास उनके बीच 24px लंबवत दूरी के साथ तीन समूह हों। 'कुल सदस्यों' और तीसरे समूह को 'मित्र हस्ताक्षरित' करने के लिए दूसरा शीर्षक बदलें और प्रासंगिक मान अपडेट करें।
15. ड्रा और एक और आयत को संरेखित करें
[1 9]
अब हम कार्रवाई करने के लिए एक कॉल जोड़ने जा रहे हैं। अंतिम सेल के नीचे एक आयताकार खींचें, चौड़ाई: 1 9 5; ऊंचाई: 44, पिछले विभाजक 21px से वाई-एक्सिस दूरी।
संरेखण उपकरण का उपयोग करके, क्षैतिज केंद्र द्वारा आयताकार को लाइन करें। फिर भरने वाले रंग को # 5F98FA और 22 को गोलाकार पर सेट करें (आपको गुण पैनल में 'रोटेशन' के बाद यह फ़ील्ड मिल जाएगी)। उसके बाद एक बूंद छाया प्रभाव जोड़ें (रंग: #ABDAFF; अस्पष्टता: 100%; y: 5; धुंध: 11)।
16. बटन पर कुछ पाठ रखें
[1 9]
टेक्स्ट टूल का उपयोग करके बटन में टेक्स्ट जोड़ें (
टी
): 'अधिक शेयर प्राप्त करें!' इसे एवेनिर ब्लैक, 15 पीएक्स, #FFFFFF में सेट करें। बटन के केंद्र द्वारा पाठ को संरेखित करें। अंत में, सभी तत्वों को एक साथ समूहित करें और उन्हें सही तरीके से नाम दें।
17. इसे उत्तरदायी बनाओ
[1 9]
अब हम अपने लेआउट को समायोजित करने जा रहे हैं, इसलिए यह विभिन्न iPhones (320x568, 375x667 और 414x736) के प्रति उत्तरदायी है। ऐसा करने के लिए हमें बाधाओं का उपयोग करना होगा, जिन्हें आप दाईं ओर गुण मेनू के तहत पाएंगे।
18. लेआउट सही हो रही है
[1 9]
यदि आप क्षैतिज ड्रॉप-डाउन पर 'बाएं' या 'दाएं' का चयन करते हैं, तो समूह स्क्रीन के चुने हुए पक्ष में पिन करेगा, और खिंचाव नहीं करेगा। यदि आप 'केंद्र' का चयन करते हैं, तो समूह या परत फैल जाएगा, इसलिए यह स्क्रीन की चौड़ाई भरता है। हमें स्टेटस बार को जगह में फ्लोट करने की आवश्यकता है, इसलिए हम 'दाएं & amp; बाएं' विकल्प चाहते हैं (या 'cmd दबाए रखें' और आरेख पर बाएं और दाएं सलाखों पर क्लिक करें)।
19. इसका परीक्षण करें
[1 9]
आइए इसे आजमाएं। चयनित स्थिति बार के साथ, 'दाएं & amp; बाएं' विकल्प को दबाएं। एक आर्टबोर्ड का चयन करें और आईफोन 7 की बजाय, आईफोन 7 प्लस चुनें। यदि आप आईफोन एसई आकार का चयन करते हैं तो यह ठीक से काम करता है।
20. प्रत्येक परत की जाँच करें
[1 9]
चलिए बाकी परतों पर विचार करते हैं। नेविगेशन बार पृष्ठभूमि के लिए, हम 'दाएं + बाएं' का उपयोग करना चाहते हैं। नेविगेशन बार शीर्षक के लिए: 'केंद्र'। बैक तीर आइकन के लिए, 'बाएं' विकल्प का उपयोग करना सबसे अच्छा है - इस तरह तीर स्क्रीन के बाईं ओर पिन किया जाएगा।
21. लाइन ग्राफ़ सेट करें
[1 9]
अब चलो लाइन ग्राफ सेट करें। दिशानिर्देशों, तिथियों और चौराहे मंडल के लिए, हम 'केंद्र' का उपयोग करना चाहते हैं। डेटा लाइन और पृष्ठभूमि के लिए, हम 'दाएं & amp; बाएं' का उपयोग करेंगे। अतिरिक्त डेटा अनुभाग में हम प्रत्येक शीर्षक के लिए 'बाएं', प्रत्येक मान के लिए 'दाएं' का उपयोग करना चाहते हैं, और विभाजक लाइनों के लिए 'दाएं & amp; बाएं'। सीटीए बटन समूह के लिए चलो 'केंद्र' सेट करें।
22. ऊर्ध्वाधर बाधाओं को सेट करें
[1 9]
अंतिम चरण ऊर्ध्वाधर बाधाओं को सेट करना है। स्टेटस बार, नेविगेशन बार, डेटा लाइन और चौराहे मंडल और संबंधित शीर्षक 'टॉप' पर सेट किए जाने चाहिए। ग्राफ, तिथियों और दिशानिर्देशों की पृष्ठभूमि को 'केंद्र' पर सेट किया जाना चाहिए। अतिरिक्त डेटा के प्रत्येक समूह को लंबवत 'केंद्र' पर सेट किया जाना चाहिए, और सीटीए बटन समूह को 'नीचे' पर सेट किया जाना चाहिए।
23. इसे प्रत्येक स्क्रीन आकार के लिए काम करें
[1 9]
आइए दो बार आर्टबोर्ड को डुप्लिकेट करें, और एक आईफोन 7 प्लस के आकार और एक आईफोन एसई पर आकार के लिए एक सेट करें। प्लस संस्करण पर, आपको सेल समूह का चयन करके और 1 9 5 से 225 तक इसकी ऊंचाई बढ़ाने के लिए अतिरिक्त जानकारी और सीटीए बटन के अंतिम सेल के बीच अंतर को कम करने की आवश्यकता होगी। एसई संस्करण पर आप देखेंगे कि सूचना कोशिकाएं अतिप्रवाह देखेंगे सीटीए बटन, इसलिए हमें कोशिका समूह का चयन करना होगा और इसकी ऊंचाई को 150 तक कम करना होगा।
24. सब किया!
[1 9]
अरे, बधाई! हमने फिग्मा में पूरी ऐप स्क्रीन पूरी की है। अभी के लिए बस सबकुछ जांचें, और आप वापस बैठकर एक विशेषज्ञ की तरह महसूस कर सकते हैं।
