Skip to main content

Problem:

Figma pages that were created to generate a prototype can be confusing for engineers and fellow designers. We sometimes get away with cleaning up the pages and labeling the frames, but that doesn’t always do the job especially for more complex flows. So we end up creating a separate page for our engineers which looks more like a sitemap with arrows for navigation.


Solution:

Have Figma auto generate a flat flow (sitemap) from the prototype. So it would take a prototype and create a new Figma page that has all the interactions of the prototype layed out in separate frames. They should be well organized frames of all the screens and interactions like popup modals, flyouts, all linked with arrows that can be labelled by the designers.

https://www.figma.com/community/file/836606323472757934


I use this - but its not auto.

Thanks Jack, we do that manually too. But since Figma has all the info it needs, it can generate a highres flat user flow with arrows auto magically.

Thanks for the feedback, @Mechlawi_Souheil!


We’ll pass this onto our prototyping team for future consideration.

Thanks Denise,

I believe XD had something similar and it was very useful. But this would be a step up from Adobe’s.

Some background

This idea evolved from a conversation we were having during a Figma Academy session. The designers were going back and forth on how a handoff to engineers or a fellow designer would look like, including a Dev mode handoff. The issue of creating a dev only design seemed to be the only logical solution for developers even though it would be replicating existing designs but with a linear flat flow. So we thought, wouldn’t it be great if Figma could generate that work for us? It has all the prototype interactions already.

Reply


Terms & ConditionsCookie settings