menu

Figma

Figma is the first collaborative UI design tool built in the browser. Join our growing community and kick off a conversation!

Channels
Team

What is the roadmap for better page prototyping?

November 3, 2017 at 2:31pm

What is the roadmap for better page prototyping?

November 3, 2017 at 2:31pm

November 3, 2017 at 9:03pm

The roadmap isn't set in stone. What do you want from our prototyping feature? And what do you tend to use it for? User tests, presenting to other designers, or something else?

like-fill
3
  • reply
  • like

Thanks for asking this by the way :-)

like-fill
3
  • reply
  • like

It would be nice in the presentation mode... see the cursor of other persons or even take notes.

like-fill
4
  • reply
  • like

November 8, 2017 at 6:24am

Something like keynote or marvel kind of prototype is good enough 80% of the time. :)

like-fill
4
  • reply
  • like

I think the only thing keeping our team on Marvel is sticky headers/footers and image overlays (for popups/modals). I don't even need page transitions, just a _little_ more functionality than just page-to-page linking, and then we'd move completely to Figma in a flash.

like-fill
15
  • reply
  • like

November 8, 2017 at 6:33pm

Thanks -- this is useful info. What do you usually use your prototypes for? Demoing to other designers? User studies? Something else?

like-fill
1
  • reply
  • like

Rey - can you say more about what transition features you use in Marvel and keynote? Do you use slide-to-slide transitions (e.g. fade/slide, etc.)? How about magic move?

like-fill
1
  • reply
  • like

November 9, 2017 at 5:22am

I wish I could view mobile prototypes on mobile devices. Useful for spot-checking & user testing.

like-fill
6
  • reply
  • like

Something like Magic move is definitely great but our team is focused on providing the best experience with as minimum dev time as possible. This is how I imagine things to happen. First, you will build a simple page transition and sticky nav, slide,fade in/out screen transition (Will jump ship already when this is done). Second, Something like magic move, or something like this — http://createwithflow.com/ still page transition but more sophisticated and a bit more control. Third, more fancy transition that can do most of Material design motion guidelines https://material.io/guidelines/motion/material-motion.html#material-motion-what-makes-a-good-transition . Lastly, I hope you could, keep it simple and also consider the dev side of animation because the problem right now is I can create the animation but development wise, it is hard or not feasible. Thanks for listening.

like-fill
3
  • reply
  • like

" sticky headers/footers and image overlays " as Anthony points out are absolutely critical.

like-fill
11
  • reply
  • like

November 9, 2017 at 6:16pm

For me two things are crucial and painful right now.

1. Link between pages or even other files

2. Ability to create a modal - so clicking X would bring Y onto the page. I would use this for menus, for modals, for state changes and more

like-fill
1
  • reply
  • like
Thanks for the feedback everyone! Very much appreciated :)Sanny – The hack I use to view prototypes on mobile using Figma right now is to:1. Send the prototype link to your phone via sms/slack etc.2. Open the link on mobile web3. Save the link to your home screen (on iPhone)4. Open up the new link from home screenDefinitely think there could be some improvements to make that easier for sure.
like-fill
2
  • reply
  • like

Neat trick! I seem to be having problems getting the prototype to load in mobile safari though.

  • reply
  • like

November 10, 2017 at 7:23am

Two more pieces of feedback I'd like to provide:

1)For the Figma Mirror App (Android) it would be good to have the option to view a frame with 100% or scaled to width. Let's say you start designing for iPhone X resolution and your phone has a smaller resolution. Currently the frame will only be "viewable" at 100% which means there is unintended horizontal scrolling. Of course you could scale the frame to fit your resolution, but that shouldn't be necessary.

2)For viewing a mobile prototype (clicking the Play button in the top right) the view isn't really as effective as it is in InVision. Besides the sticky header/footer thing the biggest problem is that there simply is no way to display the prototype inside a device's viewport (simulating how it would look on a physical device). You can only view it with 100% or scaling up/down.

As soon as your frame is scrollable vertically it just doesn't feel all that useful. So for me it would definitely make more sense if this was more like InVision or let's say Chrome Device Preview.

like-fill
2
  • reply
  • like

The reason I still prefer to use Marvel over Figma for prototyping:

1. Figma prototype url never loads on my mobile phone browser. It is a 2014 launched low-tier mobile phone. Marvel prototype loads smooth like butter.

2. Figma prototype has this title header overlay that is sticky. There is no option to hide it. Because of that the design starts after a certain height. It doesn't give the real application feel. With Marvel, it feels like I am actually testing/using the final product.

Hope awesome things are in the roadmap !

like-fill
1
  • reply
  • like

December 31, 2017 at 3:53pm

I am missing:

  • reply
  • like

1. Sticky Header

like-fill
2
  • reply
  • like

2. States for Prototyping. Think of a Tabbar Navigation. Each Tab has it's own context. I don't want to restart the context every time I switch. Sorry for the multiple messages but "return" directly sends the message for me instead of starting a new line.

like-fill
1
  • reply
  • like

April 3, 2018 at 4:44pm

+1 for image overlays within prototypes. For modals, menus, sticky headers/footers & popups.

like-fill
2
  • reply
  • like

Ordering frames first on presentation mode

  • reply
  • like

April 24, 2018 at 11:12pm

I don't think this has been ordered yet, I would like to be able to make -close- or -back- buttons, so I can close a Modal I just opened, and not just link to a view in concrete

  • reply
  • like

April 25, 2018 at 10:44pm

My biggest wish list is:

- 1. Scrolling in prototyping

- 2. Sticky footers and headers

- 3. (Bonus) Component states (that adjust scrolling height .. once scrolling is implemented)

- 4. (Super bonus) Animation prototyping

like-fill
1
  • reply
  • like

April 26, 2018 at 2:13pm

Starting to use Figma with my team on a medium sized webapp and right now the wishlist is looking like:

1. Link between pages

Our file is structured 1 page per major view, it would be nice to have, for example, a global nav component that preserves its links to frames on multiple pages.

2. Option to hide pick whips

Anything sizable looks like a hot mess when you view it in the prototype tab. It would be great to be able to hide the pick whips and just use the sidebar to manage links and transitions

3. Pinning

Like others have mentioned in the thread, for user testing it would be huge to be able to pin a group or frame relative to the top-left-bottom-right of the top level frame. In our case this would let us preserve fixed horizontal nav.

like-fill
2
  • reply
  • like

July 21, 2018 at 3:12pm

An iteration that might be nice, is the ability to go "back". Rather than selecting a deliberate screen, the user returns to the last page they were on.Jason

  • reply
  • like

November 14, 2018 at 9:18am

" sticky headers/footers and image overlays " as Anthony points out are absolutely critical.

This! I'm still prototyping in invision just for this features.

like-fill
2
  • reply
  • like
Show more messages