Loving the examples given here. Have you considered (or do you have) a community Figma file for slots related work? Would love to dive into these examples and play with your methodology.
Hi! Thanks for the article. It's a very cool approach, but I can't figure out how to use a frame to assemble a horizontal composition from a vertical composition. Manually rearrange the location? But then, if this is acceptable, can't there be problems later with the correct positioning of the Title and Description at different resolutions? Why is autolayout not being used?
"As a result, subcomponents and their layout, text, and visibility props vanished. Instead, the component asset was coupled with a few ready-made examples of the alternative layouts. Designers have everything they need to achieve the outcome they want as quickly as before, yet with far more flexibility."
Am I correct in assuming that in your example, the ready-made examples are Instances and not published components?
Would the consumer then need to always have to copy and paste from the Library file, as opposed to leveraging the multiple ways to pull published Assets into a file?
Possibly a small price to pay and a necessary trade-off. Just making sure I'm understanding correctly.
Yes. My post on Ready Made Examples is only drafted, but your instinct is correct: it's an array of instances positioned next to the component set/component exhibiting the range of slot compositions.
And yes, it's a price to pay: Figma doesn't enable templating / scaffolding like that as a feature. Everything's a component asset, so you'd have to go to the library to see and get those.
Loving the examples given here. Have you considered (or do you have) a community Figma file for slots related work? Would love to dive into these examples and play with your methodology.
I'm just here to slow clap for "scrollbar of shame".
Hi! Thanks for the article. It's a very cool approach, but I can't figure out how to use a frame to assemble a horizontal composition from a vertical composition. Manually rearrange the location? But then, if this is acceptable, can't there be problems later with the correct positioning of the Title and Description at different resolutions? Why is autolayout not being used?
That's more an implementation detail: just contain the arrangement in a frame you control inside the slot:
...
slot
- container
-- title
-- description
Once you have a slot, you have control to set the layout inside it, and when necessary add your own layout structure in between.
"As a result, subcomponents and their layout, text, and visibility props vanished. Instead, the component asset was coupled with a few ready-made examples of the alternative layouts. Designers have everything they need to achieve the outcome they want as quickly as before, yet with far more flexibility."
Am I correct in assuming that in your example, the ready-made examples are Instances and not published components?
Would the consumer then need to always have to copy and paste from the Library file, as opposed to leveraging the multiple ways to pull published Assets into a file?
Possibly a small price to pay and a necessary trade-off. Just making sure I'm understanding correctly.
Yes. My post on Ready Made Examples is only drafted, but your instinct is correct: it's an array of instances positioned next to the component set/component exhibiting the range of slot compositions.
And yes, it's a price to pay: Figma doesn't enable templating / scaffolding like that as a feature. Everything's a component asset, so you'd have to go to the library to see and get those.
Got it. Thanks, Nathan! Can't wait to see the new post. This series has been incredible.