An illustrations library takes illustration components from sections of a Figma file and delivers image files to your repository: SVG, or raster PNG, WebP or AVIF, in one or more scales. It doesn't generate code; that's the difference from an icons library.
Before you start
- Figma is connected to your workspace, and the file is visible to that connection.
- A repository is connected to the project. See Connect a repository.
Create the library
- Open the project and click Add library, then choose Illustrations.
- General settings. Name the library and paste the Figma file link.
- Source. Pick the pages and sections that hold the illustrations.
- Generation. Choose the repository folder, the Export format and, for raster formats, the scales.
- Click Create library.
Pick a format
SVG is the default. For raster formats, FISYCO asks Figma for a PNG at each scale and converts it to WebP or AVIF itself. The previews in the library are always PNG, whatever format the library exports.
Scales
For raster formats, Responsive scale factors sets the sizes to export: 0.5, 0.75, 1, 2 and 3. With more than one scale, or a scale other than 1, every file gets a suffix, including @1x:
illustrations/
├── onboarding-hero@1x.webp
├── onboarding-hero@2x.webp
└── onboarding-hero@3x.webpThat naming matches the srcset density descriptors:
<img
src="/illustrations/onboarding-hero@1x.webp"
srcset="/illustrations/onboarding-hero@2x.webp 2x, /illustrations/onboarding-hero@3x.webp 3x"
alt="…"
/>Get the pull request
After a sync, open the library and click Create PR, or turn on Automatically create a PR after each sync in the PR settings. Files are named after the illustration in Figma; characters other than letters, digits, dots, hyphens and underscores become _. A renamed illustration in Figma arrives as a rename, because it keeps its node ID.