3 Ways Figma Is Slowing You Down

rw-book-cover

Metadata

Highlights


Figma is a powerful program that allows us to create interactive prototypes that look and feel like real applications. This helps us fully visualize and get feedback on every detail of our designs before writing any code. However, I’d argue that this level of fidelity can be a huge distraction in the early life of a product. (View Highlight)

High fidelty can be a huge distraction early in the design process


Building great products is a mental game. It’s about maintaining focus on the right questions at the right time (View Highlight)


Now, I will say that we can do that because we’re a small team and my background in motion graphics helps me make those design decisions on the fly. But you can still make a similar system work on larger teams by having a dedicated designer finalize page mockups in Figma while engineers focus on making the feature work with the sketches as scaffolding. Then, once the designer is done, the frontend engineers can go back and add in the extra levels of detail. (View Highlight)


A tool that I like using for deciding scope and resolving priority is breadboarding. It’s a technique for sketching out the flows and capabilities of our products without thinking about UI at all. There are three pieces to a breadboard diagram like the one shown below: places, affordances, and connections: Places are the underlined headings that represent screens, sections, pages, and popups. Affordances are things within those places that the user can see and interact with - like buttons, links, form fields, and text copy. Connections are lines that show where a user goes after interacting with an affordance. (View Highlight)

Breadboarding


I think we should play to the strengths of Figma and treat our prototypes as what they are: pictures. They’re drawings of what could be. Clicking through them is an exercise in thinking about what the user could experience. And that’s how we should talk about them (View Highlight)