
Learn to design a web page prototype in Figma, a browser-based UI design tool that supports real-time collaboration, presets, components, and sharing, with hands-on steps.
Design app wireframes in Figma by building labeled sections and labeled layers, a bottom toolbar, and color choices, focusing on user-centered layouts and practical constraints.
Learn to add icons as components to your Figma wireframe, duplicate kits, paste SVG components, and set constraints and a bottom toolbar to keep home, back, search, and calendar responsive.
Learn to expand a Figma app design by adding screens, labeling frames, copying the toolbar, and aligning constraints to create a calendar page and share the project.
Learn to collaborate in Figma by using comments, real-time chat, and the share options to grant edit or view access, invite teammates, and preview designs before sharing.
Explore how Figma enables cloud-based design and prototyping with real-time collaboration for UI and UX across mobile, desktop, and web, with wireframing and project setup.
Explore the Figma workspace through a hands-on demo of main menu, navigation bar, layers, plugins, and region tools, and learn to design, prototype, and export UI assets.
Design a splash screen in Figma by creating a branded loading view with the app’s logo and animation, using iPhone 14 pro max frames, gradient tool, corner radius, and color variations.
Design a splash screen with curves and a blue circle that animates into a home or login screen. Animate size changes and a growing dot to illustrate the transition.
Create a login screen in Figma by drawing rectangles for username and password fields, styling with rounded corners, centering the layout, and adding a blue login button with centered text.
Design a sign up screen in Figma from a login screen on an iPhone 14 Pro Max, adding full name, email, password, and confirm password fields with centered sign up.
Learn to share your completed login and signup screens with designers and developers, invite via email, publish prototypes to the community, and add descriptive tags for easy access.
We extend this course from beginners to intermediate and advanced Figma designers. Share your views, rate five plus, and ask questions about Figma projects to learn.
start a new mobile app project in figma, exploring android and ios templates, blue color, and a splash screen; learn to use the frame tool to set an android frame.
Design a splash screen for an automotive engineer service app in Figma, using shape tools to place images and text, align center, and refine the welcome screen.
Learn how to design a dark mode splash screen in figma by converting a light theme layout for an automobile engineering service app, updating colors, text, and imagery.
Design a home screen for an automobile engineer service app in Figma by creating a navigation bar, a nameplate with ID and balance, and six interactive buttons with icons.
Design a profile screen in Figma with a circular avatar, text details, and a two-screen prototype in bright and dark mode, building on a home screen and refining layout.
Design a two-screen mobile UI in Figma, building a customer-support chat and an order screen with wireframes and icons, guided by Dribbble ideas and a final assignment.
Explore basic web design in figma, building a simple page with shapes, images, and text; add learning resources, logos, and programming language blocks like python and c++.
Design login and signup screens for a chatbot app using Figma, detailing signup and login pages with email, password, and registration fields, plus color and UI styling tips.
Design the home screen for a chatbot app in Figma, add a start chat button, align the 'your intelligent companion' title, and customize tone, formality, and language style.
Design a chat screen in Figma by configuring avatars, chat conversations on a black background, and stop controls; customize colors, borders, and typography for a polished chatbot interface.
Hi there, aspiring Figma enthusiasts! Are you ready to embark on an exhilarating journey with us.
We will start from zero, setting up an account and getting to know the Figma structure.
I will then introduce you to the brief as throughout the course we will work on a real project to create a tracking app from the first stroke to finish design.
In this course, you’re going to learn everything about user interface design with Figma. Step-by-step, we’ll cover everything you need to know from opening the program for the very first time to finalizing your finished design. You’ll learn all of the tools, as well as how and when to use them. We’ll also cover everything you’ll need to be able to collaborate with other web developers easily through its collaborative feature. During the course, you will learn about the principles of User Interface Design in order to design with purpose, as well as the principles of Human-Computer Interaction. Finally, we’ll teach you how to adapt to specific project requirements, as well as how to wireframe in order to turn your design into a functional prototype.
Learning All About Figma:
Understanding why Figma is great
Signing Up for Figma
Going over the basics of the software
Importing Files from Sketch
Creating Frames, Shapes, and exploring with Drawing Tools
Understanding Web frames and wireframes.