Библиотека иллюстраций берёт компоненты-иллюстрации из секций Figma-файла и доставляет в ваш репозиторий файлы изображений: SVG или растровые PNG, WebP либо AVIF в одном или нескольких масштабах. Код она не генерирует, и в этом её отличие от библиотеки иконок.
Перед началом
- Figma подключена к вашему воркспейсу, и файл доступен через это подключение.
- К проекту подключён репозиторий. См. Подключение репозитория.
Создайте библиотеку
- Откройте проект, нажмите Добавить библиотеку и выберите Иллюстрации.
- Общие настройки. Задайте название библиотеки и вставьте ссылку на Figma-файл.
- Источник. Выберите страницы и секции с иллюстрациями.
- Генерация. Выберите папку в репозитории, Формат экспорта и, для растровых форматов, масштабы.
- Нажмите Создать библиотеку.
Выберите формат
По умолчанию выбран SVG. Для растровых форматов FISYCO запрашивает у Figma PNG в каждом масштабе и сам конвертирует его в WebP или AVIF. Превью в библиотеке всегда в PNG, в каком бы формате библиотека ни экспортировала.
Масштабы
Для растровых форматов настройка Масштабные коэффициенты задаёт размеры экспорта: 0.5, 0.75, 1, 2 и 3. Если масштабов больше одного или выбран масштаб, отличный от 1, каждый файл получает суффикс, включая @1x:
illustrations/
├── onboarding-hero@1x.webp
├── onboarding-hero@2x.webp
└── onboarding-hero@3x.webpТакие имена соответствуют дескрипторам плотности в srcset:
<img
src="/illustrations/onboarding-hero@1x.webp"
srcset="/illustrations/onboarding-hero@2x.webp 2x, /illustrations/onboarding-hero@3x.webp 3x"
alt="…"
/>Получите pull request
После синхронизации откройте библиотеку и нажмите Создать PR или включите Автоматически создавать PR после каждой синхронизации в настройках PR. Файлы называются по имени иллюстрации в Figma. Все символы, кроме букв, цифр, точек, дефисов и подчёркиваний, заменяются на _. Переименованная в Figma иллюстрация приходит как переименование, потому что сохраняет свой node ID.