ডিভাইস লিঙ্ক
ফিগমার সেরা বৈশিষ্ট্যগুলির মধ্যে একটি হল এটি আপনাকে কোডে আপনার তৈরি করা ডিজাইনগুলিকে দ্রুত স্থানান্তর করতে দেয়। আপনি যদি একজন অ্যাপ ডেভেলপার হন বা ডিজাইনারদের সাথে কাজ করেন তবে এটি শেখার একটি মূল্যবান দক্ষতা। অন্তর্নির্মিত সরঞ্জাম এবং অসংখ্য প্লাগইনগুলির সাহায্যে, ফিগমা আপনাকে বিভিন্ন প্ল্যাটফর্মে আপনার নকশা রপ্তানি করতে দেয়।
আপনি যদি আপনার ফিগমা ডিজাইনকে কোডে রূপান্তর করার বিষয়ে আরও জানতে চান, আপনি সঠিক জায়গায় এসেছেন। এই প্রবন্ধে, আমরা আলোচনা করব কিভাবে Figma কোড রপ্তানি করতে হয় এবং আপনাকে কোন সরঞ্জামগুলি ব্যবহার করতে হবে।
উইন্ডোজ পিসিতে ফিগমাতে কোড কীভাবে রপ্তানি করবেন
আপনি যদি একজন উইন্ডোজ ব্যবহারকারী হন এবং ফিগমাতে কোড রপ্তানি করতে চান তবে আপনি অনেকগুলি বিকল্প ব্যবহার করতে পারেন জেনে খুশি হবেন।
ফিগমা পরিদর্শন
Figma কোড রপ্তানি করতে আপনি যে পদ্ধতিগুলি ব্যবহার করতে পারেন তার মধ্যে একটি হল Figma Inspect। এই বৈশিষ্ট্যটি আপনাকে সহজেই আপনার ডিজাইনগুলিকে Android, iOS বা ওয়েব কোডে রূপান্তর করতে দেয়৷ যেহেতু এটি অন্তর্নির্মিত, তাই আপনাকে কোনো প্লাগইন বা তৃতীয় পক্ষের অ্যাপ ইনস্টল করতে হবে না।
এটি কীভাবে ব্যবহার করবেন তা এখানে:
- আপনি আগ্রহী উপাদান নির্বাচন করুন এবং পরিদর্শন ট্যাবে যান।
- কোড বিভাগের অধীনে, আপনি যে কোডটি রপ্তানি করতে চান সেটি নির্বাচন করুন (ওয়েবের জন্য সিএসএস, আইওএসের জন্য সুইফ্ট বা অ্যান্ড্রয়েডের জন্য এক্সএমএল)।
টুলটি আপনার বেছে নেওয়া বিকল্পের উপর নির্ভর করে কোড তৈরি করবে এবং তারপরে আপনি এটি রপ্তানি করতে পারবেন। যদিও এটি একটি দুর্দান্ত সরঞ্জাম, এর কিছু সীমাবদ্ধতা রয়েছে। যথা, আপনি HTML এ SVG রপ্তানি করতে পারবেন না। এর জন্য, আপনাকে একটি প্লাগইন ব্যবহার করতে হবে।
ফিগমা প্লাগইন
Figma শত শত দরকারী প্লাগইন বৈশিষ্ট্য. আমরা কয়েকটি উল্লেখ করব যা আপনি HTML এ আপনার ডিজাইন এক্সপোর্ট করতে ব্যবহার করতে পারেন।
ফিগমা থেকে HTML
দ্য প্লাগ লাগানো আপনার প্রয়োজনের উপর নির্ভর করে আপনাকে আপনার ডিজাইনকে HTML বা CSS-এ রূপান্তর করতে সক্ষম করে। প্লাগইন এবং এক্সপোর্ট কোড ইনস্টল করতে নীচের পদক্ষেপগুলি অনুসরণ করুন:
- উপরের-বাম কোণে আইকন টিপে প্রধান মেনুতে প্রবেশ করুন।
- প্লাগইন টিপুন।
- কমিউনিটিতে ব্রাউজ প্লাগইন টিপুন।
- এইচটিএমএলে ফিগমা টাইপ করুন এবং শীর্ষে প্লাগইন নির্বাচন করুন।
- ইন্সটল টিপুন।
- আপনার ডিজাইনে ফিরে যান এবং পছন্দসই উপাদান নির্বাচন করুন।
- মূল মেনুতে ফিরে যান, প্লাগইন নির্বাচন করুন এবং তারপরে ফিগমা থেকে এইচটিএমএল নির্বাচন করুন।
- HTML বা CSS বেছে নিন।
- আপনার প্রয়োজনের উপর নির্ভর করে কপি বা ডাউনলোড টিপুন।
ফিগমার জন্য অ্যানিমা
আরেকটি সহায়ক প্লাগইন হল ফিগমার জন্য অ্যানিমা। এই প্লাগইনের সাহায্যে আপনি আপনার ডিজাইনকে HTML, CSS, React এবং Vue-তে রূপান্তর করতে পারেন। প্লাগইন ব্যবহার করতে এই পদক্ষেপগুলি অনুসরণ করুন:
- উপরের বাম আইকনটি নির্বাচন করে প্রধান মেনু খুলুন।
- প্লাগইন টিপুন।
- কমিউনিটিতে ব্রাউজ প্লাগইন নির্বাচন করুন।
- ফিগমার জন্য অ্যানিমা টাইপ করুন।
- ইন্সটল টিপুন।
- আপনি রপ্তানি করতে চান উপাদান নির্বাচন করুন.
- প্রধান মেনু খুলুন, প্লাগইন টিপুন এবং ফিগমার জন্য অ্যানিমা নির্বাচন করুন। আপনার অ্যাকাউন্ট না থাকলে সাইন আপ করুন।
- কোড টাইপ নির্বাচন করুন এবং এক্সপোর্ট কোড টিপুন।
একটি ম্যাকে ফিগমাতে কোড কীভাবে রপ্তানি করবেন
একটি ম্যাক ডিভাইসে কোডে আপনার ডিজাইন এক্সপোর্ট করা বিভিন্ন উপায়ে করা যেতে পারে।
ফিগমা পরিদর্শন
এই অন্তর্নির্মিত টুল আপনাকে আপনার ডিজাইনের জন্য কোড এবং অন্যান্য মান পরিদর্শন এবং রপ্তানি করতে দেয়। ফিগমা ইনস্পেক্টের মাধ্যমে, আপনি তিনটি কোড বিকল্পের মধ্যে বেছে নিতে পারেন: Android, iOS বা ওয়েব (শুধুমাত্র CSS)।
একটি Mac এ Figma পরিদর্শন ব্যবহার করতে নীচের পদক্ষেপগুলি অনুসরণ করুন:
- আপনি রপ্তানি করতে চান উপাদান নির্বাচন করুন.
- ডানদিকে পরিদর্শন ট্যাবটি খুলুন।
- CSS, iOS বা Android এর মধ্যে বেছে নিন।
- আপনার কোড কপি করুন.
আপনি যদি শুধুমাত্র CSS, iOS এবং Android এ আগ্রহী হন তবে এটি ব্যবহার করার জন্য একটি চমৎকার টুল। যাইহোক, আপনি যদি আপনার ডিজাইনটি HTML এ রপ্তানি করতে চান তবে আপনাকে একটি ভিন্ন পদ্ধতি ব্যবহার করতে হবে।
ফিগমা প্লাগইন
আপনি যদি আপনার ডিজাইনগুলিকে HTML-এ রূপান্তর করতে চান, Figma কয়েক ডজন প্লাগইন অফার করে যা এই উদ্দেশ্যে পরিবেশন করে। ইনস্টলেশন প্রক্রিয়া সহজ. আমরা সবচেয়ে জনপ্রিয় কয়েকটি তালিকা করব।
ফিগমা থেকে HTML
এই প্লাগ লাগানো আপনাকে আপনার ডিজাইনকে CSS বা HTML-এ রূপান্তর করতে দেয়। এটি কীভাবে ইনস্টল করবেন তা এখানে:
- প্রধান মেনু খুলতে উপরের-বাম আইকনটি নির্বাচন করুন।
- প্লাগইন টিপুন।
- কমিউনিটিতে ব্রাউজ প্লাগইন নির্বাচন করুন।
- অনুসন্ধান বারে এইচটিএমএল থেকে ফিগমা টাইপ করুন এবং শীর্ষে প্লাগইন নির্বাচন করুন।
- ইন্সটল টিপুন।
- আপনার ডিজাইনে ফিরে যান এবং আপনি যে উপাদানগুলি রপ্তানি করতে চান তা নির্বাচন করুন।
- প্রধান মেনু খুলুন, প্লাগইন নির্বাচন করুন এবং তারপরে এইচটিএমএল থেকে ফিগমা নির্বাচন করুন।
- HTML বা CSS নির্বাচন করুন।
- কপি বা ডাউনলোড টিপুন।
কোড থেকে ফিগমা
এর সাথে প্লাগ লাগানো , আপনি আপনার ফিগমা ডিজাইনকে HTML, Tailwind, Flutter, বা Swift UI এ রূপান্তর করতে পারেন। এটি ইনস্টল এবং ব্যবহার করতে নীচের পদক্ষেপগুলি অনুসরণ করুন:
- প্রধান মেনু অ্যাক্সেস করতে উপরের-বাম আইকন টিপুন।
- প্লাগইন নির্বাচন করুন।
- কমিউনিটিতে ব্রাউজ প্লাগইন টিপুন।
- অনুসন্ধান বারে Figma to Code টাইপ করুন এবং প্রাসঙ্গিক ফলাফল পেতে শীর্ষে প্লাগইন নির্বাচন করুন।
- ইন্সটল টিপুন।
- আপনার ডিজাইনে যান এবং পছন্দসই উপাদান নির্বাচন করুন।
- আবার মূল মেনুতে প্রবেশ করুন, প্লাগইন নির্বাচন করুন এবং তারপরে কোড থেকে ফিগমা নির্বাচন করুন।
- পছন্দসই কোড নির্বাচন করুন.
- ক্লিপবোর্ডে অনুলিপি টিপুন।
আমি কি আইফোনে ফিগমাতে কোড রপ্তানি করতে পারি?
নতুন ফিগমা আইফোন অ্যাপটি শুধুমাত্র একটি বিটা সংস্করণ হিসাবে উপলব্ধ ছিল পরীক্ষা ফ্লাইট প্রথম 10,000 আইফোনের জন্য, কিন্তু কোম্পানির পুরো রোলআউট শীঘ্রই আসছে. অ্যাপটি আপনাকে আপনার ডিজাইনগুলি ব্রাউজ করতে এবং অ্যাক্সেস করতে এবং আপনার কম্পিউটারে ডিজাইন সম্পাদনা করার সময় আপনার iPhone এ লাইভ পরিবর্তনগুলি ট্র্যাক করতে দেয়৷
সেই সময়ে, আইফোন অ্যাপের মাধ্যমে ডিজাইন সম্পাদনা করা সম্ভব নয়, যার মানে এটির মাধ্যমে কোড রপ্তানি করার কোনো উপায় নেই।
Figma এছাড়াও প্রস্তাব ফিগমা মিরর অ্যাপ স্টোরে অ্যাপ। এই অ্যাপটি আপনাকে একই নেটওয়ার্কের সাথে সংযুক্ত না হয়ে যেকোনো iOS ডিভাইসে আপনার ডিজাইন মিরর করতে সক্ষম করে। এইভাবে, আপনি একটি নির্দিষ্ট ডিভাইসে আপনার ডিজাইন কেমন দেখাচ্ছে তা পরীক্ষা করতে পারেন (এই ক্ষেত্রে, আইফোন) এবং পরিবর্তনগুলি ট্র্যাক করতে পারেন। যদিও দরকারী, অ্যাপটি আপনাকে আপনার আইফোনে কোড রপ্তানি করার অনুমতি দেয় না। এর জন্য, আপনাকে আপনার কম্পিউটার ধরতে হবে।
আপনি আপনার ব্রাউজারের মাধ্যমে আপনার ডিজাইন অ্যাক্সেস করতে পারেন। যাইহোক, আপনি এখনও শুধুমাত্র আপনার ডিজাইন দেখতে এবং লাইভ পরিবর্তনগুলি ট্র্যাক করতে সক্ষম হবেন।
আমি কি আইপ্যাডে ফিগমাতে কোড রপ্তানি করতে পারি?
দুর্ভাগ্যবশত, আপনি যদি আইপ্যাড ব্যবহার করেন তবে ফিগমাতে কোড রপ্তানি করা সম্ভব নয়। ফিগমা মোবাইল অ্যাপে কাজ করছে, এবং একটি বিটা সংস্করণ রয়েছে, তবে এটি ট্যাবলেটের জন্য উপলব্ধ ছিল না, শুধুমাত্র আইফোন এবং অ্যান্ড্রয়েডের জন্য।
ফিগমা মিরর অ্যাপটি আইপ্যাডে উপলব্ধ। অ্যাপটি আপনাকে কম্পিউটারের মাধ্যমে আপনার ডিজাইনে করা পরিবর্তনগুলি ট্র্যাক করতে এবং আইপ্যাড স্ক্রিনে সেগুলি কীভাবে দেখায় তা পরীক্ষা করার অনুমতি দেয়। দুর্ভাগ্যবশত, অ্যাপের মধ্যে কোড রপ্তানি করার বিকল্প উপলব্ধ নেই।
আপনি যদি অ্যাপটি ইনস্টল করতে না চান তবে আপনি আপনার ব্রাউজারের মাধ্যমে ফিগমা অ্যাক্সেস করতে পারেন এবং ডিজাইনে পরিবর্তনগুলি ট্র্যাক করতে পারেন। কিন্তু, Figma কোড রপ্তানি শুধুমাত্র একটি কম্পিউটারে সম্ভব।
আমি কি একটি অ্যান্ড্রয়েডে ফিগমাতে কোড রপ্তানি করতে পারি?
ফিগমা বর্তমানে অ্যান্ড্রয়েড অ্যাপে কাজ করছে এবং 10,000 অ্যান্ড্রয়েড ফোনের জন্য একটি বিটা সংস্করণ অফার করে। থেকে অ্যাপটি ডাউনলোড করে পরীক্ষক হতে পারেন খেলার দোকান এবং এই অ্যাক্সেস লিঙ্ক . আপনি আপনার কম্পিউটারের কাছে না থাকলেও অ্যাপের মধ্যে আপনার ডিজাইন ব্রাউজ করতে, দেখতে এবং শেয়ার করতে এবং পরিবর্তনগুলি ট্র্যাক করতে পারেন৷
যদিও অ্যাপটি অনেক কাজের জন্য উপযোগী, এটি আপনাকে আপাতত কোড রপ্তানি করতে সক্ষম করে না।
দ্য ফিগমা মিরর অ্যাপটি অ্যান্ড্রয়েডের জন্যও উপলব্ধ। এর প্রধান উদ্দেশ্য হল আপনার কম্পিউটারে আপনার ডিজাইনে আপনি যে পরিবর্তনগুলি করেছেন তা ট্র্যাক করা এবং সেগুলি সমস্ত Android ডিভাইস জুড়ে সুন্দর দেখায় তা নিশ্চিত করা৷ কোড রপ্তানি করার বিকল্প উপলব্ধ নেই।
আপনি যদি অ্যাপটি ইনস্টল করতে না চান তবে আপনি আপনার ব্রাউজারের মধ্যে Figma ব্যবহার করতে পারেন। যাইহোক, আপনি এখনও কোডটি রপ্তানি করতে পারবেন না। এর জন্য, আপনাকে আপনার কম্পিউটার ব্যবহার করতে হবে।
আমার ফটোগুলি গুগল ফটোতে আপলোড হচ্ছে না কেন?
অতিরিক্ত প্রায়শই জিজ্ঞাসিত প্রশ্নাবলী
আমি কীভাবে ফিগমা থেকে এক্সকোডে রঙ রপ্তানি করব?
দুর্ভাগ্যবশত, Figma থেকে Xcode-এ রং রপ্তানি করা সম্ভব নয় কারণ Figma এটি সমর্থন করে না। কিন্তু, একটি সমাধান আছে যা আপনি ব্যবহার করতে পারেন ফিগমা রপ্তানি . এটি ব্যবহার করতে নীচের পদক্ষেপগুলি অনুসরণ করুন:
1. আপনি ইতিমধ্যে না থাকলে, ইনস্টল করুন ফিগমা রপ্তানি .
2. Terminal.app খুলুন।
3. ফিগমা-এক্সপোর্ট ফাইল দিয়ে ফোল্ডারটি খুলুন।
4. ফিগমা-রপ্তানি চালু করুন।
5. ./figma-export colors -i figma-export.yaml ব্যবহার করে রং রপ্তানি করুন।
আমি কিভাবে Figma থেকে HTML কোড রপ্তানি করব?
পূর্বে উল্লিখিত হিসাবে, ফিগমা ইনস্পেক্ট নামক অন্তর্নির্মিত টুল আপনাকে CSS পেতে দেয়, কিন্তু HTML নয়। আপনার যদি HTML কোডের প্রয়োজন হয় তবে আপনাকে একটি প্লাগইন ইনস্টল করতে হবে।
ফিগমাতে কয়েক ডজন প্লাগইন রয়েছে যা এই উদ্দেশ্যে কাজ করে। আমাদের সুপারিশ হল ফিগমা থেকে HTML . এটি কীভাবে ব্যবহার করবেন তা এখানে:
1. প্রধান মেনু খুলুন। এটি উপরের-বাম আইকন।
2. প্লাগইন টিপুন।
3. কমিউনিটিতে ব্রাউজ প্লাগইন নির্বাচন করুন।
4. অনুসন্ধান বারে এইচটিএমএল থেকে ফিগমা টাইপ করুন এবং নিশ্চিত করুন যে প্লাগইনগুলি শীর্ষে নির্বাচিত হয়েছে৷
5. ইনস্টল নির্বাচন করুন।
6. আপনার ডিজাইনে ফিরে যান এবং আপনি যে উপাদানগুলিকে HTML এ রূপান্তর করতে চান তা নির্বাচন করুন৷
7. প্রধান মেনুতে যান, প্লাগইন নির্বাচন করুন এবং এইচটিএমএল-এ ফিগমা খুলুন।
8. HTML টিপুন।
9. কপি বা ডাউনলোডের মধ্যে বেছে নিন।
আপনার প্রয়োজনীয় কোড পান
ফিগমা আপনাকে বিভিন্ন পদ্ধতি ব্যবহার করে বিভিন্ন ধরনের কোড রপ্তানি করতে দেয়। আপনি বিল্ট-ইন টুল ব্যবহার করতে পারেন বা আপনার প্রয়োজনের উপর নির্ভর করে বিভিন্ন প্লাগইন ডাউনলোড করতে পারেন। আপাতত, শুধুমাত্র কম্পিউটারের মাধ্যমেই কোড রপ্তানি করা সম্ভব। ফিগমা মোবাইল অ্যাপের বিটা সংস্করণ প্রকাশ করেছে (10,000টি আইফোন বা অ্যান্ড্রয়েড ডিভাইসের মধ্যে সীমাবদ্ধ), তবে এটিতে এই বিকল্পটি নেই। সৌভাগ্যবশত, কম্পিউটারে কোড রপ্তানি দ্রুত এবং সহজ।
আপনি কিভাবে Figma কোড রপ্তানি করবেন? আপনি কি এই নিবন্ধে উল্লেখ করা পদ্ধতিগুলির মধ্যে একটি ব্যবহার করেন? নীচের মন্তব্য বিভাগে আমাদের বলুন।