Atoms come into the picture

Atoms are the result of the combination of Quarks

Quarks alone usually have no value to the design. They need to be combined to originate the Atoms we want.

Atoms are elements that result from the combination of Quarks, forming elements with a higher level of complexity and fidelity.

Because we want to have more control over the construction of an Atom, we will turn them into Components. In case we ever need to change the position of the Quarks inside the Atoms, it will be much easier thanks to the power of Components. A unique change on the Atom Master Component will apply changes across all the distributed Components.

Designing with a prototype in mind — Dynamic Elements

Group Components with magic inside

At this point we have three components — Active Toggle, Inactive Toggle and Gold Toggle — that we can use in our interface.

In the majority of times, a prototype will be mocked at some point during the design phase. After testing it with users, we will gather insightful data and iterate on our interface.

The construction of prototypes — really detailed ones — requires many element states. Usually elements are named according to their multiple states such as “button-red-hover”, “button-red-visited” and so on.

While building prototypes, I feel the need to quickly change between element states. In the toggles’ case, instead of using each Atom separately, I use what I call a Dynamic Element.

A Dynamic Element is a Component that groups all the sub-elements that represent different states or variations of one sub-element.

Using Dynamic Elements solves the problem of changing between states of an Atom between screens in the prototyping phase. By making use of hidden layers, we can use the Dynamic Element of the toggles (that contains all the Atom toggles) and hide whichever layer we want to be seen in each screen.

We can do this by quickly selecting the Atoms we want to hide and hit Ctrl+Shift+H (Windows) or Shift+Cmd+H (Mac). There is also the option to select the layer we want visible, head to Object > Hide Other Layers and all the other other layers inside the Dynamic Element will be hidden.

Dynamic Elements are basically a bag. A magic bag, actually. And we can place each magic bag on our interface. In this case, we have a magic bag of toggles that contains all the existing toggles inside of it. We can place multiple magic bags on the interface we’re building and say, “hmmm, you here, become a gold toggle. You there, you should be an inactive toggle.”

Such elements were inspired by Thomas Lowry’s post as well Tom Johnson’s response, where they describe using different variations of an element (icons, in their case) inside one single Component.

Name Dynamic Elements > Conquer the world

In this specific case, the Dynamic Element contains all the Atoms of toggles (Active toggle + Inactive toggle + Gold toggle). The word dynamic is used to describe such Components because they can take many forms. By hiding layers, we can display toggles in a dynamic way.

If we have these elements throughout our interfaces, it becomes important to identify them. Otherwise, they do not announce all the power inside them (the ability to change between many states inside them). Therefore, it becomes important to name these accordingly.

Going through the prototyping phase, I felt the need to have something that would make these Dynamic Elements stand out. It is important to say I am not in any way an expert in naming methodologies (and you’ll agree in a second). That’s a field I am still exploring but I can tell you what has been working for me.

I use emojis.

More specifically, I use three unicorns, as in 🦄🦄🦄

There is no way we are missing a Dynamic Element this way. Whenever an element has three mystical beings at the beginning of its name, we know for a fact that inside of that Component there will be a variation of states. We can open it, hide/unhide layers and get back to the prototyping phase.

BUT FIGMA ALREADY HAS THE INSTANCE THING!!!

True, it does. But I feel it lacks understanding.

When you select a child of a Component the Instance option allows us to change to another component. In other words, it would replace Dynamic Elements. Instance is even smart! It’ll suggest other Components similar to the original one we want to change, and prioritize that choice.

Pretty cool!

In this case, we are trying to change the big blue elipse Component to another Component. Instance suggests others that may be the right option to change to.

But let me tell you another story.

Pretty c-WAIT, WHAT?!

Above you can see an example of what Instance looks like when we have a lot of Components. It becomes hard to be navigate through all the Components — in this specific case, there’s a page that is not available on my screen due to the huge amount of Components displayed.

Sometimes Instance can even betray us. Some of the suggestions we get when trying to change Components might not even be close to what we’re looking for — and then we may have to swim through the ocean of Components, as displayed above. Because it’s organization is highly dependent on the naming of Components, it can backfire.