Design FUT-Style Cards in Jetpack Compose: Clip or Cut or Mask a Composable with a Custom Shape

Souvik Sarkar on 2025-01-31

Design FUT-Style Cards in Jetpack Compose: Clip or Cut or Mask a Composable with a Custom Shape

Before I begin with my story, if you aren’t a Medium Member, feel free to read the full story here.

At Kaffein, we’re obsessed with crafting exceptional user experiences. Recently, we tackled the challenge of designing unique FUT-style cards for each user. This was a two-part challenge: One, Creating the shapes of the cards, and Two, Cutting/Masking the user’s profile picture with the custom shape.

Part 1. Creating the Shapes of FUT-style Cards

Designing complex shapes from scratch can be daunting. While direct path creation is an option for skilled designers, we opted for a more accessible approach. Here’s how we simplified the process:

• Sourcing PNG Images: The first step is finding a PNG image of your desired card shape. A simple Google search often yields great results.
• Tracing and Refining the Image: Downloaded images might contain colors, gradients, or extra elements. We needed a clean, single-color (black, in our case) PNG. To achieve this, we converted the PNG to a vector format. This simplifies the process of removing unwanted elements and ensures a crisp, scalable shape. Once converted, export the vector image back to PNG.