I tried creating a banner after custom fonts became available in Figma MCP

Introduction

Figma's official blog introduced use cases and new features for Figma MCP.

https://www.figma.com/blog/4-ways-were-using-our-mcp-server-at-figma/

1. Create and update decks in Figma Slides
2. Generate FigJam boards from live data
3. Move designs back and forth between code and canvas with Figma Make
4. Share work with the Figma agent

Additionally, new features were introduced including support for uploaded custom fonts and download_assets for exporting images. This article summarizes the steps to create a banner using custom fonts with Figma MCP connected to Claude Code, and export it to PNG and SVG using download_assets.

New Features Covered This Time

We will try out the following two features.

• Custom font support: Specify fonts uploaded to your Figma account for use from MCP or agents.
• Image export (download_assets): Export specified nodes in PNG / JPG / SVG / PDF format.

Previously, fonts available through Figma MCP were limited to Figma's standard font library. This update allows you to specify fonts uploaded to your account as well.
Note that fonts installed on your Mac or fonts activated through Adobe Fonts, as before, are not visible from MCP.

While get_screenshot returns a preview of a node's appearance, download_assets returns the exported image files (along with source images contained within the node). You can also specify the export format and scale.

Registering Custom Fonts

Upload custom fonts to Figma. This can be done from account settings on any plan.

Uploading Fonts

In the Figma file browser, open Settings from the avatar in the upper right, and add your font files under "Your uploaded fonts" in the Account tab.

When uploading, a popup appears asking you to confirm the font's licensing rights. If the license is acceptable, check the box and upload. This time we are using Mona Sans, which is under the OFL (SIL Open Font License).
Once the upload is complete, you can confirm that the fonts you added are displayed.

Verifying Visibility from MCP

Whether uploaded fonts are visible from MCP can be confirmed using the Plugin API's listAvailableFontsAsync(). Run the following code from Claude Code via Figma MCP's use_figma.

const fonts = await figma.listAvailableFontsAsync();
const mona = fonts.filter(f => f.fontName.family.includes('Mona Sans'));
return mona.map(f => `${f.fontName.family} / ${f.fontName.style}`);

For Mona Sans, all weights were returned as follows.

Mona Sans / Black
Mona Sans / Bold
Mona Sans / ExtraBold
Mona Sans / ExtraLight
Mona Sans / Light
Mona Sans / Medium
Mona Sans / Regular
Mona Sans / SemiBold

Once you confirm they appear here, you can specify and use them directly when creating banners.

Creating a Banner with the Added Font

Now that we've confirmed the font can be used, let's create a banner. This time we're using a 1200×630 frame intended for OGP, with Mona Sans for headings and Noto Sans JP for Japanese text.

Specify the following in Claude Code.

Create an OGP-style banner at 1200×630 using the uploaded Mona Sans for headings and Noto Sans JP for Japanese text

Below is the output banner. Mona Sans Black is used for the heading, with Noto Sans JP below it.

Exporting with download_assets

Export the created banner using download_assets.
Simply specify the desired format, scale, and destination, and it will export to that directory. This time we exported both PNG and SVG.
Continuing from before, specify the following.

Export this banner as PNG (2x) and SVG to ~/Desktop

Since we specified 2x scale for the PNG, it was exported at 2400×1260, which is twice the 1200×630 size.

The parameters are as follows.

Summary

With Figma MCP's custom font support, whereas previously only Figma's standard fonts could be used, you can now upload the fonts you want to use in advance and specify them from MCP or agents.
Additionally, using download_assets, you can export your created designs in formats such as PNG / SVG.

Combining these two features allows you to handle everything from design creation to export simply by giving instructions to an AI agent, without ever opening Figma. This makes it easier to improve efficiency and automate recurring tasks such as everyday banner and OGP image creation.