Instagram Direct Design System
Building for Android in mind
Establishing a source of truth
Messenger product designers had expressed a deep interest in the expansion of the Instagram Direct experience beyond the highly-used iOS.
Finding the source of truth within Android components can be challenging especially when comparing to what exists, live, on the app to iOS components that are more fleshed out. In order to better support the ever-growing Instagram Direct experience, an Android library was created as the ultimate source of truth through the conduction of audits of existing components in production and the creation of a Figma library of styles and component variant sets to be leveraged amongst the Messenger and Instagram teams.
-
Create a single source of truth in Figma for product designers working on Instagram Direct for Android
-
Ensure the Figma library leverages the styles and components from the Instagram Direct Systems for its foundation
-
Provide an evolving set of fully composed templates for Android screens core to app experience
-
Establish Instagram Direct product designers as the owners and maintainers of the Figma library
Library Organization
This library was organized using a similar taxonomy to what’s seen in the Facebook Design Systems today.
By doing this, it was possible to group components together in a way that makes sense, improve navigation by reducing the amount of pages needed, and structure the Assets panel in Figma to be more tidy and easily searchable. This taxonomy also translates well into nicely structured documentation pages, for the future.
Components
The components included within the Figma library are unique Instagram Direct components that have been spec’d out by Instagram Direct-focused product designers on Messenger.
Component properties
Component properties are the changeable features of a given component. This allows to establish which parts of a component others can change by tying them to specific design properties.
In this case, changing aspects of the chat bubbles can range from: showing and hiding the reaction emoji pills, bubble position, configuration of media, state, etc.
Component properties
A variant property allows attributes to be established on variants, such as state, color, or size. Variant properties are specific to variants and component sets, and can’t be created or applied to main components.
In this case, there is a reaction tray component set with five variants. It has one variant property: type. This signals the kind of reaction tray that one can swap between.
Swap instances
The Instance menu leverages the ability to find component replacements from the current file and any other enabled team libraries. Related components share the same hierarchy, which is why it was key to make sure component groups were organized with a proper naming convention.
In this example, the swap instances make it easy to exchange chat bubble components without too much heavy lifting.
Perfecting auto layout
Auto layout is a property you can add to frames and components. It lets you create designs that grow to fill or shrink to fit, and reflow as their contents change. This function was applied consistently to all components in the MDS iOS and Android Figma libraries.
For this effort, the goal was to increase component flexibility and to mitigate the need to break instances.
DesignKit
Once components are built and structured in a given Figma library, these are then are migrated to an internal DesignKit for the wider Messenger organization to leverage. These are made readily available with clear component descriptions, previews, and variants for ease of addition into a designer’s working file.
Project Duration
6 weeks
Role
Lead Production Designer