Introduction
Designing prototypes and wireframes with a tool as powerful as Figma can be exciting, but without a clear plan or goal, things can quickly get overwhelming. Let’s go over a few strategies to make the process as smooth as possible.
1. Create Your Sketches
Before you open Figma, consider sketching out your ideas with pen and paper. Not only can this allow for faster ideation, but you can also use your sketches as blueprints to be recreated digitally later on. Don’t worry about making them pretty. The most important thing is to be thorough about the concepts.
2. Determine Your Components
Next, look through your sketches and make a list of every element that can be turned into a component. Look for repeating elements like header navigation, buttons, icons, logos, menus, and input fields. Additionally, determine which components will contain smaller components or instances.
3. Determine and Prioritize Your Features
Now that you’ve determined your components, consider which features will be most important when testing your prototype with users. The most essential and urgent items should be completed first.
4. Create a Game Plan
Now that you know what to build, determine how you want to split the labor. If you’re working with a team, consider assigning different people to certain tasks, pages, or components. Be specific about the time spent on each stage of building in order to manage the creation of your prototype.
5. Lo-Fi to Hi-Fi
Finally, make sure to start out with low-fidelity wireframes and components before adding typography, color, or other visual elements. Focus on compositional elements first like layout, alignment, sizing, and spacing.
Wrap-Up
In conclusion, it’s important to plan ahead before jumping into Figma to create your prototypes. Consider using these strategies when starting your next design project.
Sources & Further Reading
