Join the conversation

Sign in to join this conversation, and others like it, in the communities you care about.

Figma

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

Figma / Feature Requests

Framer X Stacks tool

Framer X Stacks tool

Figma / Feature Requests · August 22, 2018 at 10:37am
I've been playing around with the Framer X Beta, and one thing that's absolutely revolutionary imo is the stacks feature:
https://youtu.be/QQ66FU-TYCw?t=1m44s

It makes working with lists and grids so much easier. If I want to change padding between list items, I change 1 value and everything automatically reflows. Swapping positions of list items is literally just drag and drop. Adding a new list item is as simple as cmd+c, cmd+v and it's immediately in place. If you use components for list items, changing the size of the master component changes the size of every list item and they automatically reposition. I can't stress enough how much time this saves.

Overall I still prefer Figma so I'm sticking with it, but now I'm painfully aware of the lack of this feature. Getting started on a design containing any sort of list or grid makes me consider using Framer X instead.
Framer X: Layout Tools
https://www.youtube.com/watch?v=QQ66FU-TYCw

August 22, 2018 at 6:32pm

is that the only feature that is a Figma-killer?

  • reply
  • like

seems amazing, no doubt

  • reply
  • like

pretty cool

  • reply
  • like

August 23, 2018 at 4:14pm

Indeed! It simplifies the workflow so much.

Also auto constraints are a huge time safer

like-fill
3
  • reply
  • like

Sounds great, this feature definitely worth adding in figma. Thanks for sharing Pol

  • reply
  • like

This feature is better than grouping!

  • reply
  • like

But... if I add more pixels to the height of a component... Does "stack" still works?

  • reply
  • like

@hanu yeah you can change the size of anything inside a stack and the whole stack will just reflow. You only set paddings and margins on the stack and all the children automatically position themselves in real-time

like-fill
5
  • reply
  • like

@jorge-obsec their code-driven components are also pretty killer: https://www.youtube.com/watch?v=F7bUacV75xs

I can't see it speed up the workflow for when you're designing new components. But if you're designing screens that only use building blocks your product already has, it's pretty amazing that you can just drop those in and have them function exactly the same as the real thing.

  • reply
  • like

Yup, Framer X is all built off web tech and in real code this is how it would work with block level elements. I'm really excited to use Framer X (i signed up for beta but haven't gotten it yet!) and especially excited to try importing our production components and mix them with experimental ones we develop in our design studio. This allows us to build on the existing system and experiment at the same time with pretty minimal work and it can be plugged into existing data. What other features and uses have you found for Framer X @polk?

  • reply
  • like

This feature is also available in Sketch using the Anima plubing (formerly Auto-Layout) although it looks like Framer handles it a bit cleaner.

like-fill
1
  • reply
  • like

This feature is also available in Sketch using the Anima plubing (formerly Auto-Layout) although it looks like Framer handles it a bit cleaner.

or plugin...

  • reply
  • like

August 24, 2018 at 9:37am

Once you go stacks it's hard to go back. 🙈 Fingers super-crossed that something similar ends up in Figma.

like-fill
10
  • reply
  • like

August 27, 2018 at 7:56am

If Figma adds this feature i could finally ditch Sketch!

like-fill
4
  • reply
  • like

August 27, 2018 at 2:34pm

I too would love Figma to build something like this. It's the one thing I had in Sketch with the Anima plugin that feels missing in Figma.

  • reply
  • like

I personally don't like programs doing that for me. If it were implemented I'd want it to be flexible enough that it can simply be turned off. Have it be a constraints capability if the object selected is a frame. Having it be a special container type isn't appealing to me. Too many times have I had to completely change a layout, and from what I've seen in Framer X it's not easy to just copy and paste everything into another layout that isn't a stack. And I wouldn't say it's holding me back from using Figma. The collaboration and cross-platform capabilities destroy both Framer X and Sketch.

like-fill
4
  • reply
  • like

I think the flexibility of having percentage, pixel, and fractional units for widths and heights is equally as amazing a feature in Framer X. Along with Stacks, it's very powerful and I'm relieved we finally have a tool with this flexibility.

  • reply
  • like

August 28, 2018 at 9:15am

@mrbrianhinton you can just unstack, same as ungrouping. I didn't experience any issues in Framer X moving items from a stack to a group, or vice versa.

Whether it should be a new container type or a new property for frames... the Figma team has proven they're amazing at figuring out how to best implement new features so I don't think that would be a concern 🙂

like-fill
2
  • reply
  • like

September 14, 2018 at 4:14am

I'd really like to hear from the team if they are prioritizing this. I am running into all kinds of inefficiencies that would easily be resolved if there was a Stacks tool.

  • reply
  • like

This feature is game changer. Hard to resist to not shift to Framer.

  • reply
  • like

Heavily in love with both Figma and Framer X, both have fantastic teams and awesome products. It was pretty evident early on that Figma needs Stacks/Flexbox/whatever to have sibling components affect each other. Also, the Framer X component store is a killer. I really look forward to both companies spurring each other to reach new heights. Competition is always good, but not too sorry to see that Adobe & Invision won't make it. Feel a bit sad for the Sketch team, but it is what it is.

Also, don't forget the fantastic Webflow team who are way ahead when it comes to creating designs that are actually used in production. They've had the greatest Flexbox UI and will soon launch what I expect to be the most sane to work with CSS Grids (On canvas, using direct manipulation)

like-fill
3
  • reply
  • like

If FramerX and Figma had a child I'd be madly in love with it.

like-fill
3
  • reply
  • like

If FramerX and Figma had a child I'd be madly in love with it.

I would date the hell out of that kid.

  • reply
  • like

September 14, 2018 at 4:01pm

Child Abuse

  • reply
  • like

I like stacks but I think there is a better way to do this particular feature that doesn't require creating a new frame or group.

like-fill
1
  • reply
  • like
Your message here...

*bold*_italic_`code````codeblock```