Плагин для экспорта скриншотов из Figma напрямую в GitHub / Gitea или в локальный ZIP-архив с правильной структурой папок для App Store и Play Market.
Разработан для внутреннего использования в компании.
- Экспортирует скриншоты из Figma в формате PNG и раскладывает по нужным папкам — под каждый магазин своя структура
- Загружает напрямую в Git (GitHub или Gitea) одним коммитом, без промежуточного сохранения на диск
- Скачивает ZIP с готовой структурой папок для ручной выгрузки
- Автоматически определяет магазин по названию Figma-файла (например
Screenshots for App Store 6.0) - Автоматически определяет локали по названиям страниц — поддерживает русские, английские и нативные названия языков
- Сжимает PNG перед отправкой — три режима: без сжатия, lossless repack, posterize + smart dithering (~30–40% экономии)
- Поддерживает обязательные и дополнительные локали — дополнительные определяются, но не включаются автоматически
store-screenshots-uploader/
├── manifest.json — регистрация плагина в Figma (имя, размер окна, точки входа)
├── code.ts — логика плагина: читает страницы и фреймы Figma, экспортирует PNG
├── code.js — скомпилированная версия code.ts (создаётся командой tsc)
└── ui.html — интерфейс плагина: локали, сжатие, загрузка, лог
Figma запускает
code.js(не.ts). Файлcode.tsнужно компилировать перед каждым изменением.
-
Node.js — нужен для компиляции TypeScript. Проверь, установлен ли:
node -vЕсли команда не найдена — скачай с nodejs.org (рекомендуется LTS-версия) и установи.
-
Figma Desktop — плагин работает только в десктопном приложении, не в браузере.
Скачай или клонируй репозиторий:
git clone https://github.com/your-org/store-screenshots-uploader.gitИли скачай ZIP через кнопку Code → Download ZIP на странице репозитория и распакуй в удобное место.
Вариант A — если терминал открыт внутри папки (например, через правую кнопку мыши → «Открыть в терминале»):
npm install -g typescript
tsc code.ts --target ES2017 --lib ES2017,DOMВариант B — если терминал открыт через меню Пуск или стандартно:
cd C:\путь\до\папки\store-screenshots-uploader
npm install -g typescript
tsc code.ts --target ES2017 --lib ES2017,DOMПосле выполнения в папке появится файл code.js — он нужен Figma для работы плагина.
npm install -g typescriptнужно выполнить только один раз. При последующих измененияхcode.tsдостаточно повторно запускать толькоtsc code.ts --target ES2017 --lib ES2017,DOM.
- Открой Figma Desktop
- В главном меню выбери Plugins → Development → Import plugin from manifest...
- В открывшемся диалоге выбери файл
manifest.jsonиз папки плагина - Плагин появится в разделе Plugins → Development
После любых изменений в
ui.htmlилиcode.ts(с последующей компиляцией) — достаточно закрыть и снова открыть плагин в Figma, перезапускать импорт не нужно.
Плагин ожидает определённую структуру файла:
App Store:
- Каждая страница = одна локаль (например
ru,en-US,Deutsch) - На странице лежат фреймы с именами вида
0_APP_IPHONE_65_0,0_APP_IPAD_PRO_129_0и т.д.
Play Market:
- Каждая страница = одна локаль
- На странице фреймы сгруппированы в секции:
ANDROID PHONE,ANDROID TAB 7 INCH,ANDROID TAB 10 INCH,ANDROID TV,FEATUREGRAPHIC
- Открой нужный Figma-файл и запусти плагин (Plugins → Development → Store Screenshots Uploader)
- Плагин автоматически определит магазин по названию файла и предложит маппинг страниц на локали
- При необходимости скорректируй маппинг вручную или нажми 🔍 Авто для повторного определения
- Выбери куда загружать: GitHub, Gitea или ZIP
- Настрой сжатие (или оставь по умолчанию)
- Нажми 🚀 Экспорт
Переключение между App Store и Play Market. Определяется автоматически по имени файла, можно переключить вручную.
| Режим | Что нужно |
|---|---|
| GitHub | URL сервера, Owner, Repo, ветка, Personal Access Token (scope: repo) |
| Gitea | URL сервера, Owner, Repo, ветка, токен (repo read/write) |
| ZIP | Ничего — файл скачается сразу |
Таблица «Страницы → Локали» показывает все страницы файла. Обязательные локали (есть в репо) включаются чекбоксом автоматически. Дополнительные локали (ar-SA, hy, bg, si, pl) — определяются, но по умолчанию не включены, их нужно выбрать вручную.
| Метод | Описание |
|---|---|
| Без сжатия | PNG как есть из Figma |
| Lossless repack | Перепаковка без потерь через pako (~6%) |
| Posterize + Smart Dither | Квантование RGB + дизеринг на градиентах (~30–40%) |
featureGraphic для Play Market всегда сжимается только lossless — он выгружается в 1x и потери недопустимы.
Можно задать масштаб экспорта отдельно для iPhone (3x), iPad (2x) и по умолчанию.
mobile-store/documents-appstore/screenshots/{locale}/{frameName}.png
mobile-store/documents-playmarket/metadata/{locale}/images/
├── phoneScreenshots/
│ ├── 1_{locale}.png
│ └── ...
├── sevenInchScreenshots/
├── tenInchScreenshots/
├── tvScreenshots/
└── featureGraphic.png
cs de-DE en-US es-ES fr-FR it ja pt-BR ru zh-Hans
cs-CZ de-DE en-US es-ES fr-FR it-IT pt-BR ru-RU zh-CN
ar-SA hy / hy-AM bg si pl
Settings → Developer settings → Personal access tokens → Generate new token
Необходимые права: repo (полный доступ к репозиториям)
Settings → Applications → Generate New Token
Необходимые права: repository read + write
Figma Canvas (страницы = локали, фреймы = скриншоты)
│ exportAsync(PNG)
▼
Plugin Sandbox — code.ts / code.js
│ postMessage(bytes[])
▼
Plugin UI — ui.html
├── Сжатие PNG (lossless / posterize+dither)
├── GitHub API → коммит напрямую в репо
├── Gitea API → коммит напрямую в репо
└── ZIP → скачать архив локально