Dynamic content?

[awt2542]

Hi! Maybe I'm missing something - but sometimes I need dynamic content like images, or simple shapes that are unique to an instance.

For example, if I make a symbol for a button that should contain a profile pic - each button will be slightly unique in that regard.

What if you could add "$" to a subgroup within the symbol - and simply have the plugin ignore all that the folder contains?

That way I'll be able to have a structure like this:

• $text
• $imagefolder
  • profile.png
  • mask
• background

Maybe this causes other problems though - and maybe I'm misusing the concept of symbols. Just a thought :)

[tisho]

Thanks for the suggestion! The dynamic layer feature is actually implemented in exactly the way you describe and is not restricted to text layers. You can put a "$" in front of any shape layer or group and have the plugin ignore changes to it. I intentionally chose to advertise it as a "dynamic text layer" feature, because:

1. Labels are often dynamic in UI design. More often than shapes.

2. Text layers have additional attributes, such as alignment, that make it easier to make an informed guess about the syncing behavior of sizes and styles that stays close to the designer's intent. I'll give you an example: if you have a button label and set its text alignment to centered, you want that layer to stay centered within its container regardless of how wide the label gets. If you want it right-aligned, you probably want shorter or longer labels to stay right-aligned, too. This works correctly in the current version of Symbols. Now let's take a dynamic shape, for example. If you have a 10x10px square in a symbol, but in a subsequent copy you change that size to 20x20px, there's no way for me to tell whether you meant for that square to grow from the center, or from any of its edges.

3. With overuse, you can start losing the point of symbols, which is to make consistency and reusability in your designs more straightforward. You can shoot yourself in the foot quite easily by introducing variations just because you're allowed to.

[bomberstudios]

Hi there,

I'm seeing a strange behavior when using the $ syntax for non-text layers. Not sure if it's a bug, or I'm simply failing to understand the correct behavior. Here's a video showing what I mean: https://dl.dropboxusercontent.com/u/7725/dynamic-symbols.mov

[tisho]

Thanks for posting the video. It looks like when you copy the second shape in the dynamic group and sync, the plugin correctly ignores it, because it's in a $-prefixed group, but still tries to match the width/height of the source. This makes the blue rectangle in the second copy appear all blown up.

For text layers, matching width/height when the text behavior isn't switched to "Flexible" makes sense. You can set and tweak the boundaries of the text, but vary the content. For shape layers or layer groups, matching the width/height doesn't make sense, because that would be destructive to the contents of the target layer.

Now we can get rid of the width/height matching for non-text layers (someone file an issue), but I'm wondering if it's actually worth syncing any of their properties. Their position would be ambiguous, and so would be their size, and possibly styles, too. So should we draw a line in the sand and make dynamic layers text-only and then have a second syntax for ignored layers and layer groups? What use cases are there to support the latter? @awt2542 already mentioned avatars, but it seems like those would actually benefit from at least having their position synced (say I move an avatar 10px to the right in my mock; I'd want all other avatars in that symbol to be moved, too, regardless of whether they're dynamic or not).

What are other examples of dynamic content you guys find yourself in need of every day? I'd like to collect as many examples as possible, come up with test cases and execute against those.

[nitrada]

I agree, usually all properties of shape layers should be synced (or not synced via the $ trick).

Here's an example though where a special rule would make sense. Imagine you have a badge (or a button or whatever) that shares the same shape layer color and border radius, but has a different width. Wouldn't it be great if it would be possible to "unsync" the width property in this particular case?

P.S. sorry if this is old news or already covered somewhere else, I'm new to the party ;-)

[bomberstudios]

@nitrada: what you describe is actually solved in other tools by using 9-scale grids (also know as 9-patches on Android). It's one of those things that is easily done with a visual UI, but really hard to do right without it.

If we could access individual points on paths via scripting, we could maybe build a crude 9-scale grid using guide-like objects inside symbols. However, this is not only unfeasible but also a royal pain in the bottom.

I'd wait for the Bohemian Coding guys to implement proper symbols : )

[nitrada]

@bomberstudios yeah, I know 9-scale/9-patches, but that's too complicated :-) I was rather thinking about something like this (no idea if it's possible via the API):

Instead of

$dont-touch-me
—shapelayer

it could be something like

$!width dont-touch-my-width
—shapelayer

or

$!color dont-touch-my-color
—shapelayer

etc.

And yeah, totally looking forward to proper symbols (also with external file linking ;-)

[Ma11k]

Oh, it'd be very useful to set some basic properties untouched just like the $label hint.

$width or even $height or combinations of them :-)

Mikhail Miroshnikov