Skip to content

FISYCO

Public beta

Illustrations: formats and scales

Updated November 8, 2026

An illustrations library takes illustration components from a Figma file and delivers them to your repository as image files: SVG, or raster PNG, WebP or AVIF in one or more scales. It generates no code, which is the main difference from an icons library.

Before you start

  • Figma is connected to your workspace, and the file is visible to that connection. FISYCO checks this when you create the library.
  • A repository is connected to the project. Pull requests go there. See Connect a repository.
  • You're a maintainer of the project, or a workspace owner or admin.

Create the library

  1. Open the project, click Add library, choose Illustrations and click Continue.
  2. General settings. Give the library a name and paste the link to the Figma file.
  3. Source. Pick the pages and sections that hold the illustrations. Only components and component sets are read; plain frames are skipped.
  4. Generation. Set the Repository folder, the Export format and, for raster formats, the Responsive scale factors. The folder defaults to src/assets/illustrations.
  5. Click Create library. The first sync reads the illustrations and shows their previews.

To change the folder, format or scales later, open the library's Settings and go to Generation.

Choose a format

SVG is the default. For raster formats, FISYCO asks Figma for a PNG at each selected scale and converts it to WebP or AVIF itself. Scales don't apply to SVG, so the setting is hidden for it.

Previews in the library are always PNG, whatever the export format.

Scales and suffixes

Responsive scale factors offers 0.5x, 0.75x, 1x, 2x and 3x. Pick at least one. A single 1x keeps plain file names. Any other choice adds a scale suffix to every file, @1x included.

The suffixes line up with srcset density descriptors:

From Figma name to file name

The file name comes from the component name in Figma. FISYCO lowercases it, turns spaces into hyphens and drops every character other than Latin letters, digits and hyphens. Repeated hyphens collapse into one.

All files sit flat in the repository folder. Pages and sections don't become subfolders:

Name illustrations in Latin letters and keep the names unique. A name with no Latin letters or digits falls back to the original name, with every unsupported character replaced by _. Two names that reduce to the same file name compete for one path.

How files reach the repository

After a sync, open the library and click Create PR. If the library already has an open pull request, the button reads Update PR, and the new files go into that pull request.

  • SVG files come straight from the last sync, as FISYCO stored them.
  • Raster files are rendered from Figma when the pull request is prepared, one export per scale. A large library in several scales takes longer.
  • Files that FISYCO delivered before but no longer produces are deleted in the same commit, for example after a removal, a rename or a format change. Other files in the folder are left alone.
  • The description counts added, modified and removed illustrations and lists the changes. Each kind of change can carry its own label, set under Settings → Pull Requests.

To skip the button, turn on Automatically create a PR after each sync under Settings → Pull Requests. The Create PR button is then hidden.

A renamed illustration keeps its Figma node ID, so it arrives as a rename, not as a deletion plus a new file. You can check every change in the library before the pull request: see Review changes and pull requests.

For raster formats, FISYCO detects changes by comparing the PNG at scale 1, so a new format or scale alone doesn't mark illustrations as modified. With automatic pull requests on, the next sync still delivers the new files, because FISYCO compares the generated files with the last delivery. A manual pull request needs a sync with changes.