The Appeal of Complex Components in User Interface Design Systems | by Anuj Uchill | October, 2022

Using the newly exposed nested properties and custom instance properties in Figma to create a configurable UI kit.

A flow diagram showing a single column configuration and a two column configuration
Are configurable systems the next step towards design automation?

Previously, I wrote about the factory model of designing interfaces which proposed that design systems built with configuration as their underlying principle could improve the efficiency of the design process. Since then, Figma has released the updated Component Properties (beta), which allows custom instances to be set and properties of nested components to be exposed.

What excites me the most is that they also open up the possibility of creating updates Complex configurable component system Packaged together as entities for easy consumption in a single or multiple projects. Such systems could lead to new ways of thinking and planning through design systems and a new breed of designers focusing on robust strategies for scaling such design systems using configurable UI kits open avenues for

Primarily, we’re looking at more configuration capabilities for component instances. Configurable components are desirable because they can reduce the effort involved in ensuring consistency in the product. Once established, it can potentially enable designers who are less familiar with a particular design system and its underlying principles and guidelines to create quick mockups.

favorite example

Preferred instances allow cherry-picking component instances that can be attached to a particular component. Previously, a naming convention or group components had to be maintained together to achieve this. The Preferred instance property negates this requirement and enables them to be set in the global scope.

The contextual panel in Figma shows the preferred example when a Nav component is selected
setting some icon as preferred instance for nav component

exposing nested instances

This update enables you to expose nested component properties, which means that there will no longer be a need to dig into component instances to configure instance properties (the creativity, strategy and Shout out to the Figma team for the direction) )

The contextual panel in Figma shows the properties of the nested instance when a nav component is selected
Highlighting the properties of the right panel and moving the action buttons in the right panel

Previously, I described manufacturing factory components in Figma. Recent Figma updates have enhanced the capabilities of such factory components to make them more complex and easier to consume. Furthermore, we can further push the envelope for such component systems by creating a UI kit built entirely on such a configuration model. Here is an overview of the system:

1. Shell: Shells are independent and universal entities that can be attached to any other component. For this setup, I made two types of such shells, one with a custom spacing configuration between the slots and the other with a fixed spacing between them. Part components are accessed through these shell slots. The number of parts is limited only by the number of such slots created in the shell.

Two types of shell containers, both with a total of 7 row slot configuration options.  The top one has a custom spacing setup and the bottom one gets a fixed spacing setup.
Shells have custom and fixed spacing elements

2. Parts and Raw Materials: Raw materials are any components created at the fundamental level. Parts are components that are packaging of various raw materials. This setup uses raw materials from the Material Design 3.0 design system and parts made using these raw materials.

Raw material which consists of components like input fields, buttons etc and parts which are a combination of raw materials such as 2 column inputs, inputs with labels etc.
raw material and parts

3. Template Components: Then we package the sphere into a template. In this case, I am using a phone mockup. Setting up a template component involves exposing the properties of nested components and ensuring that the naming conventions of all parts and shells align with this component to make them accessible at this level. Note that the cleanliness of such a setup requires some due diligence and thinking through as the reference panel can easily become overwhelmed with unnecessary attributes if not thoroughly considered.

A factory template with contextual panels in Figma showing the various properties available for configuration in it
The template exposes only the required properties at the top level.

using the system

Such configurable kits can significantly reduce design time. Wireframing kits that use such components can make it easier for non-designers to start their app or web product interface design for early-stage testing.

While there is an overhead associated with such systems that require strong naming conventions and planning, such overheads are only one-time. On the upside, once built, such UI kits can act as the basis or starter for any new project.

Here are some screen grabs on how Setup can speed up your interface design process.

Setting up rows: The snippet below shows how you can quickly switch between different row and column configurations of slots and fill them with parts.

A universal way to configure rows and columns

Low to high-fidelity switch: You have efficient control over the content details at low and high fidelity. As a designer, you have to define an appropriate level for low-fidelity or high-fidelity design and set it as your base components.

Applying content through a material reel and switching layouts

Starting with frequently used components: Pop-up modal overlay is one of the most used features in any product. Configurable settings such as pop-ups and dialog boxes can significantly improve interface design speed.

Configuring the default Material 3 dialog pop-up and applying content

Standardized UI patterns such as input forms can be easily converted into templated systems that have plenty of room for customization, while keeping them consistent.

Input form as configuration pattern

Such configurable UI systems can open up new ways of thinking through the product design process, employing new ways of engaging with designers. On speculation, we may well proceed:

1. A Marketplace for Component Designers

In the future, popular design kits like Material Design Kit may have such configuration capabilities, which could mean that your next Android design project is just a few configurations away.

Designers can create new component patterns for existing and new design kits and publish them as prebuilt components to a shared repository, making them available to all other designers. As long as a designer subscribes to a particular design kit, they can potentially use such modular prefabs in their projects, thus saving time and improving efficiency for everyone involved.

2. User Interface Design Automation

When we achieve efficient modernization, machine learning systems should be able to leverage the modularity and configurability of design systems to create interfaces that respond to product needs.

While current design tools offer flexibility in design patterns and approaches, the flexibility also results in diverse implementations of interface components. Such components can be difficult for software systems to streamline into reusable code. If design systems align with dev implementations through standard naming conventions and patterns, the design-to-code transition is also likely to be automated.

The contextual panel in Figma is intelligently moving in that direction, promoting the idea of ​​designers spending less time on pixel creation but more on decision making. By creating design systems with standard configurable patterns that align with developer implementation and open it up to a shared consumer and producer base, such a reality is not too far off. As manufacturers of products, we need to be able to spend more time solving complex problems and less time building and maintaining systems.

Comment: The setup described in this article is experimental and has not been tested for use in a commercial project. However, I can recommend trying such a system for creating quick wireframes.

Leave a Comment