menu
up-caret
down-caret

Figma

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

# Tips and Tricks

Share tips, tricks, tutorials, etc.

Trending conversations
Is this color real bad?
@ibnfahmi · 3d
$40 million in the bank 💰💸
@josh · 3d
Bitmap image quality degrading over time
@jchan · 17h
Figma onboarding for developers
@grigoriy · 23h
Why exactly is Spectrum wasting 3/4 of my screen?
@nomadtwin · 14h

Can this be done with swapping?

December 6, 2018 at 6:49pm

I was so exited when I saw that now we have overlays! I just tried today to put it in use but I got stuck.

I'm trying to do very simple thing, I have a button that I want to switch color when I click on it. I thought swapping is for that.

This is how i set it up. I want that green button change the color in blue when I click on it.

Image

This is how it looks on the start of presentation.

Image

This is what happen when I click on the green button.

Image

I thought the two frames would just switch and stay in position.

So it doesn't work how I expected. I figured out that frame witch is used for swapping have to be the same size like the original frame you are swapping with in order to preserve position.

I (sort of) found out how to get the desirable effect with overlays. This is how I set it up:

Image

So when green button is clicked on it will get blue button overlay, and when blue button is clicked it will close the overlay revealing back the green button. The only problem here I have is that once green button becomes blue I can't click on anything else before I close the overlay. This makes a problem because I can't open the hamburger menu while the button is blue. It gets worse when I have something more complicated like having 5 check boxes, with this method you could only select one check box and in order to select other you first have to "uncheck" the previous one.

Anyone have a workaround? It would be great if swap option could just swap frames (even nested ones) and preserve original position.


December 6, 2018 at 10:40pm

Individual checkboxes will be tricky to achieve with the current prototyping features, but you can still do some stuff between destination frames and timed delays to replicate SOME of the functionality you want using a combination of Swap and also Manually positioned overlays.

Here is a quick example which may spark some ideas:

https://www.figma.com/file/c6JM4KTyk29S8p65RoKtLfGV/Manual-overlay?node-id=0%3A1

  • reply
  • like

@thomas-lowry,

Just to verify it is *not possible* to do a swap on an internal frame within a frame without exiting the the parent frame. Which also makes if impossible to have more than one frame with swapping within a prototype frame?

  • reply
  • like

Hey there,

what you're trying to achieve @nikolar, is indeed not possible at the moment.

'Swap' works similar like 'Navigate' in the sense that it replaces the entire Top Level Frame.

There are two key differences between Swap and Navigate though.

(1) Swap does not close an Overlay when it is opened. This allows for interactions on overlays.

(2) When you use Swap from normal Frame to Frame, they will be skipped when using Back.

Hope this is helpful. :)

like-fill
1
  • reply
  • like