# Fiche de spécifications responsive Figma iOS Android pt dp sp Convertit les valeurs px Figma vers les bonnes unités par plateforme et génère une spec card développeur : pt iOS (@1x/@2x/@3x avec px rendus par échelle), dp/sp Android (table de rendu mdpi…xxxhdpi et échelle de police), rem/vw web avec extrait clamp() fluide ; audit des cibles tactiles minimales (44pt iOS / 48dp Android / 44px et 24px WCAG) avec classes de fenêtres Material et breakpoints Tailwind. > Page canonique: https://elysiatools.com/fr/tools/figma-ios-android-pt-dp-sp-responsive-design-spec-card - **Catégorie:** Design - **Mots-clés:** figma vers code, pt, dp, rem, cible tactile, densités ## Présentation Constantes vérifiées : pt iOS = px ÷ échelle (@1x=1/@2x=2/@3x=3, base historique 163 ppi) ; dp Android = px ÷ densité (mdpi 160=1x, hdpi 240=1.5x, xhdpi 320=2x, xxhdpi 480=3x, xxxhdpi 640=4x), sp ajoute l'échelle de police utilisateur (paliers 0.85/1.0/1.15/1.3, Android 14+ non linéaire jusqu'à 200 %) ; web rem = px ÷ racine (16 px par défaut), vw = px ÷ viewport × 100, clamp(MIN, VAL, MAX) = max(MIN, min(VAL, MAX)). Cibles tactiles : Apple HIG 44×44pt, Material 48×48dp, WCAG 2.5.5 (AAA) 44×44 px CSS, WCAG 2.5.8 (AA) 24×24 px CSS. Responsive : classes de fenêtre Material compact <600dp / medium 600–839dp / expanded ≥840dp ; breakpoints Tailwind 640/768/1024/1280/1536px. ## Entrées - **Valeur px Figma** (number): e.g. 48 - **Facteur d'échelle du design** (select) - **Rôle de l'élément** (select) - **Police racine (px)** (number) - **Largeur du viewport (px)** (number) ## Quand l'utiliser - Transmettre aux développeurs les unités logiques d’un élément conçu dans Figma. - Vérifier qu’un bouton ou un contrôle respecte les dimensions tactiles minimales d’iOS, Android et WCAG. - Préparer une spécification responsive avec rem, vw, clamp(), classes de fenêtres Material et breakpoints Tailwind. ## Fonctionnement - Saisissez la valeur Figma en px, puis choisissez l’échelle du design : 1x, 2x ou 3x. - Sélectionnez le rôle de l’élément : dimension générale, cible tactile ou taille de texte. - Indiquez si nécessaire la taille de police racine et la largeur du viewport. - La fiche affiche les conversions par plateforme, les rendus par densité, les unités Web et l’audit tactile. ## Cas d'usage - Créer une spec card claire pour livrer une interface Figma aux équipes iOS, Android et Web. - Contrôler les dimensions de boutons, liens et commandes avant une revue d’accessibilité. - Comparer une mise en page conçue en 1x, 2x ou 3x avec les densités d’écran et les paliers responsive. ## Questions fréquentes ### Quelle valeur faut-il saisir ? Saisissez la valeur en pixels issue de votre design Figma, entre 0,5 et 10 000 px. ### Comment la valeur iOS en pt est-elle calculée ? La valeur px est divisée par l’échelle choisie : 1 pour @1x, 2 pour @2x ou 3 pour @3x. ### Comment la valeur Android en dp est-elle calculée ? La valeur logique est présentée selon les densités Android, de mdpi à xxxhdpi, avec les rendus px correspondants. ### Quelles cibles tactiles sont vérifiées ? La fiche compare la dimension aux minima de 44pt iOS, 48dp Material et 44px ou 24px selon les critères WCAG. ### À quoi servent la police racine et le viewport ? La police racine sert à calculer rem, tandis que la largeur du viewport sert à calculer vw et les valeurs fluides. ## Outils associés - [Comparateur d’algorithmes de hachage](https://elysiatools.com/fr/tools/hash-algorithm-comparator): Hache la même entrée avec MD5, SHA-1, SHA-256, SHA-512, BLAKE2b et BLAKE3 et les compare : longueur, digest hex/Base64, statut de sécurité (cassé/moderne) et benchmark de vitesse relatif. Idéal pour l’enseignement, le choix d’algorithme ou la vérification de checksums. - [Décomposeur d'arbre OKR & KPI](https://elysiatools.com/fr/tools/okr-tree-decomposer): Décompose un Objective d'entreprise en Département → Équipe → Personnel, avec poids/cible/actuel par nœud ; la progression pondérée remonte. Arbre visuel + Markdown. - [Calculateur du Trou Anionique Sérique (AG)](https://elysiatools.com/fr/tools/anion-gap-calculator): Calcule le trou anionique sérique AG = Na⁺ − Cl⁻ − HCO₃⁻ (mmol/L), avec en option la formule avec K⁺ et la correction par l'albumine. AG élevé (≈ >12) oriente vers une accumulation d'anions non mesurés (lactate, corps cétoniques, méthanol/éthylène glycol, salicylés, insuffisance rénale ; moyen mnémotechnique GOLD-MARK). Une acidose métabolique à AG normal (8–12) est hyperchlorémique : diarrhée, acidose tubulaire rénale, perfusion de salé. Un AG bas (<3–6) est le plus souvent lié à une hypoalbuminémie ; également hypercalcémie/hypermagnésémie, lithium, myélome à IgG (paraprotéines cationiques), bromure/pseudo-hyperchlorémie. En cas d'hypoalbuminémie, utiliser la correction AG_corr = AG + 2.5×(4.0 − albumine). Sources : Kraut CJASN 2007, Figge 1998, MDCalc. Interpréter avec gaz du sang et clinique. Non un avis médical. - [Liste indentée vers arbre ASCII](https://elysiatools.com/fr/tools/ascii-tree-from-indented-list): Transforme une liste hiérarchique indentée (2/4 espaces ou tabulation ; préfixes -, *, 1. facultatifs) en arbre ASCII copiable. Deux styles : cadre Unicode et ASCII classique. Options : lignes guides complètes, espaces de fin, feuilles entre crochets. - [Générateur de Data URI](https://elysiatools.com/fr/tools/data-uri-generator): Convertit les fichiers en Data URI (Base64 ou pourcentage-encodé) pour intégrer images, polices et ressources directement dans HTML, CSS ou Markdown - [Convertisseur de PDF chiffre](https://elysiatools.com/fr/tools/encrypted-pdf-converter): Ouvre des PDF proteges avec le bon mot de passe et les exporte en Markdown, JSON ou texte - [Linéariseur reproductible de Jupyter Notebook](https://elysiatools.com/fr/tools/jupyter-notebook-to-reproducible-script-linearizer): Convertit .ipynb en script Python avec # %% et détecte les états désordonnés, cachés ou supprimés - [Convertisseur Markdown en PDF](https://elysiatools.com/fr/tools/markdown-to-pdf-converter): Convertir les fichiers Markdown en documents PDF avec formatage, coloration syntaxique et style ## Exemples - [Exemples de Traitement d'Images Android Java](https://elysiatools.com/fr/samples/android-image-processing-java): Exemples de traitement d'images Android Java incluant lecture/écriture, mise à l'échelle et conversion de format - [Exemples de Traitement d'Images Android Kotlin](https://elysiatools.com/fr/samples/android-image-processing-kotlin): Exemples de traitement d'images Android Kotlin incluant lecture/écriture, mise à l'échelle et conversion de format - [Exemples d'Opérations sur Fichiers Android Java](https://elysiatools.com/fr/samples/android-file-operations-java): Exemples d'opérations sur fichiers Android Java incluant lecture/écriture de fichiers texte, copier/déplacer, parcours de répertoires et validation de fichiers - [Exemples d'Opérations sur Fichiers Android Kotlin](https://elysiatools.com/fr/samples/android-file-operations-kotlin): Exemples d'opérations sur fichiers Android Kotlin incluant lecture/écriture de fichiers texte, copier/déplacer, parcours de répertoires et validation de fichiers ## Contenu associé - [Outils de conversion de casse, d’encodage et de normalisation de texte](https://elysiatools.com/fr/hubs/text-convert): Comparez les outils de conversion de casse, de largeur de caractères, d’encodage, de quoted-printable et de normalisation de texte dans un hub unique. - [Outils d’export, d’OCR et de conversion Markdown](https://elysiatools.com/fr/hubs/markdown-convert): Comparez les outils Markdown vers PDF, PDF vers Markdown, OCR, export de diaporama et conversion structurée de Markdown dans un hub unique pour les workflows de publication documentaire. - [Outils Text](https://elysiatools.com/fr/hubs/text-utility): Découvrez 33 outils text pour des workflows de utility et comparez rapidement des utilitaires proches. - [Outils d’analyse de texte, de lisibilité et d’inspection de contenu](https://elysiatools.com/fr/hubs/text-analyze): Comparez statistiques de texte, détection de langue, score de lisibilité, analyse de sentiment, revue de modération et analyse de motifs dans un hub unique.