Overview

When not mapping out information architecture concepts, I enjoy exploring intricate interface challenges and crafting versatile, reusable components in Figma to support designers and developers alike.

This case study demonstrates one such component and breaks down the stages involved.

Stage 1 - Intake Acceptance Criteria

List the component’s Content, Construction Notes, and Interactivity Rules.

Content

1. Text: Description
2. Tier: 0-3 (indentation level)
3. Type Icon: Folder (open/closed) or File
4. Security Icon: Shield or Lock

Construction Notes

1. Users will stack multiple instances of component.
2. Users may create variations using the properties panel.

Interactivity Rules

1. Type Icon must be Folder-Open or Folder-Closed if row is a Parent, and:
2. Type Icon must be File if row is a Child
   This means Folder=Parent and File=Child, so we should separate component variants into distinct Parent/Child categories, so that users don’t disconnect “Folder” from “Parent” and “File” from “Child” (aka, break visual cue)
3. Security Icons shouldn’t appear by default
   Set default boolean value to “false”
   

Stage 2 - Construct Component

Create ‘subcomponents’ as part of the main component’s adjustable properties, and build variants that reflect the requirements laid out in Content and Rules lists.

Create Icon Subcomponents

Subcomponents can be created in-file, or pulled from the design system library.

Create Component Variants

Variants contain nested Subcomponents and are organized to reflect UI/UX rules.

Stage 3 - Utilize Component in Workspace

Bring component into design file, duplicate and modify its properties to build out necessary variations, and insert the final design into larger patterns.

Modify Properties

Insert Instance and Duplicate






Stack Variants

Insert Stack into Larger Design Pattern

Individual component instances can be freely modified from the stack as needed.