What are the different fidelity levels in wireframing?
-
Low fidelity (lo-fi) - focuses on layout and high-level interactions using basic shapes and no real visual design. Used for early ideation.
-
High fidelity (hi-fi) - looks closer to the final design with detailed UI elements, branding, graphics etc. Used later in the process.
What are some best practices for low-fidelity wireframing in Figma?
-
Keep visual elements simple - greyscale, basic shapes
-
Limit to 2 fonts max
-
Use boxes and lines to represent graphics/images
-
Consider different screen sizes and layouts
How do you show transitions between screens in a Figma wireframe?
-
Duplicate the artboard to create the “after” state
-
Make changes to show the desired transition
-
Use prototypes to link the artboards with transitions
What is the advantage of using Frames over Groups in Figma?
Frames allow constraints and layout features like auto layout. Groups break easily when resized. Frames give more layout control.
How do variants work in Figma?
Variants allow you to create different versions of components and switch between them. For example, create primary and secondary button variants.
What is Auto Layout in Figma?
Auto Layout lets you define responsive resizing rules through constraints instead of manual tweaking. Keeps elements dynamically positioned.
How do constraints work in Figma’s Auto Layout?
Constraints pin elements to the edges or other objects. You can set min/max sizes, aspect ratios etc. Figma uses these rules to resize responsively.
ref: