Skip to content

Instantly share code, notes, and snippets.

@gavinmcfarland
Last active July 8, 2022 14:29
Show Gist options
  • Save gavinmcfarland/c2fd4c8b9f038a4f7f69c0dc75b632af to your computer and use it in GitHub Desktop.
Save gavinmcfarland/c2fd4c8b9f038a4f7f69c0dc75b632af to your computer and use it in GitHub Desktop.
Sharing data between files in Figma plugins

Sharing data between files in plugins

The following functions allow you to share data between files without the need to use the REST API. While it suffers from some drawbacks (like managing duplicate files), it offers an almost frictionless experience for users.

How it works

When a user opens a file with your plugin the file is added to a list in clientStorage with a unique ID. When the user visits another file all previously visited files are be accessible from the clientStorage. Used in combination with a list which is stored on each file, it's possible to keep a record of remote files your plugin is using for a given file. The data for each file can contain any keys or information you need to access or import data from remote files.

Functions

  • Returns a list of recent files excluding the current file. Pass fileData to the function to add the current file and its data to the list of files.

    Files are automatically ordered by last visited.

    opts - expire - the time in milliseconds when a file should be automatically removed since the user last visited it with the plugin


  • Returns a list of remote files used by the plugin in this file. Used in combination with getRecentFilesAsync you can get the id of certain file and add it to the list of remote files by passing in the fileId. When ever this function is called, it keeps the information for each file up to date.

  • removeRemoteFile(fileId)

    Removes the specified file from the list of remote files.

An example

  1. UserA visits File1
  2. User opens the plugin
  3. The plugin saves some data from this file into clientStorage (getRecentFilesAsync(fileData))
  4. UserA visits File2
  5. The plugin asks user if they would like to use data from another file (getRecentFilesAsync())
  6. User tells plugin to use File1
  7. Plugin saves File1 to remoteFiles stored on the document node data (getRemoteFilesAsync(fileId))
  8. UserB visits File2
  9. User can now see data from File1 (getRemoteFilesAsync())
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment