At the company I work at, the design system has been growing over the last couple years. We’re currently trying to determine the best way to manage and organise larger illustration images ( in SVG format) in our design system so they can work with components of different sizes
So far, I’ve found two approaches
Defining fixed sizes for each illustration component as variables. (I.e. each illustration will have an XS, S, M… etc size variable)
Using a single illustration and resizing the illustration manually when placed inside another component, without maintaining a set of consistent sizes.
Across both of these methods I’ve seen design systems using different formats (usually a square and a wide format)
Which methods do you think works best for organising illustrations?
We are concerned if we go with the fixed sizes approach, we’ll end up with a unruly amount of sizes where we need different sizes as we introduce new components.
Check out the plugin called Ratios. It places a special frame inside your image components that enables the image to maintain the aspect ratio by scaling the height when the width changes.
It should make it easier to use a single component for almost any size layout.
It’s a little hacky, and won’t work the other way around (won’t scale width when height changes).
Id love to know this as well. Im trying to account for multiple illustrations that have very different aspect ratios to start with. If 2 illustrations live within the same 100px square container, their relative sizes can look very different. As a result, if Im setting up a template, the size of the illustration would need to be change depending on the illustration ratios.
For example, if I placed both of these illustrations into the same template, one would look much smaller than the other and they would have to be manually resized to visually match in size. Having inconsistent sizes would lead to more mistakes when handed off to eng, so am looking to create a component that can address this at a design system level.
