Figma - एक डिजाइनर के लिए एक सरल समाधान, एक लेआउट डिजाइनर के लिए एक कठिन समाधान

यदि आप वेब विकास के क्षेत्र में काम करते हैं, तो जल्द या बाद में, आपको फतमा पता चल जाएगा। इस तथ्य को स्वीकार करें और अध्ययन शुरू करें। मैं रोजमर्रा के उपयोगकर्ताओं के दृष्टिकोण से इस उत्पाद का वर्णन करने की कोशिश करूँगा।

शुरू करने के लिए, यह सुखद क्षणों का उल्लेख करने योग्य है, जिसके लिए डिजाइनर फिम्मा का उपयोग करना पसंद करते हैं। ठीक है, चलो शुरू करें:


सबसे निर्विवाद प्लस - एक फ्रीबी

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

मल्टीप्लेयर उपलब्धता

उन लोगों के लिए जो विषय में नहीं हैं - यह कई लोगों के लिए एक ही परियोजना पर एक साथ काम करने की क्षमता है। और जब मैंने एक ही समय में लिखा था, तो यह वास्तव में है, मैं, लेआउट डिजाइनर के रूप में, देखता हूं कि डिजाइनर (या यहां तक ​​कि डिजाइनर) अपने मॉनिटर पर रियलटाइम प्रोजेक्ट को कैसे संपादित करते हैं। यह प्रभाव टीमव्यूअर जैसा दिखता है। डिजाइनर अब स्थानीय स्तर पर अपने लेआउट को संग्रहीत नहीं करता है, अब यह सभी बादलों में रहता है। प्रबंधक के साथ और अधिक साझा स्क्रीनशॉट नहीं, एक प्रोजेक्ट बनाने की प्रक्रिया सार्वजनिक हो गई है, केवल एक सामान्य इंटरनेट स्पीड वाले ब्राउज़र की आवश्यकता है।

क्रॉस-प्लेटफ़ॉर्म का सिद्धांत शामिल है

लेआउट और डिजाइनर का ऑपरेटिंग सिस्टम (विंडोज, मैकओएस, लिनक्स) महत्वपूर्ण नहीं था। वे ओएस असंगतता की समस्या के बिना एक परियोजना पर काम करने में सक्षम होंगे।

सुविधाजनक कीबोर्ड शॉर्टकट

यदि आप पहले से ही एक गर्म कुंजी के माध्यम से ग्राफिक संपादकों के साथ काम करने के लिए उपयोग किए जाते हैं, तो आपके लिए नई कार्यक्षमता के लिए जल्दी से उपयोग करना मुश्किल नहीं होगा।

कार्यक्रम में शॉर्टकट कुंजियों का अधिक समझदार वर्णन है, और इसके अलावा, वे फ़ोटोशॉप या स्केच कुंजियों की कार्यक्षमता को दृढ़ता से दोहराते हैं, जिसके लिए मैं लेखकों को अलग से धन्यवाद देता हूं। आखिरकार, हर कोई आलसी है और पेन तत्व को कॉल करने के लिए फिर से सीखना नहीं चाहता है।

वेक्टर ग्राफिक्स के साथ काम करने की क्षमता

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

घटक बनाने की क्षमता

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

प्लग-इन

अंजीर में कस्टम प्लगइन्स की कार्यक्षमता है, और उनमें से बहुत सारे हैं।

दोनों निजी कंपनी के उत्पाद और खुले स्रोत सामुदायिक कार्यान्वयन प्रस्तुत किए जाते हैं। अब तक, लगातार सॉफ़्टवेयर अपडेट के कारण, आप देख सकते हैं कि कार्यक्षमता डगमगा गई है, लेकिन मुझे यकीन है कि यह ठीक हो जाएगा।

---

और अब उन नकारात्मक पहलुओं के बारे में जो फिगमा उपयोगकर्ताओं को काम करने की प्रक्रिया में सामना करते हैं, या क्या कमी है, लेकिन वास्तव में आवश्यक है।

तत्वों के वास्तविक आकार और उनके बीच की दूरी निर्धारित करने में समस्या

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

कभी-कभी एक संदर्भ तत्व का चयन करके इस समस्या को हल किया जा सकता है, और फिर Alt कुंजी दबाए जाने के साथ, ऐसे तत्व पर क्लिक करें जिसकी दूरी आपको जानना आवश्यक है, लेकिन यह हमेशा काम नहीं करता है।

ओवरलैप और बंद परतें

बहुत बार ऐसे मामले होते हैं, जहां साइट के लेआउट के लिए एक लिंक प्राप्त होता है, लेआउट डिजाइनर इस तथ्य के कारण आवश्यक डिज़ाइन तत्वों को नहीं निकाल सकता है कि वे उच्चतर परतों द्वारा अवरुद्ध हैं, या ये परतें आमतौर पर जमी हुई हैं।

सबसे अधिक संभावना है, आपके डिजाइनर को आप पर भरोसा नहीं है, और आपको उससे केवल-पढ़ने के लिए लेआउट मिलेगा, ताकि वहां कुछ भी टूट न जाए। दुर्भाग्य से, लिंक लेआउट के कार्यक्षेत्र की कार्यक्षमता बहुत कम हो गई है और फिर आपको एक नया प्रोजेक्ट बनाना होगा और पूरे डिजाइन को वहां स्थानांतरित करना होगा, केवल हस्तक्षेप करने वाली परतों को खुद को, अच्छी तरह से अक्षम करने के लिए, या संचार और मदद के लिए अनुरोध के माध्यम से अपनी समस्याओं को हल करना होगा।

पाठ की समस्याएं

• पहली बात यह है कि जब आप एक नया प्रोजेक्ट प्राप्त करते हैं, तो आपकी नज़र तुरंत ही पकड़ लेती है कि आपको पता नहीं है कि सभी टेक्स्ट लेयर्स पर क्लिक करने के बाद तक कौन से फोंट का उपयोग किया जाता है। मुझे समझ में नहीं आता है कि यह अभी तक क्यों लागू नहीं किया गया है, उदाहरण के लिए, एवोकोड के रूप में
  
  
• मैं भी मजाकिया मामलों में आया था कि कोड टैब उदाहरण के लिए कहता है:
  
  

  font-family: Roboto; font-style: normal; font-weight: normal; 

  
  और यदि आप इस टेम्पलेट को पहले से डिज़ाइन मोड में खोलते हैं, तो आप पहले से ही देख सकते हैं कि रोबोटो बोल्ड वहाँ शामिल है।
  
  
  
  एक फ़ॉन्ट परिवार एक और एक ही बात है, लेकिन केवल लेआउट प्रक्रिया के दौरान इसे अभी भी @ फ़ॉन्ट-फेस संपत्ति के माध्यम से अलग से कनेक्ट करने की आवश्यकता होती है, अन्यथा आपको लेआउट पर प्रभाव की तरह नहीं मिलेगा। और जब तक आप अपनी परियोजना को नहीं खींचते, तब तक आपको यह पता नहीं होता (और आप लंबे समय तक फ़ॉन्ट-चौड़ाई की संपत्ति के साथ खेल सकते हैं)।
  

  यदि आप न केवल Google फोंट के साथ काम करते हैं, बल्कि एक व्यक्तिगत प्लग-इन सेट का भी उपयोग करते हैं, और यह सिरिलिक भी है, तो साहसिक कार्य के लिए तैयार रहें।

  
  

• यदि आपके डिजाइनर छाया और स्ट्रोक के साथ ढाल फोंट के बहुत शौकीन हैं, तो एक डफ के साथ अलग नृत्य शुरू करें।

  
  
  

  यहाँ आप Figma द्वारा दिए गए कोड को नहीं देख सकते हैं। समस्या को हल करने के विकल्प के रूप में, आप एसवीजी में इस पाठ को सहेज सकते हैं (कभी-कभी यह पृष्ठ पर एक नया फ़ॉन्ट आयात करने से सस्ता होता है), लेकिन अगर आपको अभी भी इस समस्या से गंभीर स्तर पर निपटना है, तो फिर से लेआउट को अपनी व्यक्तिगत परियोजना में ले जाएं।

  
  
  
  

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

  
  
  

  * टिप्पणियों में अपनी राय साझा करें, इसे लागू करना इतना कठिन क्यों हो सकता है?

  
  

अंजीर एक क्लाउड उत्पाद है

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

एक आकृति में काम डिजाइनर को नम करता है

शायद, यह मेरी व्यक्तिगत व्यक्तिपरक राय है, लेकिन फ़ोटोशॉप या स्केच में किए गए लेआउट की तुलना में डिज़ाइनरों को साइटों के लेआउट को देने वाले लेआउट गुणवत्ता में कम हैं। (* मुझे सीधे लगता है कि कोई अब जल गया है)

• वहां, डिजाइनर ने माना कि अब कॉलिंग लेयर्स का कोई मतलब नहीं है। वहाँ सब के बाद Pkh और इसलिए सब कुछ दिखाई देता है। इससे कोई फर्क नहीं पड़ता कि फाइलों को निर्यात करते समय लेआउट डिजाइनर के पास Group1.png Group1 (1) .png .... आदि होगा। इसका पता लगा लेंगे।
• वहां, मैं परतों को समूहों में संयोजित करना भूल गया, और सामान्य रूप से चित्र को लेने के लिए, यह कैसा दिखता है, उदाहरण के लिए, एक मुखौटा के साथ लागू किया जाता है, फिर से हमें अपनी परियोजना पर लेने की जरूरत है, और इसे स्वयं समूहित करना होगा।
• एक और क्लासिक, निश्चित रूप से रंग के बजाय, उपयुक्त होने पर अस्पष्टता में बदलाव का उपयोग करना है, और नहीं।
  
  
  
  और ठीक है, अगर पाठ के साथ यह अभी भी हेक्साडेसिमल रंग प्रतिनिधित्व के साथ ठीक, आलसी टाइपसेट्टर काम कर सकता है
  
  

   color: #000; opacity:0.49; 

  
  सबसे अधिक संभावना rgba प्रतिनिधित्व करने के लिए पारित करेंगे
  
  

   color: rgba(0,0,0,.49); 

  
  

  लेकिन अगर डिजाइनर तत्वों के एक ब्लॉक के लिए ऐसा करने का निर्णय लेता है (जहां पृष्ठभूमि-रंग, रंग, पृष्ठभूमि: रैखिक-ढाल ...) के बारे में, एक ही समय में, आधे तत्व पारदर्शी होंगे, और दूसरा नहीं, तो यहां आप कोड टैब पर जा सकते हैं। और मत देखो।

  
  

  सामान्य तौर पर, एक युवा डिजाइनर के लिए शुरुआती उपकरण के रूप में फिम्मा की सिफारिश नहीं की जा सकती है। प्रवेश की सीमा यहां कम होगी, लेकिन आप अपने मॉक सहयोगियों के साथ अपनी नसों को खराब करेंगे।

  
  

एक सामान्य डार्क थीम का अभाव

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

यह बेहतर होगा, निश्चित रूप से, जो लोग उत्पाद लिखते हैं वे इस कार्यक्षमता के लिए जिम्मेदार थे

व्यक्तिगत विषय डार्क विषय रखने का प्रयास करता है। (विंडोज 10, क्रोम 76) उदास थे।

* मैक मालिक बेहतर कर सकते हैं। टिप्पणियों में साझा करें ...

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

यहाँ इस तरह के एक संक्षिप्त समीक्षक फिम्मा I इच्छाओं और ग्रन्ट्स के साथ आया था।

मुझे उम्मीद है कि इस उत्पाद के डेवलपर्स में से एक मेरी पोस्ट पढ़ता है और इसे सुधार सकता है। किसी भी मामले में, मैं इस उत्पाद के पीछे का भविष्य देखता हूं, और यह वांछनीय है कि यह सही दिशा में विकसित हो।

वेब को बेहतर बनाते हैं।

PS विशेष डिजाइनरों के लिए धन्यवाद जिनके बारे में मुझे हास्यास्पद सवाल मिले, लेकिन उन्होंने उन्हें लगातार जवाब दिया, और उपयोगकर्ता के लिए AWG-RU पोस्ट के लिए नियम Figma में लेआउट तैयार करने के लिए नियम