Saving designers time by bringing real Deezer content into Figma
Reducing repetitive design work through internal tooling
Designing music experiences often means working with real content: playlist covers, album metadata, artist names, track or fan counts… but getting that content into Figma was still a manual process.
Designers had to leave Figma, search Deezer in the browser, download images, copy metadata, paste everything into the right layers, then repeat the same steps across cards, rows, carousels, and campaign modules.
It was manageable for one or two cards. It became slow and painful for larger components, especially carousels with 10 to 12 items.
I started Deezer Data to remove that friction. The idea was simple: select your Figma layers, search Deezer content, and populate your design with real data in one click.
Plugin behavior
Deezer Data works by fetching content from Deezer's internal API, then matching each piece of data to selected Figma layers based on their names.
Designers can search for a content type, select the result they want, and apply it to their current selection. The plugin then looks for matching layer names such as Art, Title, Artist, Owner, FansCount, TracksCount, ReleaseDate, or Type, and updates images and text automatically.
Apply action
The plugin reads the current Figma selection and maps each selected node's name to a matching data field. Layer detection is case-insensitive.
Shuffle action
Shuffle works like Apply, but rotates through the list of results so each repeated group can receive a different item. This is mainly useful for carousels, grids, and repeated list components.
Initial search
When the plugin opens a tab, if a term is entered, search is performed. If no search term is present, it loads default charts for the active tab.
Search term persistence
When switching tabs, the current search term is kept and applied to the new active tab. This avoids unnecessary retyping when exploring the same query across artists, albums, tracks…
Playlist filters
Playlist chips allow switching between All, Deezer Editorial, and User playlists based on the editorialization data available from the API.
Tab-based logic
Each tab corresponds to a specific API call. Quizzes are handled separately because search is not supported for that content type.
Error handling
If matching layers are found, the update runs. If no matching layers are found in the current selection, the user gets a clear notification.
Language changes
Changing the language triggers a fresh search for the current tab and updates localized fields such as Fans, Tracks, ReleaseDate, and Type.
Outcomes
Early tests suggested a saving of around 40 seconds per item populated, depending on the component and the amount of data needed. With the “Shuffle my Figma” button, the saving could add up to several minutes on a 12-item carousel, as designers could populate multiple items in one action instead of repeating the same steps one by one.
This remains an assumption-based metric, since the plugin did not include precise tracking for the number of inserts made.
One of the most useful side effects was breaking an old habit: to save time, designers often copied populated components from older Figma files instead of repopulating them properly. It was faster in the moment, but it also brought outdated component versions, old libraries, and small inconsistencies into new work.
Over time, the tool expanded beyond the Product Design team and became useful for other teams working with Figma, including Marketing, CRM, ASO, Social Media, Content Ops and Artist Relations.
Building beyond my comfort zone
Deezer Data was my first Figma plugin.
There was no dedicated engineering capacity for this kind of internal tooling, but the workflow problem was concrete enough to act on. AI-assisted development became part of the workflow: first Cursor, then ChatGPT to understand and unblock technical problems, and later Codex to iterate faster and refactor more confidently.
I gradually learned what was needed to keep the plugin moving: JavaScript, GraphQL queries, Figma plugin constraints, GitHub…
I started with a small playlist use case, shipped a first working version, then expanded it as designers started using it and asking for more.