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.
Goals
01
Create a single source of truth in Figma for product designers working on IG Direct for Android02
Ensure the Figma library leverages the styles and components from IGDS for its foundation03
Provide an evolving set of fully composed templates for product-accurate screens04
Establish IG Direct product designers as the sole proprietors of the Figma libraryLibrary 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.
Variant 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.
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.
Perfecting autolayout
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.