10 Figma Projects for Beginners to Get You Started
Build your UI/UX design skills with 10 beginner-friendly Figma projects that help you practice real-world techniques and grow your portfolio.
Figma’s intuitive interface and powerful features make it a go-to tool for UI/UX designers. Thanks to its cloud-based platform, teams can work together in real time to transform ideas into interactive, user-friendly designs.
If you’re just getting started in UI/UX design, what better way to master Figma than through hands-on projects? By diving into practical exercises, you’ll build confidence inside the platform and reinforce fundamental UI/UX design principles, all while gathering completed projects to showcase in your portfolio.
To help you get started, we’re sharing 10 beginner-friendly projects you can try. From designing websites to creating mobile apps and social media animations, these step-by-step tutorials will equip you with key skills and techniques to kickstart your design journey.
You'll learn to create responsive layouts, build interactive prototypes, program transitions and animations and much more. These essential skills will help you grow as a designer and prepare you for more complex challenges in the future.
Let’s dive in!
Design Resources Website
Class: Figma for Web Design UI & UX: First Homepage Design by Chris Barin.
About This Project:
In this class, you’ll design a homepage for a website. You’ll work through all the major elements, from a header with navigation and search functionality, to multi-column content sections and a footer. You’ll practice using Figma’s auto layout feature, creating a responsive design and making quick adjustments. By the end, you’ll have the skills to design a simple and user-friendly homepage for any website.
Design Tips:
To go above and beyond, consider experimenting with different grid layouts. You can also try adding hover states to your buttons or subtle animations to the navigation elements.
Why We Love It:
This project offers a deep dive into Figma’s features while keeping things approachable for beginners. It focuses on practical, real-world design elements like headers, search bars and interactive content areas, making it the perfect project for those wanting to get into web design.
Personal Website
Class: Learn How to Design a Personal Website in Figma by Winnie Obunabor.
About This Project:
In this class, you'll design a personal website with key sections like a hero area, services section, contact form and a footer. You’ll learn beginner-friendly techniques like using frames, grouping elements and adjusting typography. You’ll also explore resources for sourcing high-quality images and icons.
Design Tips:
Experiment with adding a section for client logos or media mentions to give your website a competitive edge. You can also include a newsletter signup form, offering users another way to engage with the site.
Why We Love It:
This project is perfect for beginners because it walks you through essential web design components while keeping the process simple. The focus on practical tools like using guides and auto layout makes it easy to build a clean, professional-looking design.
Messenger Web App
Class: Figma UI/UX - Design a Messenger Web App UI/UX (Complete Project) by Yazdani Chowdhury.
About This Project:
In this class, you’ll design the layout for a web-based messenger app, including screens where users can sign up and sign in. You'll not only learn how to add basic design elements but also how to create a fully interactive prototype.
Design Tips:
To take your design further and enhance the user experience, you can add micro-interactions, such as subtle hover effects on buttons. You can also experiment with custom icons to give the interface a unique style or create a dark mode version of the app to appeal to different user preferences.
Why We Love It:
This project is fantastic for beginners because it combines a clean, modern web app design with practical, real-world elements like sign-up/sign-in flows. Completing it will help you understand core UI/UX principles while building something tangible you can include in your portfolio.
Financial Dashboard
Class: Figma UI/UX Design for Absolute Beginners: Design a Fintech Dashboard by Ken Mbesa.
About This Project:
In this class, you'll design a functional finance dashboard that includes a sidebar, search bar and a number of data cards with graphs and charts. You’ll learn key Figma functions like frames, grouping, alignment and importing external assets. You'll also explore techniques for adding interactivity, customizing UI elements and improving the overall user experience. By the end, you’ll have a well-organized dashboard ready to present or build upon.
Design Tips:
For an enhanced dashboard experience, consider adding animations to your data cards. You can also include customization features, such as the ability for users to change the dashboard theme or switch between light and dark modes.
Why We Love It:
This project introduces design concepts like visual hierarchy and consistency, which are essential in any UI/UX designer’s toolkit. The process of organizing layers and elements teaches you how to build scalable, maintainable designs.
Social Media Animations
Class: Easy Figma Animations to Stand Out on Social Media by Aga Naplocha.
About This Project:
In this class, you’ll learn how to create dynamic, animated Instagram story content using Figma. The step-by-step tutorial will walk you through essential techniques like creating frames, using the Smart Animate feature and applying masks to videos. You’ll explore how to organize your layers, work with different typography and use Figma's prototype mode to preview animations. By the end, you’ll have three stunning animations ready to share on Instagram or add to your portfolio.
Design Tips:
To take this project further, experiment with adding more complex transitions between frames. Try animating additional elements like logos or icons and play around with gradients or transparency to create a layered visual effect.
Why We Love It:
This project is perfect for beginners because it blends creativity with practical skills. You’ll get comfortable with Figma’s animation tools while creating something you can instantly use on social media. The clear instructions and hands-on exercises make the learning process both approachable and exciting.
Laundry Delivery Service App
Class: Learn Figma: Design a Full Mobile UI/UX by Nima Tahami.
About This Project:
In this class, you’ll create a sleek and user-friendly mobile app interface for a laundry delivery service. Through step-by-step instructions, you’ll learn essential Figma skills such as creating frames, building reusable components (like buttons and cards), applying text styles and applying constraints for responsive design. You'll also explore plugins like Google Sheets Sync to populate real-time data, as well as add icons and maps to make your mockups more dynamic.
Design Tips:
For an extra creative touch, you can experiment with custom color schemes or gradients to give the app a more personalized feel. You can also explore additional user feedback options—for example, pop-ups that confirm actions like submitting a service request.
Why We Love It:
This project is a great introduction to real-world UI/UX principles. You'll master Figma's most powerful features, while also learning how to keep your designs organized and responsive, and come away with a solid understanding of how to design apps that feel intuitive and user-friendly.
Mobile App Landing Page
Class: Designing with Figma: Landing Page for Mobile App by Adi Purdila.
About This Project:
In this class, you’ll design a landing page for a mobile budgeting app. You’ll get hands-on experience using essential Figma tools like frames, grids, components and auto layout, as well as working with typography and imagery. The step-by-step instructions will guide you through designing multiple feature sections, call-to-action buttons, a testimonial slider and more, all while ensuring a consistent, modern design.
Design Tips:
To take this landing page to the next level, you can animate buttons so they change color or scale slightly when hovered over. Or why not add a smooth fade-in effect for images as users scroll through the page? You can also create a fixed navigation bar that remains at the top as they scroll down. These small details can enhance user engagement and give your design a more dynamic, polished feel.
Why We Love It:
This class breaks down the creation of a modern, visually engaging landing page into manageable steps. It’s not just about learning Figma tools—you’ll develop a strong understanding of design principles like hierarchy, alignment and spacing. The use of components, reusable styles and auto layout ensures that you walk away with valuable UI/UX skills that you can apply to future projects.
Restaurant Website
Class: Design with Figma: One-Page Restaurant Website by Adi Purdila.
About This Project:
In this class, you’ll design a one-page website for a fictional restaurant, creating sections like a food menu, Instagram gallery and contact form. The project covers everything from wireframing to building a responsive design for different screen sizes. You’ll start by structuring content and creating wireframes based on a project brief. From there, you’ll define typography, choose a color palette and ensure consistent spacing. You’ll also learn advanced Figma features like auto layout and resizing modes.
Design Tips:
Once you’ve completed the basics, try adding hover states to the buttons or making the Instagram gallery more dynamic by incorporating micro-interactions. You can also play around with variations in typography weight to add visual hierarchy to the menu section.
Why We Love It:
By the end of this class, you’ll walk away with a functional, responsive website that’s designed using industry-standard techniques. It’s a hands-on way to master both UI/UX principles and Figma’s powerful design tools, making this an ideal project for those new to web design.
Mobile Ordering App
Class: How to design & prototype a Mobile UI/UX Design Experience using Figma design tool - Learn Figma by Aaron Lawrence.
About This Project:
In this class, you’ll create a fully-functional prototype for a Boba tea ordering app. Through step-by-step guidance, you’ll design key screens such as user login, shopping, checkout and order history. You’ll also learn how to use Figma’s Smart Animate feature to create dynamic transitions. By the end of the class, you’ll know how to export UI assets, inspect code for engineering and share a clickable prototype for testing.
Design Tips:
To take your design further, you can personalize the user experience by adjusting typography or color schemes based on user profiles. You can also experiment with creating dynamic content, like promotions or notifications, that vary depending on time or location.
Why We Love It:
The detailed instructions and downloadable Figma file make it easy to follow along, while the focus on both design and prototyping equips you with practical skills for the UI/UX industry.
Recipe App
Class: Figma Master Class: Design & Prototype your First Mobile App Idea by Muhammad Ahsan Pervaiz.
About This Project:
In this class, you’ll design an app that allows users to search for and browse recipes. You’ll learn all the essential steps, including how to create wireframes, set up grids and layout guides, build components, manage transitions and prototype interactions. By the end, you'll have a fully interactive app prototype with multiple screens and engaging transitions.
Design Tips:
To make your app design stand out, consider adding timed overlays for notifications and experiment with adding swipe gestures for smoother user interactions. You can also refine the typography and add more unique animations, like fade-ins for loading screens.
Why We Love It:
The class begins with a comprehensive tutorial on how to use Figma, allowing you to familiarize yourself with its interface and learn both basic and advanced tools and techniques. From there, you’ll put your newly gained skills to use and follow along with the instructor to create the recipe app from scratch.
Start Your UI/UX Design Journey with Skillshare
These beginner-friendly classes won’t just teach you how to use Figma—they will also leave you with practical design skills and portfolio-worthy pieces. As you work through the projects, you'll start to notice similar workflows, but each one will introduce you to unique techniques and new ways of approaching UI/UX design challenges.Once you've completed these and you’re ready for more, be sure to browse Skillshare for more advanced Figma projects and UI/UX design classes. Explore more tutorials, templates, resources and ideas to continue developing your design skills and keep pushing your creative limits.
Related Reading
Sayana Lam
Sayana is a musician, writer and graphic designer based in Toronto, Canada.
Try Skillshare for free! Sign up for a 7 day free trial today!
Get Started- Unlimited access to every class
- Supportive online creative community
- Learn offline with Skillshare's app
