I’m surprised Figma didn’t have this yet tbh. I thought they were building features at breakneck speed. I’ve been using this in Sketch all week and it’s really such a great, easy-to-use feature that’s easy enough to set up as you go along.
It also means some pain adapting an existing component library :(. Growing pains I suppose.
It looks like they're adding some extra spice though. Dropping icons on an instance of a component like that is something Sketch can't do currently.
It does look that way.
It looks like they have taken the same modular approach they did with adding colour styles, or shadow styles independently. So you can keep your master components clean, and just throw in any component inside and it will adhere to the frames padding (kinda like a box model).
I played around with Sketch's new Auto Layout and whilst it works, you have to choose if you want the Symbol to grow left, right, up or down. Which I think was a mistake. As that means you'll have to make a Symbol for each movement type you want. Again increasing the permutations of symbols you need.
This looks a lot more feature complete (as long as these all drop day 1).
Works for me? If I have a button symbol w an icon (also a symbol) left aligned with text to the right and set the icon’s override source to none the layouts adapt.
I’ve been using it all week on a card game side project. V useful.
That's not what Paul is talking about.
In Figma it looks like you can make a button component with just text and a background shape (with padding). Then on the Button instance you can drag in any other component - in this case an icon - and it will understand that the component has padding and put the icon in the correct place.
So this means you can make a simple button component and make it extendable with any icon on the fly, instead of having a button with an icon in your symbols panel.
Oh that sounds awesome. Was playing around w Figma today and it’s come a long way since I tried it last year.
When this feature comes out I’d love to try it. I wonder how that’ll work if you have a design w 2-3 symbol components covering things. Would the image try to drop in to each symbol instead of on the art board?
Would the image try to drop in to each symbol instead of on the art board?
I think you'll get an indication of where the element you are dropping in will be placed.
In the video they posted you see a blue bar indicating where the component will sit when you let go.