Towards a Factory model of designing User Interfaces — Slotted systems in Figma

Thoughts and exploration on creating slotted systems using the component properties in Figma to rethink the Speed, Configurability and Reusability of UI Design Systems.

Published in

UX Collective

8 min readSep 8, 2022

Configurable templates made on Figma — Templates made on Figma?

Design systems are ubiquitous in digital interface experience design projects. They ensure user interfaces are consistent across the entire product ecosystem and improve collaboration within the product team. However, creating, working with and maintaining design systems requires an ongoing effort. Further, as designers working in a consulting environment, we come across additional challenges in creating and using design systems:

1. The speed of creation

In design consulting, a lot of the work done is to reduce ambiguity and ensure compliance among stakeholders and users. This process involves creating designs at various fidelities to gain continuous feedback under strictly budgeted timelines. As far as design systems are concerned, in addition to improving efficiency, collaboration and consistency across the entire product ecosystem, there is also a focus on the speed of delivery. However, when there is a lack of consideration for modularisation and abstraction, design systems can slow down the design process since more time is needed to ensure the consistency of the system and the design.

2. Design feedback-cycles

User feedback during testing is most insightful and actionable when the users view design prototypes in their highest form of fidelity. However, there is often a significant overhead in transitioning from a low to a high-fidelity design. There is a need to improve this transition speed to gain faster and better feedback.

3. Re-using the design systems across multiple projects

As consultant designers, since we work on a higher frequency of new projects, one of our team goals has been to create systems that are reusable by different team members across projects. The key challenge here has been to reduce the overhead involved in learning to adopt such a reusable design system.

The Design Factory Model

The design factory model primarily considers creating a level of abstraction between the fundamental components and their packaged whole. Further, it also explores the means for creating a configurable system. Both these considerations contribute to an improved and faster creation experience and potentially an easier-to-learn and use design system. The source of inspiration for this exploration is a factory set-up.

A typical factory facility consists of an assembly line where parts made of raw materials are assembled and slotted into a Case/Shell to create a finished product. Many quantities of the same product are made, with certain variations to its internal structure. Such situations are common occurrences in interface designing, where a component is used frequently with variations to its internal structure.

A factory set-up ensures efficient assembly of parts into finished products. Such a factory set-up can translate well into the digital interface design ecosystem and hence named the “Design Factory Model”.

A Factory component in the design system can typically have the following structure:

A Finished product is derived from a Shell, which houses the parts. Parts contain Raw Materials (Atoms and Molecules) — Design Factory Model

1. Raw Materials:

The fundamentals of this proposed model do not change. We have the Atoms, Molecules and potentially Organisms (as explained in the Atomic Design System by Brad Frost) at the fundamental level. These entities, which can be in the form of Input Fields, List Items, Buttons, Etc. are collectively named Raw Materials ( I can never be entirely sure about the distinction between a Molecule and an Organism and prefer this classification instead)

Primary and secondary input fields with different variant states — Raw Materials can consist of Input/Selection Fields as Molecules

2. Parts:

Parts are where we introduce a level of abstraction into the system set-up. A Part can be:

A configured raw material, Eg: A particular state of an Input field (An input field with or without helper text ) or a Button component ( A primary button or secondary button )
A combination of raw materials, Eg: 2 input fields arranged in 2 columns or a paragraph title with a paragraph body set in their visual constraints.
An empty frame. Likely to be used when communicating concepts at a lower level of fidelity.

Parts which are — 2 column Input Fields and a 1 column input selection derived from a parent Raw Materials (input component) — Deriving parts from raw materials ( Figma variant states are applied )

The key difference to note here is that the Parts are not necessarily instances of raw materials. They are components configured for quick usage in that particular factory component. (This will make more sense when we look at how we achieve this in Figma)

3. Shells

Shells are the casing that houses all the parts. They give a defined structure to the factory component. They ensure that constraints such as spacing, padding, colour, margin and features such as title or certain parts built into them are consistent and aligned across the entire design ecosystem.

Modal shell has a title and close with 4 configurable slots and 2 buttons. The Filter shell has a title, 4 configurable slots and a Cancel button — A typical “Shell” set-up for a Modal and a Filter Panel

Creating a Factory Component for a Modal Window

We now look at how we can create a Factory component in Figma for a Modal window.

Figma Updates

Figma updated its software to include features like the new component properties that enabled swapping component instances and toggling visibility. Exploring these updates set the foundation for the work on this framework.

Modals

Modals (also called pop-ups) are entities displayed on the topmost layer of a page, deactivating all the layers beneath it. They serve functions that include asking for user inputs or communicating certain information to the user.

In a large project, there may be many variations to the internal structure of a modal component. Often, it can be hard to maintain the integrity of the modal as a component instance in Figma, which can lead to many detached instances and a maintenance nightmare. A factory component focuses on configuration, therefore, can always maintain the integrity of the component instance.

Factory component for Modals in action — an emphasis on configuration

A Modal factory component can be created as follows:

1. Create the Shell

Create a shell with a provision/slot for parts. The quantity of these slots is arbitrary since they can be increased or decreased based on the scope of use. In this case, I decided to go with 4 of these slots ( I call these slots “Frames”) since I didn’t foresee a need for more.

2. Create the Parts

Parts, as previously mentioned, are a combination of various raw materials customised for use within the scope of this factory component. Each of these parts is created as components and has specific naming conventions. The naming convention is required to ensure the appropriate grouping of the parts under their respective factories.

Naming structure for Modal ComponentModal/Part/1-Col-Input
Modal/Part/2-Col-Input
Modal/Part/Paragraph
Modal/Part/Subtitle

The creation of parts does not have to be planned upfront. The typical decision-making process involved in creating Parts is:

Create an empty modal shell > Create the first part > Encounter a situation where you need to use this modal factory component > Do you have all the parts needed for this situation? > Yes > Use the existing parts to create the modal > No > Create new parts[The new parts are now available for all future modals] > Use new and existing parts to create the modal > Set-up is now complete — Decision-making process for creating a factory component

3. Optional Featured Parts

These are entities that improve the configuration experience. The distinction between a Featured Part and a Part is that a Featured part is associated with the factory shell component, whereas a Part can be independent of it. In this case, the featured parts can be:
a. The configuration of the buttons panel
b. The configuration of the title section

The modal factory set-up consisting of a Shell, Featured Parts and Parts — The modal factory set-up

4. Applying Component Properties
Finally, we apply the boolean toggle and instance swap properties to each of the slots in the Shell. We can then use the factory component instance to create various configurations as shown below:

And that is it. You can now go about quickly spawning any variation of the modal window with variations to it. If you need more rows, simply update the factory component to include additional rows.

8 variations of a modal window created using the Factory Component — Many configurations of a modal window can be quickly created

Other Explorations

Similar factory components were designed for different sections/features of the product. The underlying structure remains the same as that of a modal factory.

Filter Panel Factory

In the case of a Filter panel, it includes a Shell as a part which is especially useful when you require an uncertain number of rows as a part.

A factory component for the Filter Panel showing 2 different configuration — A factory component for the Filter Panel

Factory component for table filters in action

Table Factory

Here, different column sizes are set up as parts of the table row and are typical of how developers set it up in code. In the example below, the table row can accommodate a maximum of 7 columns.

Table Row Factory set-up with 7 columns — Setting up a Table Row Factory

Creating a Page Template

Multiple factory components can be used in combination to create a page. Such a combination also allows the entire page to be set up as a component, thus essentially setting up a page template with a single source of truth.

Table column widths are quickly adjusted based on pre-defined size.

Results

The factory model was tested on a recently concluded design project. Some of the advantages it offers are:

Speed: Ensuring design consistency was easy since every modal factory component instance and the parts would have the same constraints. Further, since the variant properties of the parts are pre-configured for the modal component, less time is needed for further configurations.
Live Editing: The configuration/factory model allowed for quick, on-the-fly editing during conference meetings with the client stakeholders enabling everyone to quickly sync on the design modifications, thus reducing ambiguity and significantly reducing the turnaround times.
Intuition: The configuration process was intuitive, making it easy for any new designer to learn and make edits.
Maintenance: The factory component system eliminates the need to detach any instance or the need to create multiple flavours of it. For example, you don’t have to make a different modal component for a 2-row modal and a 4-row modal.
Switching from Low to High Fidelity: If the system design is well considered, switching from low to high fidelity should be as simple as swapping the existing parts with new Parts.
Reusability: While this isn’t well tested, factory components may quickly be used in other projects either out of the box or with aesthetic updates since little effort is required to learn them.

Conclusion

The design factory model of component creation may not be directly applicable to all product teams but can potentially be explored and adapted as an approach for faster iterative design cycles. Figma is consistently updating its feature set and is becoming the industry standard tool for digital user experience designing. As designers, we need to find new ways to leverage these updates. The design factory model is, I believe, a step in that direction.

Figma File: Happy to share the Figma file here (link to file) for you to take a look at and use. Do let me know how you go about using it or if you find ways to improve it further.