Release Notes (September 29)

Interactive Components Release Notes
1

Hey folks! We’re still working on interactive components. Here are the latest changes:

  • Autolayout:
    • Auto-layout is now fully supported in interactive components.
    • Previously, changing variant of an item inside an auto-layout container during prototype playback would neither reflow nor resize surrounding items and frames.
    • Now, doing so reflows/resizes surrounding items and frames just as if you made an equivalent variant change in the editor.
  • Fonts:
    • Fixed various issues where shared fonts would not load for prototype viewers in Figma web, embeds, mobile and Maze preview.
    • We’re now handling missing or local-only fonts differently in prototypes with interactive components.
      • We’ll replace missing fonts for prototype viewers and warn you if you’re using local-only fonts in your prototype that may not be accessible to other viewers.
      • For more details, see this post.
  • Performance:
    • Improved interaction responsiveness for nested interactive component instances.
  • Misc:
    • Fixed a bug where “change to” interactions would get their destinations set to “None” when copied and pasted between files.
    • Fixed bug where hover states would get stuck on scroll.
21 Likes
3

Auto-layout is now fully supported in interactive components

This is huge — great work!

4

@Andrew_Chan This is awesome. Thanks for the update.

I have another question, how can we update design content for Tabs/Accordion with interactive components in Autolayout. Are you going to fix this too?

5

I was soooooooo happy today to see the auto-layout considering the resized components. :grinning: :grinning: :grinning: :grinning:
I’ve been waiting for this feature so desperately! This is so helpful! Now I can finalize the project I’m working on. Thank you so much to the FIGMA developers!

I still see several objects moving and “shaking” a bit during the animation. Also, I have an issue with a nested interactive component (checkbox). The accordion works fine for the card containing the checkbox until I actually toggle the checkbox. Afterwards, the re-sizing of the auto-layout is broken for that card. I hope, this can be fixed.

1 Like
6

Excessive RAM usage fixes?

7

This is AWESOME!!! Thanks guys!!!

8

Hi Andrew, I have an unrelated question to this thread. Is there an estimated release date for Interactive Components? I’m working with a client who will be taking over ownership of the Figma project. I’m not able to use the beta release to deliver some desired interactions because it would currently require their org to all be on the beta program.

1 Like
9

This is amazing! :clap: :clap: :clap:

10

With the new auto-layout resizing inside interactive components: is it correct that they only work on the first level in folder structure? As shown in attached video, I can have the components resize within an A-L frame, but when I try to have the same components resize inside another A-L frame one level down, I can’t make that happen? Should this be possible? If this is not in scope for current version, will it be on the roadmap?

1 Like
11

Hi there. Difficult to say but I think it’s a bug. I have a similar issue. Please see this post here: Accordion with interactive components - #4 by Kelsey_Whelan

1 Like
12

@Harald_Skogland I’m encountering the same issue, and I think you’re right it will only work when the instance it top level and not inside another component. Very frustrating, took me hours of digging to figure out what was going on

1 Like
13

Yes. I could be wrong, but I think the logic here is that, this is an interactive component feature, and any interactive component feature needs to work inside a (single) component. IMO it would be an even greater feature if a component could be interactive as a child inside another component. It would be interesting to hear if someone from Figma could confirm if this is the case. And also if it is realistic to hope to see this feature in Figma one day :slight_smile: Interactive components are pretty awesome regardless though. And out of Beta today :slight_smile: @Steve11 you can bypass this by placing all your needed variations inside one interactive component, but if you have variations inside those again, you’ll potentially run into a lot of multiplied variants :slight_smile:

1 Like
14

I’m trying to use drag to make a swipe left / right component - The Push interaction is greyed out and it only allows smart animate which doesn’t support drag direction. How do you make a swipable left/right icomponent?

I have a draggable icomponent in a scrolling screen. The drag event is almost never triggered because the slightest up/down movement is taken as a scroll. How do you stop scrolling swallowing all the events from a on drag event. It looks like the event bubbling isn’t honored on the icomponent.

Any feedback on these issues or shall I report as bugs / features?

Thanks

17

Just trying out interactive components with auto-layout and the second thing I try does not work correctly as it should according to the changes from this release. I have a simple interactive component that changes height and is in an auto layout. Works fine in the design view, change to prototype view and it doesn’t work at all.

1 Like