طراحی از FIGMA به Webflow

مدرس Jen Kramer

انتشار 2024/02/07

مدت زمان 2h 18m

سطح مناسب همه

فایل تمرینی دارد

آموزش Designing from Figma to Webflow

در این دوره ، جین کرامر ، متخصص طراحی و توسعه وب شما را با یک گردش کار جدید بسیار مفید آشنا می کند که به شما امکان می دهد طرح سایت خود را در FIGMA ایجاد کنید ، سپس به WebFlow بروید تا همان وب سایت سفارشی را بدون کد ایجاد کنید. جنبه های اساسی پرونده های FIGMA خود را که برای کار در Webflow بسیار مهم هستند ، کاوش کنید. پیدا کنید که چگونه می توانید دارایی های فردی را در FIGMA برای صادرات به WebFlow و همچنین نحوه فشرده سازی دارایی های تصویر و رسانه برای WebFlow علامت گذاری کنید. برای ایجاد یک سایت اصلی WebFlow برای دارایی های صادر شده خود غوطه ور شوید و یاد بگیرید که چگونه کد Webflow ، CSS و تصاویر خود را ادغام کنید تا ظاهر/احساس مناسب را ایجاد کنید. به علاوه ، به روش هایی بروید که می توانید نمای Webflow خود را برای پشتیبانی از تمام اندازه ها و صفحه های دستگاه پاسخگو باشید.

Figma (Software) User Interface Design Webflow

Introduction

Design in Figma, build in Webflow ()

Prerequisites and approaches ()

Configuring the Figma app and uploading the starting file ()

1. Create a Webflow Site from Figma Specs

Explore the starting Figma file ()

Set up a site and variables in Webflow ()

Set up the style guide in Webflow ()

Configuring the navbar ()

Configure the jumbotron ()

Setting up the tabbed area with vertical tabs ()

Setting up the tab pane for birthdays ()

Practice: Setting up the wedding and corporate panes ()

Finalizing the tab styling ()

Challenge: Creating the footer ()

Solution: Creating the footer ()

2. Make a Webflow Site Responsive

Making the navbar responsive ()

Challenge: Making the jumbotron responsive ()

Solution: Making the jumbotron responsive ()

Configuring mobile tab panes ()

Configuring mobile tab links ()

3. Create a Webflow Site from a Figma Plugin

Move desktop About design from Figma to Webflow ()

Fixing layout problems in Webflow ()

Ways to improve moving Figma designs to Webflow via the plugin ()

Conclusion

Next steps ()

Ex_Files_Designing_from_Figma_to_Webflow.zip (14.8 MB)

دانلود فایل فشرده

با توجه به امکانات آموزش و همچنین امکانات بسته انتخاب شده لینک دانلود فایل فشرده آماده خواهد شد. با در نظر داشتن این شرایط لطفا بسته مورد نظر خود را انتخاب کرده و روی دکمه درخواست لینک دانلود کلیک کنید

در حال به روزرسانی اطلاعات

درخواست لینک دانلود

در حال به روزرسانی اطلاعات

لطفا قبل از فعالسازی لینک دانلود به موارد زیر توجه کنید:

پسورد فایل‌های فشرده است.
لینک‌های آماده شده تا 8 روز پس از فعالسازی منقضی خواهند شد.
حجم فایل‌ها تخمینی هستند.
در صورتی که لینک دانلود تا 15دقیقه پس از درخواست آماده نشد، از بخش پشتیبانی پیگیری نمایید.