Иллюстрации: форматы и масштабы

Библиотека иллюстраций берёт компоненты-иллюстрации из файла Figma и кладёт их в ваш репозиторий файлами изображений: SVG или растровыми PNG, WebP и AVIF в одном или нескольких масштабах. Кода она не генерирует, и в этом её главное отличие от библиотеки иконок.

Перед началом

• Figma подключена к рабочему пространству, и файл доступен через это подключение. FISYCO проверяет это при создании библиотеки.
• К проекту подключён репозиторий: pull request'ы приходят туда. См. Подключение репозитория.
• Вы сопровождающий проекта либо владелец или администратор рабочего пространства.

Создайте библиотеку

1. Откройте проект, нажмите Добавить библиотеку, выберите Иллюстрации и нажмите Продолжить.
2. Общие настройки. Задайте название библиотеки и вставьте ссылку на файл Figma.
3. Источник. Выберите страницы и секции с иллюстрациями. Читаются только компоненты и наборы компонентов, обычные фреймы пропускаются.
4. Генерация. Заполните поля Папка в репозитории, Формат экспорта и, для растровых форматов, Масштабные коэффициенты. По умолчанию папка src/assets/illustrations.
5. Нажмите Создать библиотеку. Первая синхронизация прочитает иллюстрации и покажет их превью.

Папку, формат и масштабы можно поменять и позже: в библиотеке откройте Настройки, затем Генерация.

Выберите формат

По умолчанию выбран SVG. Для растровых форматов FISYCO запрашивает у Figma PNG в каждом выбранном масштабе и сам перекодирует его в WebP или AVIF. К SVG масштабы не применяются, поэтому для него настройка скрыта.

Превью в библиотеке всегда в PNG, какой бы формат экспорта вы ни выбрали.

Масштабы и суффиксы

В поле Масштабные коэффициенты доступны 0.5x, 0.75x, 1x, 2x и 3x, выбрать нужно хотя бы один. Если выбран только 1x, имена файлов остаются без суффикса. При любом другом выборе суффикс масштаба получает каждый файл, включая @1x.

Суффиксы совпадают с дескрипторами плотности в srcset:

<img
  src="/illustrations/onboarding-hero@1x.webp"
  srcset="/illustrations/onboarding-hero@2x.webp 2x, /illustrations/onboarding-hero@3x.webp 3x"
  alt="…"
/>

Как имя в Figma становится именем файла

Имя файла берётся из имени компонента в Figma. FISYCO переводит его в нижний регистр, заменяет пробелы дефисами и убирает всё, кроме латинских букв, цифр и дефисов. Несколько дефисов подряд схлопываются в один.

Все файлы лежат в папке библиотеки одним уровнем. Страницы и секции подпапками не становятся:

src/assets/illustrations/
├── empty-state-no-results@1x.webp
├── empty-state-no-results@2x.webp
├── onboarding-hero@1x.webp
└── onboarding-hero@2x.webp

Как файлы попадают в репозиторий

После синхронизации откройте библиотеку и нажмите Создать PR. Если у библиотеки уже есть открытый pull request, на кнопке будет Обновить PR, и новые файлы уйдут в него.

• SVG берутся прямо из последней синхронизации, в том виде, в каком FISYCO их сохранил.
• Растровые файлы FISYCO запрашивает у Figma в момент подготовки pull request, отдельным экспортом на каждый масштаб. Большая библиотека в нескольких масштабах готовится дольше.
• Файлы, которые FISYCO доставлял раньше, но больше не создаёт, удаляются в том же коммите. Так бывает после удаления, переименования или смены формата. Остальные файлы в папке FISYCO не трогает.
• В описании pull request посчитаны добавленные, изменённые и удалённые иллюстрации и перечислены изменения. Для каждого вида изменений можно задать свою метку: Настройки → Пул-реквесты.

Чтобы не нажимать кнопку, включите Автоматически создавать PR после каждой синхронизации в разделе Настройки → Пул-реквесты. Кнопка Создать PR тогда скрывается.

Переименованная в Figma иллюстрация сохраняет свой node ID, поэтому приходит как переименование, а не как удаление и новый файл. Каждое изменение можно посмотреть в библиотеке до pull request: см. Проверка изменений и pull request.

См. также

• Иконки в React
• Проверка изменений и pull request
• Подключение репозитория