آموزش Figma: از طراحی تا پیاده سازی CSS
Figma: From Design to CSS Implementation
نکته:
آخرین آپدیت رو دریافت میکنید حتی اگر این محتوا بروز نباشد.
نمونه ویدیوها:
شما طرح‌های فوق‌العاده‌ای ایجاد کرده‌اید، اما چگونه می‌توانید آنها را به دارایی‌های آماده کد تبدیل کنید که توسعه‌دهندگان شما می‌توانند از آنها استفاده کنند؟ در این دوره عملی، استاد دانشگاه جوزف لابرک به شما کمک می‌کند تا بفهمید فایل‌های Figma شما به چه چیزی نیاز دارند تا به خوبی به «گفتار برنامه‌نویس» ترجمه شوند. با نحوه تعریف ویژگی های صادرات تصویر و همچنین صادرات و سازماندهی تصاویر خود آشنا شوید. نحوه استفاده از فضای کاری Inspect را بیابید، پروژه خود را در CSS مستند کنید، سند طراحی را پر کنید و یک فایل CSS تولید شده توسط Figma تعریف کنید. بعلاوه به ایجاد یک سند HTML، جایگزینی ویژگی های تولید شده توسط Figma برای CSS تمیز و اصلاح طرح خود از Figma بروید.
سرفصل ها و درس ها
معرفی Introduction
-
در حال راه اندازی Getting set up
-
پیاده سازی CSS از طرح های Figma شما Implementing CSS from your Figma designs
1. تولید دارایی های تصویری 1. Producing Image Assets
-
مروری بر پروژه طراحی An overview of the design project
-
تعریف ویژگی های صادرات تصویر Defining image export properties
-
صادرات و سازماندهی تصاویر Exporting and organizing images
2. ترجمه قوانین CSS 2. Translating CSS Rules
-
پر کردن سند طراحی Populating the design document
-
تعریف سند CSS Defining a CSS document
-
مستندسازی CSS پروژه Documenting the project CSS
-
با استفاده از فضای کاری Inspect Using the Inspect workspace
3. پیاده سازی CSS در HTML 3. Implementing CSS within HTML
-
ایجاد یک سند HTML Creating an HTML document
-
اصلاح طرح از Figma Refining the design from Figma
-
جایگزینی عناصر Figma برای CSS Replacing Figma elements for CSS
نتیجه Conclusion
-
بعدش چی؟ What's next?
جزییات دوره
0h 48m
13
Linkedin (لینکدین)
(آخرین آپدیت)
3,380
- از 5
ندارد
دارد
دارد
نمایش نظرات