Welcome to the Figma GHW: Cloud Week 3-2025 Challenge Page!
Figma Dev Mode is a game-changer for developers because it bridges the gap between design and code by offering inspectable design elements, code snippets, and easy access to design assets.
Quickly translate designs into functional prototypes, iterate on UI elements efficiently, and ultimately build more impressive and polished projects in less time!
Getting Help
- If you have any questions about Figma during the event, including sign-up and verification questions, you can reach them at education@figma.com.
- We’ve included some helpful resources for each challenge.
Challenges
Challenge 1
Sign up for a Figma Education Account!
Objectives:
- Head over to to the Figma Signup Page and create a Figma Education account and unlock professional level features including Figma Dev Mode!
Resources:
Challenge 2
Build your first component using Figma!
Objectives:
- Building UI components like cards or buttons in Figma is simple and fun.
- We want you to build your first component using Figma Dev Mode and then auto-generate the code for that component using Figma’s built in features!
- If you’re anxious to get started, check out the Figma Dev Mode guide below or you can wait to get a step by step walk-through during one of our Figma to Code workshops later this week!
Resources:
- Check out the Figma Dev Mode Guide to get started on components!
- Share a screenshot to in our submission form!
Challenge 3
Choose your favorite Figma design kit and see if you can create your very own UI!
Objectives:
- The great thing about design kits is that they help you create amazing looking applications without having to start from scratch.
- Choose from a wide variety of UI kits designed for different platforms and purposes, including iOS and Android mobile apps, Material UI, Bootstrap, and even specialized kits for themes like food delivery apps or general website components.
- Explore the entire library at the link below!
Resources:
- Figma UI Kit Library
- Share a screenshot to in our submission form!
Challenge 4
Explore Figma Dev Mode Plugins and use one this week!
Objectives:
- Figma Dev Mode has a ton of great functionality that can be expanded by utilizing some custom plugins!
- Whether you want to generate components directly to React Native or Wordpress, or want to export more advanced design concepts like CSS variables directly from Figma, there are dozens of awesome plugins that help make Figma an even more powerful tool for your specific project.
- Explore the entire library of plugins using the link below!
Resources:
- Figma Plugin Library
- Share a screenshot to in our submission form!
Challenge 5
Bring Figma Directly into your IDE!
Objectives:
- Did you know you can utilize Figma in VS Code, allowing you to inspect design files directly in your IDE and view Figma Dev Mode code snippets in the same place you actually code!
- Beyond just checking out the Dev Mode code snippets, you can also use auto-complete code suggestions, or even pair Figma Dev Mode with your AI assistant of choice, taking your Figma experience to another level!
- Check out the resource below to get started!
Resources:
- Figma for VSCode
- Share a screenshot to in our submission form!