Скачать или смотреть Lesson 18 & 19: Figma to Flutter UI Design | Flutter Apps Development Course | Learn with Noman

Flutter Figma to UI Convert — বাংলা বিস্তারিত ব্যাখ্যা

Flutter অ্যাপ ডেভেলপমেন্টে Figma থেকে UI কনভার্ট করা খুবই গুরুত্বপূর্ণ। Figma হলো একটি ডিজাইন টুল যেখানে ডিজাইনাররা সম্পূর্ণ অ্যাপের স্ক্রিন ডিজাইন করে দেন। একজন Flutter ডেভেলপার হিসেবে আপনার কাজ হলো সেই ডিজাইনকে ঠিক একইভাবে Flutter UI হিসেবে তৈরি করা।

১. Figma ডিজাইন Inspect করা
Figma ফাইলে ঢোকার পর ডান পাশে Inspect Panel দেখা যায়।
এখান থেকে নিচের জিনিসগুলো লক্ষ্য করতে হয়:

Padding
Margin
Width & Height
Font family
Font size
Font weight
Color code (#HEX)
Border radius
Shadow
Icons & Images assets

এই তথ্যগুলো Flutter-এ UI তৈরির জন্য দরকারি।

২. ফন্ট এবং কালার সেট করা
Figma-তে ব্যবহৃত ফন্ট Google Fonts-এ পাওয়া যায়। Flutter প্রজেক্টে যোগ করতে:

৩. Layout Structure তৈরি করা
ডিজাইন দেখে বুঝতে হয় কোন Widget ব্যবহার করতে হবে:

Column
Row
Stack
ListView
GridView

ডিজাইনের মতো কাঠামো Flutter কোডে তৈরি করতে হয়।

৪. Spacing এবং Alignment ঠিক রাখা
Figma-তে 16px padding থাকলে Flutter-এ:

Padding(
padding: EdgeInsets.all(16),
)


ডিজাইন অনুযায়ী margin, padding, gap রাখতে হবে।

৫. Pixel-perfect UI তৈরি করা
Figma-র measurement অনুযায়ী Flutter কোড লিখলে UI একদম একই দেখাবে।

উদাহরণ:
Container(
height: 56,
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(12),
),
child: Center(
child: Text(
"Login",
style: GoogleFonts.poppins(
fontSize: 16,
fontWeight: FontWeight.w600,
),
),
),
)

৬. Assets Export করা
Figma থেকে PNG বা SVG export করে Flutter-এ যোগ করতে হয়:

flutter:
assets:
assets/images/
assets/icons/

৭. Responsive UI তৈরি করা
বিভিন্ন স্ক্রিন সাইজে ভালো দেখানোর জন্য ব্যবহার করা যায়:

MediaQuery
LayoutBuilder
Expanded
Flexible
ScreenUtil (package)

৮. Icons এবং Components পুনর্ব্যবহার
Figma-তে যদি কোনো component বারবার ব্যবহার করা হয়, Flutter-এ সেটার Custom Widget বানিয়ে পুনর্ব্যবহার করা উচিত।

Benefits of Converting Figma to Flutter UI

Pixel-perfect UI
Clean & reusable code
Faster development
Better team collaboration
Professional look

Hashtags:
#Flutter #FlutterUI #FigmaToFlutter
#FlutterBangla #FlutterDevelopment
#LearnWithNoman #MobileAppDevelopment
#FigmaDesign #FlutterWidgets
#FlutterTutorial #UIUXDesign
#AndroidDevelopment #iOSDevelopment
#BanglaTutorial #FlutterCourse
#GetX #FrontendDevelopment