دوره آموزشی Figma: از طراحی تا پیاده سازی CSS

48 دقیقهمتوسط2023-07-11

مدرسین

Joseph Labrecque

University Professor, Adobe Educator, Studio Head

جزئیات دوره

شما طراحی‌های فوق‌العاده‌ای ایجاد کردید، ولی چطور می‌تونید اون‌ها رو به دارایی‌هایی تبدیل کنید که توسعه‌دهندگان بتونند ازشون استفاده کنند؟ در این دوره کاربردی، استاد دانشگاه جوزف لابریک به شما کمک می‌کنه تا بفهمید فایل‌های فیگمای شما به چه چیزی نیاز دارند تا بتونند به خوبی به "زبان توسعه‌دهندگان" ترجمه بشن. یاد بگیرید چطور ویژگی‌های صادرات تصویر رو تعریف کنید، تصاویر رو صادر و سازماندهی کنید. متوجه بشید چطور از فضای کاری Inspect استفاده کنید، پروژه‌تون رو در CSS مستند کنید، سند طراحی رو پر کنید و یک فایل CSS تولید شده توسط فیگما رو تعریف کنید. علاوه بر این، نحوه ساخت یک سند HTML، جایگزینی ویژگی‌های تولید شده توسط فیگما برای CSS تمیز و اصلاح طراحی‌تون از فیگما رو بررسی کنید.

مهارت ها

Web Design BusinessFigmaInteraction DesignWeb StandardsWeb DesignSmall Business and EntrepreneurshipUser ExperienceProjectWeb Development

سرفصل ها

0. مقدمه

01 - پیاده‌سازی CSS از طرح‌های Figma شما
02 - راه اندازی

1. تولید دارایی‌های تصویری

03 - مروری بر پروژه طراحی
04 - تعریف ویژگی‌های Export تصویر
05 - Export و سازماندهی تصاویر

2. ترجمه قوانین CSS

06 - استفاده از فضای کاری Inspect
07 - مستندسازی پروژه CSS
08 - پر کردن سند طراحی
09 - تعریف سند CSS

3. پیاده‌سازی CSS در HTML

10 - ایجاد یک سند HTML
11 - جایگزینی عناصر Figma برای CSS
12 - اصلاح طرح از Figma

نتیجه

13 - بعدش چی