MTG (Magic The Gathering) cards searcher for Figma

About

This plugin is for MTG fans who want to make Figma project around the famous MTG game. The plugin is used to insert MTG cards directly to Figma without leaving the software.

Features

• Search any MTG cards
• Insert selected cards to current page
  • creates an auto layout frame if multiple cards are inserted
  • selected cards are inserted inside the selected frame or group
• Handle Scryfall syntax for specific search
• I am feeling lucky feature

Development guide

This plugin is built with Create Figma Plugin.

Pre-requisites

• Node.js – v20
• Figma desktop app

Build the plugin

To build the plugin:

$ npm run build

This will generate a manifest.json file and a build/ directory containing the JavaScript bundle(s) for the plugin.

To watch for code changes and rebuild the plugin automatically:

$ npm run watch

Install the plugin

1. In the Figma desktop app, open a Figma document.
2. Search for and run Import plugin from manifest… via the Quick Actions search bar.
3. Select the manifest.json file that was generated by the build script.

Debugging

Use console.log statements to inspect values in your code.

To open the developer console, search for and run Show/Hide Console via the Quick Actions search bar.

See also

• Create Figma Plugin docs
• yuanqing/figma-plugins

Official docs and code samples from Figma:

• Plugin API docs
• figma/plugin-samples