Figma ↔ SwiftUI

Traduction bidirectionnelle entre les designs Figma et le code SwiftUI. Ce fichier est un routeur — les consignes réelles se trouvent dans les références ci-dessous.

Choisir la direction

Si la demande est ambiguë — une URL Figma et des fichiers .swift présents, aucun verbe qui clarifie — demande à l'utilisateur la direction avant de charger une référence.

Contexte partagé (s'applique aux deux directions)

Ces points valent indépendamment de la direction ; les références spécifiques à une direction les supposent.

1. get_design_context est l'outil de lecture pour Figma. Passe clientLanguages: "swift" et clientFrameworks: "swiftui" pour que la réponse soit structurée pour Swift. URL → arguments de l'outil : figma.com/design/:fileKey/:fileName?node-id=:nodeId → utilise fileKey, remplace - par : dans nodeId. Pour figma.com/design/:fileKey/branch/:branchKey/:fileName, utilise branchKey comme fileKey.
2. Le React+Tailwind dans la sortie de get_design_context est une référence structurelle, pas une source littérale. Il approxime le visuel. Ne translittère jamais position: absolute / frames en pixels / piles de mix-blend-mode dans SwiftUI ou dans Figma — la capture d'écran est la source de vérité dans les deux directions.
3. Les couleurs sémantiques iOS HIG sont des tokens, pas du hex. var(--backgrounds/primary, …), var(--labels/secondary, …), var(--separators/non-opaque, …) etc. correspondent à Color(.systemBackground), Color.secondary, Color(.separator) en SwiftUI, et à des variables dans une collection sémantique dans Figma. Conserve le mappage ; supprime le RGBA littéral.
4. Les SF Symbols font l'aller-retour par nom dans les deux directions — jamais par codepoint. Design → code : get_design_context remplace les glyphes SF Symbol de Figma par des wrappers <SFSymbol>{Image(systemName: "...")}</SFSymbol> dans la réponse. Utilise ces noms verbatim. Code → design : appelle figma.util.getSfSymbolCharacter(name) dans use_figma pour convertir un nom de symbol en le caractère correspondant — ne cherche jamais les codepoints à la main.
5. Reconnais le pattern iOS sous-jacent, pas le nom littéral du nœud / de la view. Les mêmes patterns se répètent dans les deux directions : grand titre + chevron retour + action trailing = chrome de NavigationStack ; rangée basse de paires icône+label = TabView ; rangées répétées de même hauteur avec chrome leading/trailing = List. Fais correspondre ces patterns système plutôt que de les reconstruire à partir de primitives.
6. Pour code → design, use_figma est l'API. Charge toujours figma-use avant tout appel use_figma. Si la tâche implique de construire un écran complet, charge aussi figma-generate-design ; si elle implique de construire des composants ou un système de design, charge aussi figma-generate-library.

Références