Building the Shape System for Material Design

Yarden Eitan, an iOS engineer for Google's Material Design, discusses developing the shape system for Material Design, emphasizing the importance of shapes in UI components like cards and buttons. The project aimed to provide designers with the flexibility to apply unique shapes systematically, enhancing user experience and brand expression. The engineering challenge involved ensuring consistent shape support across major platforms, particularly overcoming the lack of native solutions for cut corners on the web. The team decided to initially support square, rounded, and cut shapes, balancing flexibility with practicality. On iOS, the implementation used CALayer and CAShapeLayer classes to manage and display custom shapes, with APIs allowing developers to apply these shapes to components easily. The collaboration with design teams was crucial in approaching the problem from multiple perspectives, leading to a more comprehensive solution. The project continues to evolve, with future plans to expand shape support and potentially include cut corners on the web once technologies like Houdini are ready.