Gestalt 2023 Q2 newsletter

It was another big quarter for the Gestalt team with some big releases shipped and big milestones hit. Here are the major achievements for the quarter.

Q2 highlight: H1 Gestalt survey results

Illustration of a filled-out survey.

We wanted to kick off our Q2 newsletter with our H1 2023 Design and Web engineering survey results as they’re a window into our goals for the second half of the year.

Overall sentiment

It was another good half for sentiment. We saw some healthy gains from design. We saw a noticeable drop in highest sentiment scores from engineers, but still maintained a pretty eye-popping 98% overall approval.

Design sentiment:

Positive responses
,
95.2%
,
0.2%
Responses with highest score
,
47.6%
,
24.9%

Engineering sentiment (core customers only):

Positive responses
,
98.1%
,
1.9%
Responses with highest score
,
53.9%
,
15.9%

Survey highlights

Documentation sentiment and Figma library ease of use were two big wins from this half. These touchpoints remain critical for us and we believe there's ample room for continued improvement.

Overall documentation sentiment:

Positive responses
,
93.3%
,
8.1%
Responses with highest score
,
58.4%
,
8.9%

Figma library ease of use:

Positive responses
,
95.2%
,
8.9%
Responses with highest score
,
42.9%
,
29.3%

Survey lowlights

Engineering awareness of Gestalt updates is an area where we need to see significant improvement. Our goal for this year is 60% of engineers being aware of very aware of our updates. We plan to hit this hard in Q3. Velocity was another area that dipped a bit this half. We hit 100% of our core customers giving us a positive velocity score in H2 2022, so we could only go down from there. That said, a 15% drop of highest scores is something we'd like to resolve in the second half of the year.

Engineering awareness of Gestalt updates

Aware or very aware
,
47.8%
,
1.9%
Responses with highest score
,
2.9%
,
4.5%

Gestalt's impact on engineering velocity

Positive responses
,
96.1%
,
3.9%
Responses with highest score
,
51.0%
,
15%

We've made extraordinary progress

It’s important to remember where we started when Gestalt kicked off. The progress we’ve seen in sentiment and usage are staggering—especially when it comes to our customers in Design. While these are laudable numbers, there’s still plenty of ceiling between where we currently are and what our aspirations are. Ideally, we’d see highest sentiment in the 60-70% range, if not higher.

Overall engineering sentiment of Gestalt, 2020-2023

A graph of overall engineering sentiment of Gestalt from 2020 to 2023.

Overall design sentiment of Gestalt, 2020-2023

A graph of overall design sentiment of Gestalt from 2020 to 2023.

One other notable win has been the the continual increase in usage of our documentation by designers. For context, in H1 2020, we had 5 times the number of designers respond that they never went to our documentation than visited weekly. Now, we have 100% of designers responding that they use our docs at least monthly and over 70% visiting weekly. Our goal remains 80% of designers visiting weekly — we hope to crest that milestone in H2 of this year.

Designers' usage of Gestalt documentation, 2020-2023

A graph of designer usage of Gestalt documentation from 2020 to 2023.

What this means

On the surface there appears to be a correlation between our drop in highest-score engineering sentiment and highest-scores related to how fast it is to build UIs. We’d like to validate if these two scores are in fact related and, if so, what’s causing that. More importantly though, we are aiming for significant gains in engineering awareness. The team is looking into ways we can refine our comms to ensure we’re communicating in the right ways, in the right places at the right cadence.

Components and tokens

Illustration of mobile design system components.

The Gestalt team partnered with the iOS and Android platform engineering teams to support the buildout and certification of 6 new Android Gestalt components ButtonGroup

, Icon
, Opens a new tab
, IconButton
, Opens a new tab
, IconButtonFloating
, Opens a new tab
, SearchField
, Opens a new tab
, Text
, Opens a new tab
, TextArea
, Opens a new tab
and Toast
, Opens a new tab
and 1 new iOS component, Icon
, Opens a new tab
.

Gestalt has lagged behind on coverage for Android and iOS code components the progress we’ve made this quarter represents another big step towards full Gestalt support for mobile experience.

Check out Gestalt's Android

and iOS
, Opens a new tab
components

SheetMobile

An illustration of the SheetMobile component.

Pinterest uses sheets extensively throughout its mobile experience. We are excited to now officially support this component in Gestalt Web. The component is still in its pilot phase, so expect more improvements and updates in the quarters to come.

This component represents a significant footprint in our mWeb experience and we expect it to dramatically speed up mWeb design/development moving forward.

Check out SheetMobile

mWeb-adaptive Dropdown

An illusteation of the Dropdown component in desktop and mobile versions.

Related to SheetMobile is our new mWeb-adaptive Dropdown. This new feature enabled a mobile-centric view that displays its contents in SheetMobile

on mobile devices and Popover
, Opens a new tab
on desktop devices.

Our mWeb-adaptive components (currently Modal and Dropdown) should make development much simpler as it removes the need to swap out components based on device type. This should simplify cross-device product development.

Read about Gestalt's mWeb-adaptive Dropdown

TileData & TagData

An illustration of TileData and TagData Gestalt components.

The Gestalt team is working hard to expand into data visualization support. In that spirit, we created two new components that will support data visualization experiences.

TagData enables users to select multiple categories to compare with each other in a graph or chart while TileData allows users to select multiple categories to compare with each other in a graph or chart view.

These two components will besties with our upcoming data visualization components and should round out our offering in the space.

Go have a look at TagData

and TileData
, Opens a new tab

Table enhancements

An illustration of Gestalt's Table component.

Gestalt’s Table component needed some love. We made three notable updates to the component in this quarter.

  • Table.Row
    , Opens a new tab
    and related subcomponents gained two new props, hoverStyle and selected.
  • Headers and footers now have a border, and Table.RowExpanded can be used in a controlled manner using the expanded prop.
  • We also shipped a visual refinement to Table's sticky footer
    , Opens a new tab
    to include a drop shadow for greater visual clarity.

These updates represent worthwhile quality-of-life improvements which should help improve the overall experience across business interfaces.

Visit Table

Official TypeScript support

An illustration of a browser window displaying the TypeScript logo.

Gestalt now includes TypeScript declarations for gestalt and gestalt-datepicker! We added a types field to our package.json files, so that TypeScript projects can automatically find the declarations. While we don't have specific plans to migrate to TypeScript yet, this is a big step towards making TypeScript a first-class citizen in Gestalt.

Documentation

Documentation experience improvements

An illustration of arrows pointing up and to the right along with a disco ball.

We aim for Gestalt’s documentation to be world class. It’s getting there...

There have been some long-running experiential issues that we had been wanting to fix since forever. And Q3 was the quarter it happened.

  • First and foremost, we dramatically improved the relevancy of our docs search results. We’ve seen a 27% increase in total queries and 9% increase in total users performing a search. We plan to continue to refine our docs’ search to make it as easy as possible to find what you’re looking for.
  • Our old code examples have been problematic—especially when it came to selecting text. We’ve been moving to a new solution for rendering code examples since 2022. We’re happy to announce that we’ve completed the migration for roughly 2/3 of all pages and plan to finish up the rest in Q3.
  • Lastly, on the topic of code examples, our new code examples now support dark mode and RTL! So, come Q3, any example you look at in our docs will be viewable in dark mode and RTL languages. Huzzah!

These updates are critical as we aim to make Gestalt’s docs the go to destination for anyone developing an experience at Pinterest. As Gestalt usage continues to grow, we need our docs to carry an increasing load of questions and guidance. We’re confident that improving the docs experience plays a critical role in making that happen.

Data visualization guidelines

An illustration of a bar chart.

Data visualizations are serious business and there are just so many ways to go astray. In the lead-up of our data visualization components, we’ve publishing guidelines that intend to provide guidance for everything you need to know to visualize data.

These guidelines represent the foundation we’ll build our actual components on. Once our data visualization components are shipped, designers and developers should have everything they need to visualize data!

Read Gestalt's data visualization guidelines

Card / preview block guidelines

An illustration of Gestalt's Card component.

We wrapped up a big collaboration with the Browse team where we worked to unify the design and content of in-feed modules. This work resulted in finalized Card component/content designs along with Card component guidelines

as well as guidelines for Boards
, Opens a new tab
and Pins
, Opens a new tab
preview blocks.

This work should enable a more unified and consistent experience when Pinners are presented with in-feed recommendations.

Read our Card component and content guidelines

Figma updates

Simplified components

An illustration of various boxes representing Figma layers pointing to an orderly Figma component.

Our Figma component libraries got some big upgrades through our integration of Figma’s new simplified component instances and exposed nested instances. We’ve activated these features on the majority of components across Android, iOS and Web libraries.

The updates should mean less drilling in, less fiddling and less hassle when using Gestalt’s Figma components.

New mobile components

An illustration of our Card and ActionBar Figma components.

We shipped three major mobile-specific components to our Figma libraries in Q2:

  • ActionBar displays primary actions for content, such as a Pin in closeup view. It’s available for Android, iOS and Web Figma libraries.
  • FeedCard is a specialized Pin created for marketing purposes within Masonry.
  • UpsellOverlay displays short messages to encourage followup actions, such as a related pin tap or idea pin swipe.

These components cover core elements of the Pinterest experience (e.g. ActionBar) as well as patterns to encourage engagement (e.g., FeedCard and UpsellOverlay).

Data visualization Figma components

Illustrations of Gestalt's line and bar chart Figma components.

In the run-up of our goal to deliver data visualization components for Web, we’ve published an initial version those very components in Figma. These components will help designers quickly mock up data viz experiences that will align with our code-backed components when they ship in H2.

Figma Pin component aspect ratios

An illustration of various pins in a masonry layout.

As the Pinterest Pin continues to evolve, so does our Figma Pin component. We added new aspect ratios to the Pin image element. Pins can now have landscape aspect ratios (16:9, 4:3 and 3:2) to go along with our traditional square and portrait formats.

What’s coming in H2

We have a lot of big goals for H2, but the main theme is refinement. We’re devoting a large portion of our focus on up-leveling what’s currently in the system to be easier to use and higher quality. Our goal is to see increases in comprehension of our guidelines, higher usage of our docs and most critically, greater engineering awareness of Gestalt updates.

Even more mobile components

An illustration of various mobile UI components.

While refinement is our primary focus, we have one exception which are mobile components. We need to aggressively expand the number of mobile components in H2 with 6 certified Android components and 15 iOS components!

Data visualization components

An illustration of Gestalt's family of data visualization components.

We had a bit of a false start in H1, but H2 is the half of data visualization components! We plan to ship our initial offering that should cover the main use cases we’re aware of.

Density themes

An illustration of a component with different density themes applied.

Gestalt's historical focus has been on the consumer experience, but we have spent the past few years continuing to expand our support into every facet of the product. We've built out numerous components to better support business experiences and we plan to give them all an upgrade by supporting density themes. Density theming will enable our components to be light and airy or dense and compact.

This will make our entire system more custom tailored to the kind of experience you're making—be it a new feature for Pinners, a new workflow for businesses or even new functionality in an internal tool. Density themes will have you covered.

Documentation refinements

An illustration of a signpost.

Our docs site has been and will continue to be a core part of Gestalt. We continue to make big gains in sentiment / usage, but there's still plenty of room for improvement. We heard your feedback and so we'll be focusing on improving the discoverability of components/guidelines, finalizing our refactor of code examples and refine our content to make reading our docs as smooth and enjoyable as possible.

Improved Figma component discoverability

An illustration of a magnifying glass looking at a Figma component symbol.

Designers, we heard your feedback and we know finding Gestalt Figma library components isn't always the easiest thing to do. We have big plans to improve this experience, if not fix it once and for all. We'll be making a major focus on improving our libraries' ease of use this upcoming half and we have high hopes for what we'll be able to deliver.

Pinterest Figma plugin improvements

The logo of the Pinterest Design Figma plugin.

Speaking of high hopes, we think our Pinterest Design Figma plugin can have a monumental impact on Pinterest's design and engineering workflow. We will be shipping numerous improvements and new features to the plugin which should enable designers to work faster and remove much of the busywork from their day-to-day work.