آموزش سایتساز فیگما: طراحی و راهاندازی وبسایت - آخرین آپدیت
دانلود Figma Sites: Build and Launch a Website
با Figma Sites، شما میتوانید همانطور که به محیط فیگما عادت دارید طراحی کنید و مستقیماً از داخل ابزار مورد علاقهتان در UI، دکمه انتشار (Publish) را بزنید. بدون کدنویسی، بدون نیاز به برنامهنویس و بدون ساختارهای پیچیده. فقط بکشید، رها کنید، طراحی کنید و آنلاین شوید.
شما حتی میتوانید کتابخانههای برند مشترکایجاد کنید تا تیم شما از بلوکها، رنگها و استایلهای یکسانی استفاده کند و همه چیز منسجم و مطابق با هویت برندباشد.
در این دوره، من شما را از مفاهیم پایه تا مباحث پیشرفته و در نهایت تا مرحله انتشار سایت راهنمایی خواهم کرد.
ما از صفر و با استفاده از بلوکهای پیشساخته فیگماشروع میکنیم که برای مبتدیان ایدهآل است. به شما نشان میدهم چگونه زیرصفحهها را متصل کنید، المانهای سفارشیاضافه کنید و با تعاملات ساده و انیمیشنهای روانبه سایت خود روح ببخشید.
یاد میگیرید چگونه با استفاده از کامپوننتها (Components)، المانهای قابل استفاده مجدد مانند منوی ناوبری (Nav bar) و فوتربسازید. همچنین ویدیوها و نقشهها را جاسازی (Embed)میکنیم و حتی با استفاده از Figma Make و هوش مصنوعی، بلوکهای کد سفارشیایجاد میکنیم.
سپس سایت را یا با یک آدرس رایگان فیگمایا دامنه اختصاصی خودتانمنتشر میکنیم. من به شما آموزش میدهم چگونه تنظیمات دسترسیپذیری (Accessibility) و سئو (SEO)را به درستی انجام دهید تا سایت شما حرفهای و آماده بازدید باشد.
میخواهید فراتر بروید؟ به شما یاد میدهم چگونه کتابخانه طراحی شخصی خود را با رنگهای انعطافپذیر، تایپوگرافی و بلوکهای ریسپانسیو (Responsive)بسازید که در تمام پروژههایتان قابل استفاده باشد.
Figma Sites برای رزومههای آنلاین (پورتفولیو)، صفحات معرفی محصول، صفحات شخصی یا سایتهای کسبوکارهای کوچک فوقالعاده است.
یک راه سریع و ساده برای آنلاین کردن ایدههایتان، تا بتوانید روی آنچه واقعاً مهم است تمرکز کنید.
اگر نیاز دارید مفاهیم پایهای مانند کامپوننتها، متغیرها (Variables) یا Auto Layout را مرور کنید، مشکلی نیست؛ دوره شروع کار با فیگمامن در Skillshare را ببینید! از آنجایی که Figma Design و Figma Sites پایه یکسانی دارند، میتوانید مستقیماً وارد آن شوید. عالی است! 👉
طراحی & راهاندازی
- فایلها & فضای کاری فیگما
- مرور رابط کاربری Sites
- ساخت اولین صفحه شما
- افزودن زیرصفحهها & لینکها
- درج المانهای سفارشی
- استفاده از کامپوننتها
- ناوبری ثابت (Fixed Navigation)
- مبانی انیمیشن
- جاسازی نقشهها و ویدیوها
- لایههای کد با Figma Make
انتشار & تنظیمات
- انتشار سایت شما
- سئو (SEO)، فاوآیکون & اشتراکگذاری اجتماعی
- اتصال دامنه اختصاصی
- اصول ضروری دسترسیپذیری
کتابخانهها & شخصیسازی
- آشنایی با کتابخانههای بلوک سفارشی
- اتصال & استفاده از کتابخانهها
- راهاندازی صفحات سفارشی
- شخصیسازی رنگها & تایپوگرافی
- ساخت کامپوننتهای شخصی
اگر نیاز دارید مفاهیم پایهای مانند کامپوننتها، متغیرها یا Auto Layout را مرور کنید، مشکلی نیست؛ دوره شروع کار با فیگمامن در Skillshare را ببینید! از آنجایی که Figma Design و Figma Sites پایه یکسانی دارند، میتوانید مستقیماً وارد آن شوید. عالی است! 👉
درسها Lessons
-
مقدمه Figma Sites Figma Sites Intro
-
منابع دوره Course Material
-
پایه: مرورگر فایلهای فیگما BASICS: Figma file browser
-
پایه: مرور رابط کاربری Sites BASICS: Sites interface overview
-
پایه: ساخت اولین صفحه شما BASICS: Create your first page
-
پایه: اتصال به زیرصفحهها BASICS: Connect to subpages
-
پایه: درج المانهای سفارشی BASICS: Insert custom elements
-
پایه: افزودن لینکها و ایمیل BASICS: Adding links and mailto
-
پایه: کامپوننتها BASICS: Components
-
برای مفاهیم پایه، کلاس مبتدی فیگما من را ببینید! Check out my Figma Beginner Class for the Basics!
-
پایه: ناوبری ثابت BASICS: Fixed navigation
-
پایه: مبانی انیمیشن BASICS: Animation basics
-
پایه: جاسازی نقشهها و ویدیوها BASICS: Embed maps and videos
-
پایه: لایههای کد با Figma Make BASICS: Code layers with Figma Make
-
انتشار: انتشار سایت شما PUBLISH: Publish your site
-
انتشار: سئو، فاوآیکون و اشتراکگذاری اجتماعی PUBLISH: SEO, favicon & social sharing
-
انتشار: اتصال دامنه اختصاصی PUBLISH: Connect a custom domain
-
انتشار: اصول ضروری دسترسیپذیری PUBLISH: Accessibility essentials
-
کتابخانه: مقدمه کتابخانهها LIBRARY: Libraries intro
-
کتابخانه: اتصال یک کتابخانه LIBRARY: Connecting a library
-
کتابخانه: راهاندازی صفحات سفارشی LIBRARY: Setting up custom pages
-
کتابخانه: شخصیسازی رنگ با متغیرها LIBRARY: Customising colour with variables
-
کتابخانه: استایلهای تایپوگرافی ریسپانسیو LIBRARY: Responsive typography styles
-
کتابخانه: بلوکهای کامپوننت ریسپانسیو LIBRARY: Responsive component blocks
-
درباره فیگما بیشتر بدانید Learn more about Figma
https://donyad.com/d/1745e0
Christine Vallaure
UI/UX DESIGN + CODE
طراح UX/UI با علاقه به کد و بنیانگذار .
من در سطح بینالمللی، داخلی و از راه دور روی پروژههایی برای برندها، آژانسها و استارتآپهای پیشرو کار کردهام. من عمیقاً به ایجاد محصولاتی با فکر و زیبایی اهمیت می دهم. کارهای من از ایدههای اولیه گرفته تا طرحها، وایرفریمها، نمونهسازی اولیه و تنظیم جلویی را شامل میشود.
علاوه بر پروژههای مشتری (بازدید برای منابع)، من در حال ساختن یک پلتفرم یادگیری آنلاین برای طراح UX/UI. من همچنین در مورد کد طراحی در رسانه و من می نویسم.
برای اطلاعات بیشتر درباره من لطفاً به من مراجعه کنید صفحه LinkedIn .
نمایش نظرات