Composer
লেআউট ও ডিজাইন: পাতা, ফ্রেম, কম্পোনেন্ট এবং প্রকৃত টাইপোগ্রাফি, একটি প্রোটোটাইপ ভিউ ও একটি কোড ভিউসহ।
একনজরে#
জিনিস সাজানোর জন্য একটি অসীম ক্যানভাস: multi-page ডকুমেন্ট, স্ক্রিন ডিজাইন এবং লেআউট, "একটি ফন্ট আর একটি সাইজ বেছে নেওয়া"-র চেয়ে বেশি কিছু করা টাইপোগ্রাফিক কন্ট্রোলসহ।
লেআউট#
| Menu bar | File · Edit · View · Object · Vector · Text · Arrange · Plugins |
| Toolbar | undo/redo, select, frame, shapes, line, arrow, pen, type, hand: তারপর Margins, Guides, Baseline, এবং আর্টবোর্ড সংখ্যা |
| Left | Pages, তারপর Layers · Assets · Components · Frames, তারপর layer-ক্যাটাগরি তালিকা |
| Centre | ক্যানভাস, জুম ও একটি পাতা ইন্ডিকেটরসহ |
| Right | Design · Prototype · Code |
| Status bar | আর্টবোর্ড, অবজেক্ট, সিলেকশন, সক্রিয় টুল, জুম |
এখানে আপনি যা করেন#
পাতা ও ফ্রেম#
একটি ডকুমেন্টের pages থাকে; একটি page ধরে রাখে frames (artboard)। এটাই Vectra-র সাথে পার্থক্য, যেটি একবারে একটা আর্টবোর্ডে আঁকে: Composer একগুচ্ছ স্ক্রিন বা একগুচ্ছ spread-এর জন্য।
লেয়ার, অ্যাসেট ও কম্পোনেন্ট#
একই ডকুমেন্টের উপর চারটি ট্যাব। Components হলো পুনর্ব্যবহারযোগ্য অংশ, একবার সংজ্ঞায়িত করুন, অনেকবার বসান, সংজ্ঞাটা এডিট করলে প্রতিটি instance অনুসরণ করে। Assets হলো ডকুমেন্টটা কী টেনে আনছে। লেয়ার তালিকা ধরন অনুযায়ী গ্রুপ করা (Text, Images, Graphics), যা একটি ব্যস্ত পাতায় একটি সমতল তালিকার চেয়ে দ্রুত স্ক্যান করা যায়।
নিখুঁতভাবে লেআউট করুন#
X, Y, W, H এবং একটি corner radius, সাথে align and distribute। Margins, Guides এবং একটি Baseline গ্রিড টুলবারের টগল: baseline গ্রিডটাই একটি spread জুড়ে multi-column টেক্সটকে সারিবদ্ধ করে।
টাইপোগ্রাফি#
যে অংশটা Composer-কে তার জায়গা অর্জন করে দেয়:
| Font, size, leading, tracking | সংখ্যা হিসেবে, স্লাইডার হিসেবে নয় |
| Alignment | অনুভূমিক, এবং বাক্সের ভেতরে উল্লম্ব: top, middle, bottom |
| Weight এবং case | "as typed" সহ |
| Paragraph spacing, তালিকা | bullet বা numbered |
| Resize mode | Fixed size, Auto width, Auto height: বাক্সটা টেক্সট অনুসরণ করবে নাকি টেক্সট বাক্সে wrap হবে |
| Text threading | একটি টেক্সট বাক্সকে পরেরটার সাথে লিংক করুন যাতে overflow এগিয়ে যায় |
| Text styles | নামযুক্ত, পুনর্ব্যবহারযোগ্য |
প্রোটোটাইপ ও কোড#
Prototype ট্যাব স্ক্রিনগুলোকে একটি ক্লিকযোগ্য ফ্লোতে তারযুক্ত করে। Code ট্যাব ডিজাইনটাকে কোড হিসেবে দেখায়।
Variable ও Style#
দুটো প্যানেল যা একটি ডকুমেন্টকে পাতার একটি সেট না রেখে একটি সিস্টেমে পরিণত করে:
- Variables: নামযুক্ত মান (একটি রং, একটি সংখ্যা, একটি স্ট্রিং) যা ডকুমেন্ট জুড়ে ব্যবহৃত হয়, যেখানেই একটি মান সেট করা হয় সেখানে একটি variable picker সহ। ভেরিয়েবলটা বদলান, প্রতিটি ব্যবহার অনুসরণ করে।
- Styles: নামযুক্ত টেক্সট ও অবজেক্ট স্টাইল।
- Fills: fill এডিটর, গ্র্যাডিয়েন্ট ও ছবিসহ।
Components-এর সাথে মিলে, এগুলোই একটি ডিজাইনকে token-চালিত করে তোলে: Vectra-র DA ওয়ার্কস্পেস ডিজাইন টোকেন এক্সপোর্ট করতে পারে, আর Composer হলো যেখানে সেগুলো ব্যবহার করা হয়।
প্রোটোটাইপিং#
এখানে একটি প্রোটোটাইপ হলো আপনার আগে থেকে আঁকা ফ্রেমগুলোর উপর একটি গ্রাফ। প্রতিটি ইন্টারঅ্যাকশন চারটি জিনিস: একটি trigger (click বা hover), একটি target ফ্রেম, একটি transition এবং একটি duration। একটি ফ্রেমের connect হ্যান্ডেল থেকে টেনে যে ফ্রেমে এটার যাওয়া উচিত সেখানে নিয়ে যান।
Prototype Mode ক্যানভাসটাকে flow ভিউতে বদলে দেয়; Preview Player পাঠক যেভাবে দেখবেন সেভাবে এটি চালায়, একটি restart সহ। আলাদা কোনো প্রোটোটাইপিং ডকুমেন্ট নেই, ফ্রেমগুলোই স্ক্রিন।
Dev Mode, ডিজাইন কোডের হাতে তুলে দেওয়া#
Inspect ট্যাবটা একটি ডিজাইন টুলের বাকি অর্ধেক: এটি সিলেকশন পড়ে এবং তার জন্য কোড তৈরি করে, তিনটি প্ল্যাটফর্ম ট্যাবে।
| ট্যাব | আউটপুট |
|---|---|
| CSS | web |
| iOS | SwiftUI |
| Android | Jetpack Compose |
তৈরি করা কোডের পাশাপাশি এটি একজন ডেভেলপার যে প্রকৃত সংখ্যাগুলো চান তা জানায়: size, radius, rotation, opacity, fill, stroke, effects, font ও font size, এবং parent-এর সাপেক্ষে ও sibling-এর সাপেক্ষে পরিমাপ করা spacing: এই দুটো দূরত্বই একটি লেআউট ঠিক করে। কোড ক্লিপবোর্ডে কপি হয় বা ডাউনলোড হয়।
এক্সপোর্ট করা#
Composer-এ Export একটি সেটিংসের তালিকা, একটি একক পছন্দ নয়: কয়েকটা যোগ করুন, কোনগুলো চালাবেন বেছে নিন, আর প্রতিটি নির্বাচিত সেটিং এক ধাপে তার নিজের ফাইল তৈরি করে। প্রতিটি সেটিং বহন করে:
| Format ও quality | প্রতি সেটিংয়ে, তাই একটি PNG ও একটি JPG একসাথে বেরোতে পারে |
| Scale ও DPI | @2x এবং প্রিন্ট রেজোলিউশন |
| CMYK (print) | প্রেসে যাওয়ার ভার্সনের জন্য |
| Naming | একটি prefix ও suffix, project- এবং @2x |
| Background | transparentসহ, যেখানে ফরম্যাট অনুমতি দেয় |
দুটো খুঁটিনাটি যা প্যানেলটা আবিষ্কার করতে না রেখে বলে দেয়:
- শুধু PNG ও SVG-তে transparency থাকে। একটি JPG-তে transparent ব্যাকগ্রাউন্ড বেছে নেওয়া এমন একটা সেটিং যার কোনো প্রভাব নেই, আর প্যানেলটা সেটাই বলে।
- একটি export-এর source হয় একটি node নয়তো একটি slice: Create Slice বর্তমান সিলেকশন থেকে একটি export অঞ্চল তৈরি করে, ফ্রেমটাকে না কেটেই একটা ফ্রেমের অংশ এভাবেই এক্সপোর্ট করা যায়।
Presets সেটিংসের একটা গোটা সেট সংরক্ষণ করে, তাই একটি প্রজেক্টের export কনফিগারেশন একবারই লেখা হয়।
এটি যেসব ফাইল পড়ে ও লেখে#
| Native format | .comp |
| Exports | .png · .jpg · .svg, যেকোনো scale বা DPI-তে, RGB বা CMYK-তে |
| Generates | CSS · SwiftUI · Jetpack Compose |
অন্য স্টুডিওতে কাজ পাঠানো#
উৎপন্ন করে একটি কম্পোজিশন, এবং সক্রিয় আর্টবোর্ডটি একটি ছবি হিসেবে রেন্ডার করা। গ্রহণ করে pixel art, vector art এবং ছবি।
অন্য কারও সাথে কাজ করা#
Composer একটি document হিসেবে সিঙ্ক করে: পুরো অবস্থা, ডিবাউন্সড, সাথে dispatched action। দুইজন মানুষ একই মুহূর্তে একই পাতা এডিট করলে তাদের একজন জিতবে; আলাদা পাতায় কাজ করুন।
সীমাবদ্ধতা ও সাধারণ সমস্যা#
- Auto width ও auto height ফিক্সড লেআউটের সাথে সংঘাত করে। auto width সেট করা একটি বাক্স wrap করবে না; টেক্সট ফ্রেম থেকে বেরিয়ে গেলে, সাধারণত এটাই কারণ।
- Text threading স্বয়ংক্রিয় নয়। থ্রেড না করা পর্যন্ত একটি বাক্স Not linked জানায়।
- Components সংজ্ঞা থেকে ছড়ায়, কোনো instance থেকে নয়। একটি instance এডিট করলে বাকিগুলো আপডেট হয় না।