Skip to main content

Hi there! I have some special use-case:


I want to showcase a device with 2 screens in my Portfolio. I created a simple HTML with 2 iframes containing a Figma prototype from the same design file:


edit: here is the html hosted on github: https://dimalei.github.io/


image


here is a snippet of my html:


<body>

    <div class="rx2frame">

        <!-- <img src="RX2.png" alt="Device Frame"></img> -->

        <div class="mainsceencontainer">

            <iframe class="mainsceeniframe" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fproto%2FmMm6yNeXdlZDWKRgFBwgY1%2FPrototype-Testing%3Ftype%3Ddesign%26node-id%3D11-4349%26t%3D6f8h7P0lzoUoRzbh-1%26scaling%3Dscale-down-width%26page-id%3D0%253A1%26starting-point-node-id%3D11%253A4349%26mode%3Ddesign&hide-ui=1" allowfullscreen></iframe>

        </div>

        <div class="secondsceencontainer">

            <iframe class="secondsceeniframe" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fproto%2FmMm6yNeXdlZDWKRgFBwgY1%2FPrototype-Testing%3Ftype%3Ddesign%26node-id%3D39-8%26t%3DQnULlb1C0jzRfN57-1%26scaling%3Dscale-down-width%26page-id%3D0%253A1%26starting-point-node-id%3D39%253A8%26show-proto-sidebar%3D1%26mode%3Ddesign&hide-ui=1" allowfullscreen></iframe>

        </div>

    </div>

</body>

Is there any way to have the two prototypes interact? I tried setting a variable when navigating to a different screen on top. Unfortunately it does not affect the second instance of the prototype:


image

VEED

this worked for me.


some key point:



  • the variant names are important. they have to be the same

Hey thanks for your suggestion! The way you do it works, however there are a few reasons i try to not show 2 screens on 1 prototype:



  • I can’t use page transition animations

  • My source Figma files are made for very specific screens, with different dpi & scale settings.


My idea was to show 2 individual prototypes so I can use screen transitions and don’t get any scaling issues.


However if this won’t be possible, I’ll consider using your option, or simply making the second screen fully independent from the main screen content.


edit: I hosted the HTML on the github to understand what I mean https://dimalei.github.io/

i understand…


In my oppinion I don’t think it would work. As far as I understand the prototype, I feel that when the prototype starts, it creates a sort of a sandbox env that is fully sepparated.


EX: if you open the ptoto, navigate to slide 2, the value of the var in your collection is not changed. Also, any change in the collection will only affect the initial state of the proto, not the ones that are already started.


in the screenshot, my proto is navigated to slide 2, but the collection is untouched.


Screenshot 2024-02-07 at 15.59.01

It’s kinda the answer I expected, but yeah it makes total sense. I don’t want a prototype to be messed with if multiple people using it at once.


image


Do you happen to know why these transition types can’t be used for the “change to” action?

with a bit of a delay… I have no clue.


I did’t go that deep yet into animations.


We just use instant/disolve for our usecases to keep it simple. 🫣

I found out how to implement animations:



Just connect the variants with an action that is not used (a random key input for example) and the variant change will use that animation.


For some reason I can’t get the component swap by String or Integer to work as you showed here to work.


In fact, people are saying this is actually impossible (this thread) 🤔

I don’t have that snippey anymore, but I am 90% sure I just used strings across the board. even the variables are strings. (as in: “2”)


conversion didn’t work for me either. I tried in a few instances before. From my point of view the limitation comes from the fact that the variant name is a string. This is super clear in the plugin API.

Reply


Terms & ConditionsCookie settings