Coursera

From Figma to Code (Coursera)

Offered by Scrimba,
From Figma to Code (Coursera)

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.

Class Deals by MOOC List - Click here and see Coursera's Active Discounts, Deals, and Promo Codes.

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.

What you'll learn

  • Create user interfaces from mockups.
  • Create responsive layouts.

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.

Simple Landing Page
With an emphasis on CSS you will work on the layout for a landing page that will look great on desktop and mobile.

Data Analytics Dashboard
Challenge yourself to create a data analytics dashboard using HTML and CSS.

Car Sales Site
Bring another Figma layout to life on the web, adding complexity and detail to desktop and mobile views.

Drone Event Landing Page
Build your most complex layout yet tying in all the concepts you've learned through the course.

Go to Class
MOOC List is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

Related Courses

Evaluating User Interfaces (Coursera) Coursera
University of Minnesota

Evaluating User Interfaces (Coursera)

CS: Design & Product

In this course you will learn and practice several techniques for user interface evaluation. First we start with techniques that can be applied alone or in a design team, including action analysis, walkthroughs, and heuristic evaluation. Then we move on to user testing, including learning from a series of usability tests carried out in a real usability lab, and techniques to carry out your own tests even without a lab.

Jun 22nd 2026
4 Weeks
Evaluation User Interface Design User Interface
Details
The Full Stack (Coursera) Coursera
Meta

The Full Stack (Coursera)

Computer Science

As you prepare for your role in back-end development, practice bringing together multiple skills to build a full-stack Django app. You’ll start by setting up an environment for a local practical project, and refactoring the front and back-ends of an existing application. You will then have the opportunity to create the front and back-ends of a new application using your full-stack developer skills.

Jun 22nd 2026
5-12 Weeks
HTML Javascript CSS
Details
Information Design (Coursera) Coursera
University of California, San Diego

Information Design (Coursera)

CS: Design & Product

A blank canvas is full of possibility. If you have an idea for a user experience, how do you turn it into a beautiful and effective user interface? This covers covers principles of visual design so that you can effectively organize and present information with your interfaces. You'll learn concrete strategies to create user interfaces, including key lessons in typography, information architecture, layout, color, and more. You’ll learn particular issues that arise in new device contexts, such as mobile and responsive interfaces.

Jun 28th 2026
3 Weeks
Interface Information Design Interaction Design
Details
UI Automation and Selectors (Coursera) Coursera
UiPath

UI Automation and Selectors (Coursera)

CS: Software Engineering Computer Science

The UI Automation and Selectors course provides a deep understanding of the different methods used while interacting with the User Interface of different applications like Excel, Word, CRM, Websites while building automation projects. It introduces the Recording feature and the different recordings available in Studio to record user actions and generate workflows. It will also provide knowledge about Selectors and how they are beneficial while building automation projects.

Jun 22nd 2026
2 Weeks
Automation User Interface Robotic Process Automation
Details
Learn JavaScript (Coursera) Coursera
Scrimba

Learn JavaScript (Coursera)

CS: Programming Computer Science

This is perhaps the most interactive JavaScript course ever recorded. It contains 140+ coding challenges, meaning that you will finally build that ever-so-important JavaScript muscle memory. You will solve the challenges directly in the browser thanks to Scrimba's interactive video technology, so there's not setup needed. Say goodbye to "tutorial hell" and get ready to start feeling your JavaScript superpowers grow exponentially.

Jun 22nd 2026
4 Weeks
Programming Javascript Web Development
Details
Computational Thinking with JavaScript 4: Create & Deploy (Coursera) Coursera
University of Glasgow

Computational Thinking with JavaScript 4: Create & Deploy (Coursera)

CS: Software Engineering

This is the fourth and final course in the Computational Thinking with JavaScript specialisation. It is an added-value unit and entirely builds on what you will have learned in the first three units and enables you to synthesise and develop that knowledge. The course supports you to develop your own larger application, using a combination of the technologies you have seen already, including HTML, JavaScript and various libraries, while also encouraging you to reach out to incorporate new libraries.

Jun 22nd 2026
3 Weeks
Javascript Computational Thinking Coursera Plus
Details
Introduction to VueJS Framework (Coursera) Coursera
Codio

Introduction to VueJS Framework (Coursera)

CS: Information & Technology Computer Science

Explore HTML, CSS, and VueJS basics without installing anything! This course is designed for beginning learners, providing a solid foundation of basic skills in HTML, CSS, and VueJS. Learners will build an understanding of the creative process of designing as well. The modules in this course cover HTML basics, CSS basics, VueJS basics, as well as provide an exploratory designing experience for learners. At the end of the course, learners will fully develop a todo application using HTML, CSS, and VueJS.

Jun 22nd 2026
3 Weeks
HTML Javascript CSS
Details
JavaScript, jQuery, and JSON (Coursera) Coursera
University of Michigan

JavaScript, jQuery, and JSON (Coursera)

CS: Programming

In this course, we'll look at the JavaScript language, and how it supports the Object-Oriented pattern, with a focus on the unique aspect of how JavaScript approaches OO. We'll explore a brief introduction to the jQuery library, which is widely used to do in-browser manipulation of the Document Object Model (DOM) and event handling. You'll also learn more about JavaScript Object Notation (JSON), which is commonly used as a syntax to exchange data between code running on the server (i.e. in PHP) and code running in the browser (JavaScript/jQuery). It is assumed that learners have already taken the Building Web Applications and Building Database Applications in PHP courses in this specialization.

Jun 22nd 2026
4 Weeks
Programming Javascript JSON
Details
Principles of UX/UI Design (Coursera) Coursera
Meta

Principles of UX/UI Design (Coursera)

Computer Science

Learn the fundamentals of User Experience (UX) research and design. Become immersed in the UX process of identifying problems and iterating and testing designs to find appropriate solutions. You’ll learn how to empathize with users through best-practice research approaches, and create common UX artifacts such as user personas. And you’ll use UX insights to make appropriate design decisions.

Jun 22nd 2026
5-12 Weeks
User Experience User Interface Design User Interface
Details
App Design and Development for iOS (Coursera) Coursera
University of Toronto

App Design and Development for iOS (Coursera)

CS: Software Engineering CS: Programming

In App Design and Development for iOS, the third course of the iOS App Development with Swift specialization, you will be developing foundational programming skills to support graphical element presentation and data manipulation from basic functions through to advanced processing. You will continue to build your skill set to use and apply core graphics, touch handling and gestures, animations and transitions, alerts and actions as well as advanced algorithms, threading and more. By the end of this course you will be able to develop a more advanced, fully functioning app.

Jun 22nd 2026
5-12 Weeks
iOS Mobile Development Swift
Details