We may earn an affiliate commission when you visit our partners.

From Figma to Code

From Figma to code is the ideal course for aspiring frontend developers seeking a challenge and eager to acquire the skills needed to translate visually appealing mockups into functional user interfaces. Throughout the program, you'll apply and enhance your HTML, CSS, and JavaScript proficiency by constructing five captivating designs – starting from a straightforward card and progressing to a landing page, an analytics dashboard, a sales website, and culminating in an animated event site.

This course is designed to maximize your independent practice. You'll be provided with detailed Figma designs, enabling you to transform them into user interfaces that exhibit excellence across various screen sizes. Upon completing each project, Gary Simon, a UI expert and esteemed web development educator, will walk you through the code he employs to bring the mockup to life. This offers you the opportunity to compare your solution, gain valuable insights, and discover numerous tips and tricks along the way.

Enroll now

Or subscribe to Coursera Plus

And get unlimited access to Coursera

Two deals to help you save

Save money when you learn. Here are two deals and offers that may be relevant to this course.

All coupon codes, vouchers, and discounts are applied automatically unless otherwise noted.

Valid until July 14

Coursera Plus Annual

Work toward what's next for your career with access to 10,000+ programs. Discover emerging skills and save.

Valid until August 30

Google AI App Builder

Learn how to use Gemini API and API Studio with a three-course series from Google DeepMind

What's inside

Syllabus

Welcome & First Project - Simple Card

Learn the basics of using Figma and how to translate a design into a web project as you build a simple card.

Traffic lights

Read about what's good

what should give you pause

and possible dealbreakers

Explores HTML, CSS, and JavaScript, which are core skills for frontend web developers

Develops skills in Figma and frontend development, which are in high demand in the industry

Taught by Gary Simon, a UI expert and esteemed web development educator

Provides hands-on labs with real-world scenarios, enhancing practical skills

Course structure emphasises independent practice, fostering self-reliance in development

Examines a variety of project types, catering to diverse interests and career paths

Save this course

Create your own learning path. Save this course to your list so you can find it easily later.

Save

Reviews summary

Figma to code: practical frontend projects

learners say this course offers an exceptionally practical approach to bridging the gap from Figma designs to functional code. The project-based structure, covering five diverse UIs, is highlighted as a game-changer for solidifying HTML and CSS skills. Students particularly praise the instructor's unique method of encouraging independent problem-solving before revealing detailed solutions, which many found highly effective. While largely seen as a goldmine for aspiring frontend developers, some learners suggest a foundational understanding of HTML, CSS, and JavaScript is beneficial, as it might be challenging for complete beginners.

Minor inconsistencies observed in older projects, possibly due to updates.

"I noticed a few small inconsistencies in the older projects compared to the more recent ones, maybe due to updates or evolving best practices."

"While the overall quality is high, I observed minor variations in project approaches, potentially reflecting course updates or evolving design trends."

"Some older sections seemed to have slight differences in approach compared to newer content, which I assume is due to ongoing improvements."

Focuses on practical implementation but might not dive into advanced techniques.

"I felt the course didn't dive deep enough into advanced CSS techniques or JavaScript interactions for complex UIs."

"The only thing missing for me was a bit more JavaScript usage, as most projects leaned heavily on HTML/CSS."

"My expectations were a bit high for mastering intricate designs; it's a good introduction but might not cover advanced techniques extensively."

Gary Simon's approach of 'try first, then review solution' is highly effective.

"Gary Simon delivers again! The course pushed me to think and apply what I already knew, which is far more effective than just passively watching."

"Gary Simon's approach of letting you try first and then showing his solution is highly effective. My skills improved significantly."

"Walking through his solutions after attempting my own was invaluable; it really helped me gain insights and discover new tips and tricks."

Hands-on projects simulate real-world design-to-code workflows.

"This course was exactly what I needed to bridge the gap between design and development. The projects are well-structured, challenging, and incredibly practical."

"Absolutely brilliant! As someone who struggled with turning designs into responsive code, this course was a game-changer."

"The hands-on coding and projects are the strongest part of the course for me, and I appreciated that it wasn't just a copy-what-I-do type of course."

The course is best suited for learners with existing HTML, CSS, and JS basics.

"I found this course somewhat challenging as a complete beginner. It's probably better suited for those with some prior HTML/CSS/JS knowledge, not total newcomers."

"As a complete beginner, I sometimes felt lost without more foundational explanations before diving into the projects."

"I would recommend having a solid understanding of HTML, CSS, and basic JavaScript before tackling this course to get the most out of it."

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in From Figma to Code with these activities:

Follow a web development tutorial on the basics of HTML, CSS, and JavaScript.

Show steps

Following a tutorial will help you build a strong foundation in the fundamentals of web development, which will be essential for success in this course.

Browse courses on HTML

Show steps

Find a tutorial that is appropriate for your skill level and interests.
Follow the tutorial step-by-step.
Complete the exercises and projects included in the tutorial.

Read a book on web development or user interface design.

Show steps

Reading a book on web development or user interface design will help you expand your knowledge and gain a deeper understanding of the concepts covered in the course.

View Don't Make Me Think, Revisited: A Common Sense... on Amazon

Show steps

Find a book that is recommended by your instructor or other sources.
Read the book carefully.
Take notes and highlight important passages.

Join a study group or online forum for web developers.

Show steps

Participating in a study group or online forum will allow you to connect with other learners, share knowledge, and get feedback on your work.

Browse courses on Web Development

Show steps

Find a study group or online forum that is relevant to your interests.
Introduce yourself and share your goals.
Participate in discussions and ask for help when needed.

Four other activities

Expand to see all activities and additional details

Show all seven activities

Practice writing HTML, CSS, and JavaScript code.

Show steps

Regular practice is essential for developing proficiency in coding. This activity will help you solidify your understanding of the concepts taught in the course.

Browse courses on HTML

Show steps

Find online coding challenges or exercises.
Attempt to solve the challenges on your own.
Review your solutions and identify areas where you can improve.

Create a simple website or web application from scratch.

Show steps

Building a website or web application from scratch will allow you to apply the skills you have learned in the course and gain valuable experience in developing real-world projects.

Browse courses on HTML

Show steps

Plan your website or web application.
Create the HTML structure of your website or web application.
Style your website or web application using CSS.
Add interactivity to your website or web application using JavaScript.
Test and debug your website or web application.

Participate in hackathons or coding challenges.

Show steps

Participating in hackathons or coding challenges will help you test your skills, learn from others, and build your portfolio.

Browse courses on Web Development

Show steps

Find a hackathon or coding challenge that is relevant to your interests.
Form a team or work on your own.
Develop a solution to the challenge.
Present your solution to a panel of judges.

Contribute to an open-source web development project.

Show steps

Contributing to an open-source web development project will allow you to gain experience working on real-world projects and collaborate with other developers.

Browse courses on Web Development

Show steps

Find an open-source web development project that you are interested in.
Submit a pull request to the project.
Get your pull request reviewed and merged.

Career center

Learners who complete From Figma to Code will develop knowledge and skills that may be useful to these careers:

Web Developer

As a Web Developer, you'll be responsible for the design and implementation of websites. This course will teach you the skills you need to create user-friendly and visually appealing websites that are also functional and efficient. You'll learn how to use HTML, CSS, and JavaScript to create dynamic and interactive web pages. This course is a great choice for those who want to start a career in web development or for those who want to advance their skills in this field.

See salaries and explore the career path for Web Developer

Front-End Developer

Front-End Developers are responsible for the user interface of a website. They work with designers to create visually appealing and user-friendly websites. This course will teach you the skills you need to create responsive and interactive websites that work across all devices. You'll learn how to use HTML, CSS, and JavaScript to create dynamic and engaging web pages. This course is a great choice for those who want to start a career in front-end development or for those who want to advance their skills in this field.

See salaries and explore the career path for Front-End Developer

User Interface Developer

User Interface Developers are responsible for designing and implementing the user interface of websites and applications. They work with designers to create visually appealing and user-friendly interfaces that are also functional and efficient. This course will teach you the skills you need to create user-friendly and visually appealing websites and applications. You'll learn how to use HTML, CSS, and JavaScript to create dynamic and interactive interfaces. This course is a great choice for those who want to start a career in user interface development or for those who want to advance their skills in this field.

See salaries and explore the career path for User Interface Developer

User Experience Designer

User Experience Designers are responsible for the overall user experience of websites and applications. They work with designers and developers to create websites and applications that are easy to use, efficient, and enjoyable. This course will teach you the skills you need to create user-friendly and visually appealing websites and applications. You'll learn how to use HTML, CSS, and JavaScript to create dynamic and interactive interfaces. This course is a great choice for those who want to start a career in user experience design or for those who want to advance their skills in this field.

See salaries and explore the career path for User Experience Designer

Graphic Designer

Graphic Designers create visual concepts, using computer software or by hand, to communicate ideas that inspire, inform, and captivate consumers. This course will teach you the skills you need to create visually appealing designs that can be used for websites, marketing materials, and other purposes. You'll learn how to use Adobe Photoshop, Illustrator, and other design software to create high-quality graphics. This course is a great choice for those who want to start a career in graphic design or for those who want to advance their skills in this field.

See salaries and explore the career path for Graphic Designer

Software Engineer

Software Engineers design, develop, test, and maintain software systems. They work with users to understand their needs and then create software solutions that meet those needs. This course will teach you the skills you need to design, develop, and test software systems. You'll learn how to use programming languages, software development tools, and software engineering principles to create high-quality software. This course is a great choice for those who want to start a career in software engineering or for those who want to advance their skills in this field.

See salaries and explore the career path for Software Engineer

Product Manager

Product Managers are responsible for the planning, development, and launch of new products. They work with engineers, designers, and marketers to create products that meet the needs of customers. This course will teach you the skills you need to plan, develop, and launch new products. You'll learn how to conduct market research, create product roadmaps, and manage product development teams. This course is a great choice for those who want to start a career in product management or for those who want to advance their skills in this field.

See salaries and explore the career path for Product Manager

Marketing Manager

Marketing Managers are responsible for the planning, development, and execution of marketing campaigns. They work with sales teams, product teams, and other stakeholders to create marketing campaigns that reach and engage target audiences. This course will teach you the skills you need to plan, develop, and execute marketing campaigns. You'll learn how to conduct market research, create marketing plans, and manage marketing budgets. This course is a great choice for those who want to start a career in marketing or for those who want to advance their skills in this field.

See salaries and explore the career path for Marketing Manager

Sales Manager

Sales Managers are responsible for the planning, development, and execution of sales strategies. They work with sales teams, marketing teams, and other stakeholders to create sales strategies that reach and engage target customers. This course will teach you the skills you need to plan, develop, and execute sales strategies. You'll learn how to conduct market research, create sales plans, and manage sales teams.

See salaries and explore the career path for Sales Manager

Customer Success Manager

Customer Success Managers are responsible for the planning, development, and execution of customer success strategies. They work with customer support teams, product teams, and other stakeholders to ensure that customers are satisfied with their products and services.

See salaries and explore the career path for Customer Success Manager

Technical Writer

Technical Writers create documentation that explains how to use products and services. They work with engineers, designers, and other stakeholders to create documentation that is clear, concise, and easy to understand. This course will teach you the skills you need to create technical documentation. You'll learn how to write user manuals, tutorials, and other types of technical documentation.

See salaries and explore the career path for Technical Writer

Instructional Designer

Instructional Designers create and develop educational materials. They work with subject matter experts to create materials that are engaging and effective. This course will teach you the skills you need to create instructional materials. You'll learn how to design courses, develop content, and evaluate learning outcomes.

See salaries and explore the career path for Instructional Designer

Learning and Development Manager

Learning and Development Managers are responsible for the planning, development, and execution of learning and development programs. They work with HR teams, business leaders, and other stakeholders to create learning and development programs that meet the needs of the organization.

See salaries and explore the career path for Learning and Development Manager

Project Manager

Project Managers are responsible for the planning, development, and execution of projects. They work with project teams, stakeholders, and other stakeholders to ensure that projects are completed on time, within budget, and to the required specifications.

See salaries and explore the career path for Project Manager

Business Analyst

Business Analysts are responsible for the planning, development, and execution of business analysis projects. They work with business users, IT teams, and other stakeholders to identify and solve business problems.

See salaries and explore the career path for Business Analyst

Reading list

We've selected 11 books that we think will supplement your learning. Use these to develop background knowledge, enrich your coursework, and gain a deeper understanding of the topics covered in From Figma to Code.

CSS Secrets

Save

A valuable resource for learning advanced CSS techniques and gaining a deeper understanding of how CSS works.

Front-End Back-End Development with HTML, CSS,...

Save

A good resource for those who want to learn more about web design. Covers various front-end development frameworks.

Front-End Back-End Development with HTML, CSS,...

Hardcover

$$$

Adaptive Web Design

Save

Covers responsive web design and how to build websites that adapt to different screen sizes. It can be a useful resource for learners who want to build responsive user interfaces.

Adaptive Web Design: Crafting Rich Experiences With...

Paperback

Adaptive Web Design: Crafting Rich Experiences with...

Kindle Edition

RESTful Web APIs

Save

Serves as a guide for designing and implementing RESTful web services, using practical examples. It can help learners understand the concepts and best practices of RESTful APIs.

RESTful Web APIs: Services for a Changing World

Paperback

RESTful Web APIs: Services for a Changing World

Kindle Edition

Java in a Nutshell

Save

A good resource for learning the JS fundamentals. It covers a wide range of topics including JS fundamentals, data structures, and JS libraries. It can help strengthen a learner's understanding of JS and how to apply it.

Java in a Nutshell

Kindle Edition

Atomic Design

Save

Serves as a useful guide for building robust and scalable web designs. It helps learners understand how to create design systems.

Responsive Web Design with HTML5 and CSS

Save

Covers responsive web design and how to build websites that adapt to different screen sizes. It can help learners gain insights into building responsive user interfaces.

Responsive Web Design with HTML5 and CSS - Fourth...

Paperback

Responsive Web Design with HTML5 and CSS: Develop...

Paperback

Responsive Web Design with HTML5 and CSS: Build...

Kindle Edition

Responsive Web Design with HTML5 and CSS: Develop...

Kindle Edition

High Performance Browser Networking

Save

Covers optimization techniques and how to improve the performance of web applications. It can help learners build faster and more efficient web interfaces.

High Performance Browser Networking: What every web...

Paperback

(中文) Web性能权威指南 (图灵程序设计丛书) (Chinese Edition)

Kindle Edition

Spring 6 Recipes

Save

Covers the creation of web applications using Spring Boot. It provides practical examples and guidance, which can be helpful for learners who want to build full-stack web applications.

Spring 6 Recipes: A Problem-Solution Approach to...

Paperback

Spring 6 Recipes: A Problem-Solution Approach to...

Kindle Edition

Don't Make Me Think, Revisited

Save

While this book does not specifically cover web development, it provides valuable insights into user experience and usability. It can help learners understand how to create user-friendly web interfaces.

Don't Make Me Think, Revisited: A Common Sense...

Paperback

Don't Make Me Think, Revisited : A Common Sense...

Hardcover

$$$

Don't Make Me Think, Revisited: A Common Sense...

Kindle Edition