Design System for Figma — The Power of Dynamic Elements

Over the course of the previous year I’ve been trying to follow a more solid design system using Figma. The power of tools such as Figma Components reaches its peak of performance if as a designer, one can dominate its flexibility within a process one feels confident in following.

Here I am a few months after discovering the tool, exposing how I approach the organization of elements and components. This article aims to generate discussion about what other people may be doing differently and it welcomes feedback, as it is in no way a process set in stone.

Getting the scope of each element

When designing sustainable interfaces, it becomes important to be aware of the composition of each element. More complex elements have wider branches within them, resulting in a natural hierarchy of elements.

Let’s use toggle buttons as an example of an element. In its purest form, a toggle button is the result of the sum of two sub-elements — a background rounded-edge rectangle + a circle that will move to right and left when clicked.

First components — Quarks

Each Quark will be a unique Component
  • a white circle — shadowed for skeuomorphic purposes

Why create Components?

If you think creating Components is isn’t worth the time and the effort, you should try not creating them. You’ll cry and hate yourself for not having done it before. On top of that, you’ll have a Figma document with over 30 artboards that contains 200 copies of an element that is not a Component, and now you want to change its color. Imagine that.

Previous experience has led me to the conclusion that you should create Components when:

  • you will use that element somewhere else

Atoms come into the picture

Atoms are the result of the combination of Quarks

Designing with a prototype in mind — Dynamic Elements

Group Components with magic inside

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.

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.

BUT FIGMA ALREADY HAS THE INSTANCE THING!!!

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

Pretty cool!
Pretty c-WAIT, WHAT?!

Keeping it clean and tidy

Everything in its place
  • 1 white circle (Component)

Prototyping with Dynamic Elements

Place one Component, have multiple inside
  • Where am I wasting time and resources and how can I avoid that?
  • What are your best practices and how can we all learn from them?

Links that might be of use

  1. You can find a diagram flow of the Component process on juauz.com/figma.jpg
  2. Click here to explore the Component organization by getting a copy of the Figma file I used as an example (with elements + prototype)

It’s OK to find. Product Designer @ Babylon Health.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store