آموزش طراحی از Figma تا Webflow

معرفی Introduction

• طراحی در Figma، ساخت در Webflow Design in Figma, build in Webflow

• پیش نیازها و رویکردها Prerequisites and approaches

• پیکربندی برنامه Figma و آپلود فایل شروع Configuring the Figma app and uploading the starting file

1. یک سایت جریان وب از مشخصات Figma ایجاد کنید 1. Create a Webflow Site from Figma Specs

• تکمیل یک ظاهر طراحی برگه Finalizing the tab styling

• راهنمای سبک را در Webflow تنظیم کنید Set up the style guide in Webflow

• چالش: ایجاد پاورقی Challenge: Creating the footer

• فایل شروع Figma را کاوش کنید Explore the starting Figma file

• تنظیم منطقه زبانه‌ها با زبانه‌های عمودی Setting up the tabbed area with vertical tabs

• جامبوترون را پیکربندی کنید Configure the jumbotron

• یک سایت و متغیرها را در جریان وب راه اندازی کنید Set up a site and variables in Webflow

• پیکربندی نوار ناوبری Configuring the navbar

• راه حل: ایجاد پاورقی Solution: Creating the footer

• راه اندازی صفحه برگه برای تولد Setting up the tab pane for birthdays

• تمرین: راه اندازی مجالس عروسی و شرکت ها Practice: Setting up the wedding and corporate panes

2. یک سایت جریان وب را واکنش گرا کنید 2. Make a Webflow Site Responsive

• راه حل: پاسخگو کردن jumbotron Solution: Making the jumbotron responsive

• پیکربندی پیوندهای تب تلفن همراه Configuring mobile tab links

• پیکربندی پنجره های تب موبایل Configuring mobile tab panes

• چالش: پاسخگو کردن jumbotron Challenge: Making the jumbotron responsive

• پاسخگو کردن نوار ناوبری Making the navbar responsive

3. یک سایت جریان وب از یک پلاگین Figma ایجاد کنید 3. Create a Webflow Site from a Figma Plugin

• دسکتاپ درباره طراحی را از Figma به Webflow منتقل کنید Move desktop About design from Figma to Webflow

• رفع مشکلات چیدمان در Webflow Fixing layout problems in Webflow

• راه هایی برای بهبود انتقال طرح های Figma به Webflow از طریق افزونه Ways to improve moving Figma designs to Webflow via the plugin

نتیجه Conclusion

• مراحل بعدی Next steps