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

UI Design using Figma

Create a Weather App Interface

Christopher Bell

In this 1-hour long project-based course, you will learn how to create a login screen for a weather app using Figma, incorporating input fields and a login button. You'll also design a home screen for the weather app displaying current weather conditions, and prototype the login and home screens together in Figma, demonstrating the ability to link screens and add basic interactions for seamless navigation.

This course is designed for learners who want to build foundational skills in using Figma for UI design. This project will empower learners to create polished UI designs efficiently, regardless of prior experience, fostering confidence in using Figma for future projects. There are no hard prerequisites, and any individual with basic computer skills should be able to complete the project successfully, but some familiarity with Figma is recommended.

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 December 2

Annual Subscription

Invest in your career growth and save. Start your annual subscription to Coursera Plus and access 10,000+ programs.

Valid until March 12, 2027

Save 40% Off 3 Months

Access thousands of top-rated learning programs with a Coursera Plus monthly subscription and take 40% off 3 months for a limited time.

What's inside

Syllabus

Traffic lights

Read about what's good

what should give you pause

and possible dealbreakers

Teaches the basics of UI design using industry-standard tool, Figma

Suitable for beginners with no prior experience, providing a foundation for UI design

Guided project format offers hands-on experience in designing a weather app interface

Minimal requirements make it accessible to a wide range of learners

Can help develop a portfolio for aspiring UI designers

This course may not be suitable for experienced UI designers looking for advanced skills

Save this course

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

Save

Reviews summary

Hands-on figma ui for beginners

According to learners, this course is an excellent hands-on introduction to UI design using Figma. Many students found the step-by-step guidance incredibly clear and the pace perfect for beginners, allowing them to quickly build foundational skills. The project-based approach, focusing on a weather app interface, is highly praised for its practical application and its ability to help students create a portfolio-ready project. While largely positive, some learners note it may be too basic for those with prior Figma experience seeking advanced UI theory, as it focuses more on Figma's workflow and tools.

Instructor provides clear, easy-to-follow guidance.

"The instructor was clear and the pace was perfect for a beginner, making it very easy to keep up."

"I appreciated how the instructor's voice was soothing and easy to understand throughout the lessons."

"The step-by-step guidance made it easy to follow along without feeling overwhelmed, even for complex parts."

Perfectly suited for those new to Figma and UI design.

"Just what I needed to get started with Figma. The step-by-step guidance made it easy to follow along."

"This course really solidified my basic UI concepts, and I feel ready to apply these skills to other projects."

"I found it highly recommendable for quick skill acquisition. The instructions were clear and very helpful as a beginner."

Offers practical, hands-on experience in Figma.

"Excellent hands-on project. I learned so much about Figma's prototyping features."

"The project-based approach works well. I built a functional interface quickly."

"It's concise and straight to the point. I found it perfect for adding a small project to my portfolio."

Primarily teaches Figma functionality, less on design theory.

"It felt more like a Figma tutorial than a UI design course; good for absolute beginners, I guess."

"I found it too basic because I already knew most of Figma's basic tools, and was hoping for more UI theory."

"The course primarily demonstrated how to use Figma features rather than delving into comprehensive design principles."

May not challenge those with existing Figma knowledge.

"I was hoping for more advanced tips and techniques; it mostly covers the basics, which I already knew."

"There wasn't much for me, having prior experience; I was really expecting a deeper dive into UI design."

"If you are not an absolute beginner, you might find this course too superficial and won't learn much new."

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 UI Design using Figma: Create a Weather App Interface with these activities:

Revise Figma interface elements

Show steps

Review the interface elements in Figma to familiarize yourself with the design space.

Browse courses on Figma

Show steps

Open Figma and explore the interface.
Identify the different tools and panels.
Practice using the basic drawing tools.

Follow Figma tutorials for beginners

Show steps

Go through guided tutorials to gain hands-on experience with Figma's features.

Browse courses on Figma

Show steps

Search for beginner-friendly Figma tutorials online.
Follow the instructions in the tutorials to create simple designs.
Experiment with different design elements and interactions.

Create a collection of UI elements in Figma

Show steps

Practice designing and prototyping common UI elements to build proficiency in Figma.

Browse courses on Figma

Show steps

Identify a variety of common UI elements (e.g., buttons, input fields, navigation bars).
Create multiple variations of each UI element in Figma.
Experiment with different styles, colors, and interactions.

Four other activities

Expand to see all activities and additional details

Show all seven activities

Write a blog post about your Figma weather app design

Show steps

Share your learning and showcase your weather app design by writing a blog post about the process.

Browse courses on Figma

Show steps

Reflect on your design process and the challenges you faced.
Write a blog post explaining your approach and the design decisions you made.
Include screenshots or a link to your Figma prototype.

Design a weather app login screen in Figma

Show steps

Apply your Figma skills to create a functional login screen for a weather app.

Browse courses on Figma

Show steps

Plan the layout and design of the login screen.
Use Figma to create the visual design.
Add interactive elements (e.g., input fields, buttons).
Test the functionality of the login screen.

Design a home screen for a weather app in Figma

Show steps

Expand your weather app design by creating a home screen that displays current weather conditions.

Browse courses on Figma

Show steps

Plan the layout and design of the home screen.
Use Figma to create the visual design.
Add weather data and interactive elements.
Test the functionality of the home screen.

Prototype the login and home screens in Figma

Show steps

Connect the login and home screens and add basic interactions to enhance the user experience.

Browse courses on Figma

Show steps

Create a prototype that links the login and home screens.
Add basic interactions, such as button clicks and transitions.
Test the prototype to ensure seamless navigation.

Career center

Learners who complete UI Design using Figma: Create a Weather App Interface will develop knowledge and skills that may be useful to these careers:

Reading list

We've selected 39 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 UI Design using Figma: Create a Weather App Interface.

The Design of Everyday Things

Save

Considered a foundational text in design and usability, this book introduces core principles of human-centered design through relatable examples of everyday objects. It is essential for gaining a broad understanding of why some products are easy to use and others are frustrating. is highly recommended for beginners and provides crucial background knowledge for anyone entering the field of User Interface design.

UI Design using Figma

Two deals to help you save

What's inside

Syllabus

Traffic lights

Save this course

Reviews summary

Hands-on figma ui for beginners

Activities

Career center

Reading list

Share

Similar courses

Coursera Buyer Protection & Guarantee

7-Day Free Trial & Free Audit

14-Day Refund Guarantee

Verified Academic & Industry Partner