From Figma to Coding in 1 place
Read more
From Figma to Coding in 1 place
From Figma to Coding in 1 place
Design everything in Figma & code it using HTML CSS JavaScript
Become a Figma power user by learning how to leverage plugins
Master industry standard UI UX Design standards
Seamlessly inspect and build your Figma Components for development handoff
Become a unicorn UI UX Designer who knows design and code
Automate your brand style guide as a visual designer with Figma
Create complex web design layouts with Figma Auto Layout and use pure CSS Grid and Flexbox
Transform Photoshop into HTML mark up and style it with CSS
Transform SVG with vanilla JavaScript
Trigger JavaScript DOM events and control CSS animations with JavaScript
Learn interaction design with CSS Transitions and Animation
Develop production ready responsive design with Bootstrap 5 Grid system
Summary of Udemy Students Review:
Zoe Chin — "Hossein's teaching is so cohesive. I'm a total beginner at coding and have always been intimidated by code, but these lessons helped me understand new concepts in UX development so easily that I dare say I thoroughly enjoyed learning. Thank you. :)"
Ebru Aksoy — "Awesome course. I have already had some knowledge on the coding side of web development but I felt that I needed some UX/UI point of view, so I ended up at Hossein's course and I couldn't be more happier. He expanded my imagination with especially the SVG section and the 10 great projects at the end. I also got to brush up on my skills of CSS & JavaScript with his elaborately structured teaching style. I will definitely keep the notes I received from this course by my side while working on further projects. I definitely recommend. Thanks a lot, Hossein"
Omar A — "I wish I took this course instead of wasting so many countless hours on others. As someone trying to learn UX/UI/Front-End, this is brilliant. Super logical course structure and flow. Would give ten stars if I could. Thanks Mr. Hossein."
Maria Beatriz — "I've been really enjoying this course. It's one of the best I've done on web dev and UX/UI. The content is simple, original, and super useful. You have to try it. "
Darian Brandt — "I loved the simple, graphical and memorable UI and UX design notes which taught me things I didn't even know I needed to know. The entire course is very easy to understand but surprisingly in-depth. I'm learning a lot more than I expected, thanks"
Prem Sager — "This is awesome and a must-do course for all the frontend developers. The UX part was very well researched and presented. HTML was a really good refresher. Completed CSS and JS sections, this content is amazing and really boosts my skill set."
Jayed Mahmud — "I wanted to learn coding which is related to Website design which is implemented quite nicely in this course. This course starts with visualization which is absolutely brilliant. I am still continuing but so far this is a great one. Thanks."
Ebe David Temiloluwa —"In this course, I got the kind of frontend development designs I have never come across before in the projects. If you're looking for new type of designs produced with good css and javascript, this is the course for you."
Jeisson Zambrano — "This course targets exactly what I came here looking for. The explanations are clear and focused on the business perspective of UX/UI development."
Pratham Bhatter — This has to be one of the best course on Udemy for UI UX. Not only you learn the fundamentals of UI UX, but also build a good foundation about Web Design and Frontend Development. As an instructor, Hossein did an amazing job explaining the concepts and the beautiful notes he provided were very handy too. I would definitely recommend this course to someone who is interested in UI UX Design and Development and also wants to build a solid foundation in this field. Thank you Hossein :)
Here's a deal for you
UDEAFNULP2024
What's inside
Learning objectives
- Design figma interactive components
- Breakdown complex nested variants in figma
- Build responsive layouts using figma auto layout & css flexbox & grid
- Transform figma components into live html css components
- Build scalable design systems with figma and automate manual processes
- Learn coding with html css javascript bootstrap 5 grid system
- Design figma interactive components
- Breakdown complex nested variants in figma
- Build responsive layouts using figma auto layout & css flexbox & grid
- Transform figma components into live html css components
- Build scalable design systems with figma and automate manual processes
- Learn coding with html css javascript bootstrap 5 grid system
Syllabus
Students will learn how to navigate around Figma's left sidebar. They will also learn how to create Figma design files & Figma projects.
Download Figma Fundamentals File
Read more
Syllabus
Good to know
Save this course
Save
Activities
Compile and review your course notes and assignments
Show steps
Refresh your memory and reinforce your learning by reviewing your course materials.
Show steps
-
Gather your notes, assignments, quizzes, and exams from the course.
-
Review the materials to refresh your memory on the key concepts.
-
Identify any areas where you need further clarification or practice.
Read Atomic Design by Brad Frost
Show steps
Gain a deeper understanding of design systems and atomic design principles to enhance your Figma designs.
View
Atomic Design
on Amazon
Show steps
-
Read the book to learn the core concepts of Atomic Design.
-
Apply the principles to your Figma design projects.
Collaborate on a Figma project with a peer
Show steps
Work alongside a peer to exchange ideas, provide constructive feedback, and elevate your Figma design skills.
Show steps
-
Find a peer with complementary skills or interests.
-
Choose a Figma project to collaborate on, such as a website design or a mobile app prototype.
-
Divide responsibilities and set up a communication channel.
-
Provide constructive feedback and iterate on the design together.
Four other activities
Expand to see all activities and additional details
Show all seven activities
Build a basic website using Figma and CSS
Show steps
Apply your Figma skills to create a functional website using CSS, solidifying your understanding of UI design and development.
Browse courses on
Responsive Web Design
Show steps
-
Design a website layout in Figma.
-
Export the Figma design to HTML and CSS code.
-
Style the website using CSS, applying principles learned in the course.
-
Test the website's responsiveness on different devices.
Design a Figma prototype for a mobile app
Show steps
Create an interactive Figma prototype to visualize and test the user experience of a mobile app, showcasing your design skills.
Browse courses on
Mobile App Design
Show steps
-
Plan the user flow and screens for the mobile app.
-
Design the UI elements and interactions in Figma.
-
Link the screens and add transitions to create a cohesive prototype.
-
Test the prototype and gather feedback to iterate on the design.
Develop a CSS style guide for your Figma design system
Show steps
Create a comprehensive CSS style guide that complements your Figma design system, ensuring consistency and reusability.
Browse courses on
Design Systems
Show steps
-
Establish the naming conventions and guidelines for CSS classes.
-
Define the color palette, typography, and other design elements in CSS.
-
Create documentation and examples to guide developers.
-
Integrate the style guide into your Figma design system.
Mentor a beginner in Figma and web design
Show steps
Share your knowledge and expertise by mentoring a beginner, reinforcing your understanding of Figma and web design principles.
Browse courses on
Mentorship
Show steps
-
Reach out to students or individuals seeking guidance.
-
Establish regular communication and set clear goals.
-
Provide personalized guidance based on your Figma and web design experience.
-
Offer constructive feedback and support to foster their growth.
Compile and review your course notes and assignments
Show steps
Refresh your memory and reinforce your learning by reviewing your course materials.
Show steps
- Gather your notes, assignments, quizzes, and exams from the course.
- Review the materials to refresh your memory on the key concepts.
- Identify any areas where you need further clarification or practice.
Read Atomic Design by Brad Frost
Show steps
Gain a deeper understanding of design systems and atomic design principles to enhance your Figma designs.
View
Atomic Design
on Amazon
Show steps
- Read the book to learn the core concepts of Atomic Design.
- Apply the principles to your Figma design projects.
Collaborate on a Figma project with a peer
Show steps
Work alongside a peer to exchange ideas, provide constructive feedback, and elevate your Figma design skills.
Show steps
- Find a peer with complementary skills or interests.
- Choose a Figma project to collaborate on, such as a website design or a mobile app prototype.
- Divide responsibilities and set up a communication channel.
- Provide constructive feedback and iterate on the design together.
Build a basic website using Figma and CSS
Show steps
Apply your Figma skills to create a functional website using CSS, solidifying your understanding of UI design and development.
Browse courses on
Responsive Web Design
Show steps
- Design a website layout in Figma.
- Export the Figma design to HTML and CSS code.
- Style the website using CSS, applying principles learned in the course.
- Test the website's responsiveness on different devices.
Design a Figma prototype for a mobile app
Show steps
Create an interactive Figma prototype to visualize and test the user experience of a mobile app, showcasing your design skills.
Browse courses on
Mobile App Design
Show steps
- Plan the user flow and screens for the mobile app.
- Design the UI elements and interactions in Figma.
- Link the screens and add transitions to create a cohesive prototype.
- Test the prototype and gather feedback to iterate on the design.
Develop a CSS style guide for your Figma design system
Show steps
Create a comprehensive CSS style guide that complements your Figma design system, ensuring consistency and reusability.
Browse courses on
Design Systems
Show steps
- Establish the naming conventions and guidelines for CSS classes.
- Define the color palette, typography, and other design elements in CSS.
- Create documentation and examples to guide developers.
- Integrate the style guide into your Figma design system.
Mentor a beginner in Figma and web design
Show steps
Share your knowledge and expertise by mentoring a beginner, reinforcing your understanding of Figma and web design principles.
Browse courses on
Mentorship
Show steps
- Reach out to students or individuals seeking guidance.
- Establish regular communication and set clear goals.
- Provide personalized guidance based on your Figma and web design experience.
- Offer constructive feedback and support to foster their growth.
Career center
Front-End Developer
UI Designer
UX Designer
Product Designer
Web Developer
Interaction Designer
Visual Designer
Software Engineer
Web Designer
Information Architect
User Experience Researcher
Content Strategist
Technical Writer
Project Manager
Business Analyst
Reading list
Save
Save
Save
Share
Similar courses
OpenCourser helps millions of learners each year. People visit us to learn workspace skills, ace their exams, and nurture their curiosity.
Our extensive catalog contains over 50,000 courses and twice as many books. Browse by search, by topic, or even by career interests. We'll match you to the right resources quickly.
Find this site helpful? Tell a friend about us.
We're supported by our community of learners. When you purchase or subscribe to courses and programs or purchase books, we may earn a commission from our partners.
Your purchases help us maintain our catalog and keep our servers humming without ads.
Thank you for supporting OpenCourser.
