skills.rest
prof18
prof18COMMUNITY
Explore all skills by this author →
Website𝕏@marcoGomierGitHub

figma-screenshot-localization

Generates localized FeedFlow store screenshots in Figma by cloning ru-RU export frames and swapping text.

1.2k|63|Updated Feb 11, 2023
Search Tags:#Figma#App Store#png export#variable modes#Play Store#I18n#screenshot localization
One-click install
npx skills add https://github.com/prof18/feed-flow --skill figma-screenshot-localization
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-screenshot-localization
Source: https://github.com/prof18/feed-flow/tree/main/.ai/skills/figma-screenshot-localization
Command: npx skills add https://github.com/prof18/feed-flow --skill figma-screenshot-localization

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Creating App Store and Play Store screenshots for a new language normally requires manually duplicating dozens of Figma frames, retyping translated copy, and re-checking text wrapping per platform. This Skill automates that entire workflow inside the FeedFlow Screenshot Blueprint Figma file.

Core Features & Use Cases

  • Template-based cloning: Duplicates the proven ru-RU export frames (Montserrat font, tuned spacing) instead of the frozen English baseline, so font and spacing work is never redone.
  • Variable-driven translation: Adds a new locale mode to the Screenshot Copy variable collection and populates it from the repo's assets/screenshotcopy/<locale>/screenshot_copy.yml files.
  • Layout verification and export: Re-verifies wrapped text heights against per-platform spacing constants, fixes pill label clipping, and exports full-resolution PNGs organized by platform.
  • Use Case: A contributor finishes the Italian translation of screenshot copy; use this Skill to generate the complete it-IT screenshot set for Android, iPhone, iPad, Android Tablet, and macOS, zipped and ready for store upload.

Quick Start

Generate the it-IT localized store screenshots from the Figma blueprint file using the translations in assets/screenshotcopy/it/screenshot_copy.yml.

Frequently Asked Questions about figma-screenshot-localization

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I localize Figma store screenshots for a new language?▼

Add a new mode to the Screenshot Copy variable collection, populate it from the locale's screenshot_copy.yml, clone the ru-RU export frames per platform, bind the new wrapper to the new mode, then verify spacing and export PNGs per platform.

Why clone the ru-RU export instead of the English baseline in Figma?▼

The English boards use Poppins, which lacks Cyrillic glyphs and causes unreliable text measurement. The ru-RU export already uses Montserrat with corrected per-platform spacing, so cloning it avoids redoing font swaps and spacing math.

Does this workflow support languages like Japanese or Hebrew?▼

Not directly. Montserrat covers Latin and Cyrillic only. For scripts like CJK or Hebrew, pick a font with real coverage such as a Noto Sans family, verify wrap predictions against rendered screenshots, and re-derive the spacing constants.

What happens if a locale's screenshot_copy.yml is missing keys?▼

The workflow stops and reports the gap rather than inventing translations, since project i18n rules forbid machine-translating copy. Missing keys would silently fall back to English values in the new mode, shipping the wrong language.

Why do cloned Figma text nodes sometimes show wrong content?▼

A caching quirk can make a cloned node's characters reflect values written to the source node in later script calls. The reliable fix is to explicitly write every unbound text value after cloning instead of trusting inherited content.

How many languages can the Figma variable collection hold?▼

The Screenshot Copy collection is capped at 10 editable modes by the Figma plan, a hard API limit. With en-US and ru-RU already present, 8 more locales fit before a plan upgrade or mode deletion is required.

Related Skills

Explore More Design & Creative Skills→
kissMyApps-tlmkissMyApps-tlm

i18n

Manage react-i18next keys, namespaces, and translations with pnpm i18n.

Official
Intermediate
luisgustavooliveiraluisgustavooliveira

aso-audit

Audit app store listings and generate scorecards with recommendations.

Community
Advanced
jbarlek3-webjbarlek3-web

figma-use

Enforce loading the figma-use skill before invoking use_figma.

Community
Basic
hitoshura25hitoshura25
3

android-screenshot-automation

Automate Android app screenshot capture across locales with Fastlane Screengrab.

Community
Advanced