@mirohq/brand-assets

Brand Assets Package Management

Right now, there's no straightforward way to update brand assets from Figma like we do for icons.

For next steps and insights on brand assets package, check out this Miro board: Brand Assets Package – Miro

Syncing Brand Assets

Since this process isn't automated, follow these steps:

1. Download Assets from Figma

• Open the Figma file/page containing the brand assets.
• Download all necessary assets in SVG format.

2. Find the Right Folder

Figma organizes assets by pages and sections. Match the asset to the correct package folder.

For example:

• Board Icons live in: packages/brand-assets/illustrations/board
• You can also find them in Figma: here

3. Export at the Largest Size

• Always download the biggest available size.

4. Optimize the SVGs

• Open each SVG file and remove the width and height attributes.
• This ensures they scale properly in different contexts.

5. Run scripts to update assets

• See scripts here: https://github.com/miroapp-dev/design-system/tree/master/site/src/scripts/brand-assets
• Once done, commit the updated assets! 🚀

6. Remember to update snapshots!

• Run 'pnpm visual-regression —-update' in your terminal and add changes to your PR