In 2014, there wasn't a dedicated team for design systems at Facebook. FIG was a loose association of volunteers, pushing standards and initiatives on their own time. My contributions aimed to help designers and UI engineers stay in sync, at scale.


GlyphKit

Led by **Brian Frick,** took inventory of all the disparate icons found in Facebook products, updated them to new visual guidelines, visually calibrated them, and hinted them manually (SVG support wasn't universal yet).

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/b97584ee-fdc4-4d11-8890-53259bd3645a/01.png

240 icons x 4 sizes x 4 densities =  3,840 individually hinted icons

240 icons x 4 sizes x 4 densities = 3,840 individually hinted icons


Asset Manager

The Facebook codebase was rife with duplicate, outdated, and large images. This was symptomatic of a larger problem with images at Facebook, which I attempted to fix.

In collaboration with Felix Kling (engineer), we designed and built Asset Manager to deal with icons and images globally. Asset Manager is to this day the de facto UI asset service at Facebook, successfully curbing duplication and providing visibility over all images used in FB products.

The tool automatically inspects image sizes, densities and file names for quality and completeness. Global updates can be made on the fly.

The tool automatically inspects image sizes, densities and file names for quality and completeness. Global updates can be made on the fly.

Ready to use snippets for all FB engineers, compatible with all platforms.

Ready to use snippets for all FB engineers, compatible with all platforms.

For designers, integrating with design tools ensured only production assets were used in mockups, with easy references for engineers. Plugin development by Julius Tarng.

For designers, integrating with design tools ensured only production assets were used in mockups, with easy references for engineers. Plugin development by Julius Tarng.