Figma
design tool
Let's design & prototype.
Figma design tool - free tutorials
Figma connects everyone in the design process so teams can deliver better products, faster. Whether you’re brainstorming ideas, designing prototypes, or building solutions, Figma helps teams align early and stay in-sync, from initial idea to shipped product.
Troubleshooting and help
Getting started
Community
Purchase or get it for free
for staying
awake,
building this
free website
Figma design & prototype tool
Learn the basics by designing a social media app in Figma. We'll teach you about the fundamental tools you'll use, how to create wireframes, high-fidelity designs, and a prototype. We'll then go through the basics of developer handoff.
Beginner #01
Explore ideas
Figma is a vector design tool that runs in the browser. Use Figma to brainstorm ideas, iterate on designs, create prototypes, and get feedback at any stage of the creative process.
Beginner #02
Create designs
While building our low-fidelity wireframes, we learned how to use tools and adjust properties of our layers to change their appearances. We can apply these same skills to create higher-fidelity designs.
Beginner #03
Build prototypes
To save time, we've built out the other screens in our application, including a menu, profile, and an interface for searching the app. Let's create an interactive prototype to put it all together.
Beginner #04
Prepare for handoff
Design is a collaborative process that involves stakeholders and collaborators across your company.
PMs can use Figma or FigJam for brainstorming or to give feedback through comments.
Writers can leave suggestions for copy, or edit it directly.
Researchers and designers can share and test prototypes.
And developers can inspect properties, copy code, and export assets.
