# Tarjeta de especificación responsive Figma iOS Android pt dp sp Convierte valores px de Figma a las unidades correctas por plataforma y genera una spec card para desarrolladores: pt de iOS (@1x/@2x/@3x con px renderizado por escala), dp/sp de Android (tabla de renderizado mdpi…xxxhdpi y escala de fuente), rem/vw web con snippet clamp() fluido; audita objetivos táctiles mínimos (44pt iOS / 48dp Android / 44px y 24px WCAG) y anota clases de ventana de Material y breakpoints de Tailwind. > Página canónica: https://elysiatools.com/es/tools/figma-ios-android-pt-dp-sp-responsive-design-spec-card - **Categoría:** Design - **Palabras clave:** figma a código, pt, dp, rem, objetivo táctil, buckets de densidad ## Descripción general Constantes verificadas: pt iOS = px ÷ escala (@1x=1/@2x=2/@3x=3, 163ppi histórico); dp Android = px ÷ densidad (mdpi 160=1x, hdpi 240=1.5x, xhdpi 320=2x, xxhdpi 480=3x, xxxhdpi 640=4x), sp añade la escala de fuente del usuario (paradas 0.85/1.0/1.15/1.3, Android 14+ no lineal hasta 200%); web rem = px ÷ raíz (16px por defecto), vw = px ÷ viewport × 100, clamp(MIN, VAL, MAX) resuelve max(MIN, min(VAL, MAX)). Objetivos táctiles: 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: clases de ventana Material compact <600dp / medium 600–839dp / expanded ≥840dp; breakpoints Tailwind 640/768/1024/1280/1536px. ## Entradas - **Valor px de Figma** (number): e.g. 48 - **Factor de escala del diseño** (select) - **Rol del elemento** (select) - **Fuente raíz (px)** (number) - **Ancho del viewport (px)** (number) ## Cuándo usarlo - Cuando necesitas entregar medidas de Figma a desarrolladores de iOS, Android y web. - Cuando quieres comprobar si un botón o control cumple los tamaños mínimos de objetivo táctil. - Cuando buscas adaptar una medida px a distintos factores de escala, densidades o tamaños de viewport. ## Cómo funciona - Introduce el valor px de Figma y selecciona la escala de diseño 1x, 2x o 3x. - Elige el rol del elemento: dimensión general, objetivo táctil o tamaño de texto. - Ajusta, si es necesario, la fuente raíz y el ancho del viewport para calcular rem y vw. - La herramienta genera una tarjeta HTML con conversiones de plataforma, tabla de densidades, valores responsive y comprobaciones táctiles. ## Casos de uso - Crear especificaciones de botones, iconos y componentes para equipos multiplataforma. - Convertir anchos y espaciados de diseños Retina a unidades lógicas de iOS, Android y web. - Revisar tamaños de texto y controles antes de implementar una interfaz responsive y accesible. ## Preguntas frecuentes ### ¿Qué unidades calcula la herramienta? Calcula pt para iOS, dp y sp para Android, y rem y vw para web. También genera un valor clamp() fluido. ### ¿Qué escalas de diseño puedo seleccionar? Puedes seleccionar 1x, 2x o 3x como factor de escala del diseño. ### ¿Qué valor de fuente raíz usa para rem? Usa 16 px por defecto, aunque puedes indicar una fuente raíz entre 8 y 32 px. ### ¿Qué comprueba la auditoría de objetivos táctiles? Compara la medida con los mínimos de 44 pt en iOS, 48 dp en Android y 44 px y 24 px CSS según WCAG. ### ¿Cómo se calcula vw? Se calcula dividiendo los px entre el ancho del viewport y multiplicando el resultado por 100. ## Herramientas relacionadas - [Comparador de algoritmos hash](https://elysiatools.com/es/tools/hash-algorithm-comparator): Aplica MD5, SHA-1, SHA-256, SHA-512, BLAKE2b y BLAKE3 a la misma entrada y compáralos lado a lado: longitud de salida, digest hex/Base64, estado de seguridad (roto/moderno) y benchmark de velocidad relativa. Útil para enseñanza, elegir algoritmo o verificar checksums. - [Descomponedor de árbol OKR y KPI](https://elysiatools.com/es/tools/okr-tree-decomposer): Descompone un Objective de empresa en Departamento → Equipo → Personal, con peso/meta/actual por nodo; el progreso ponderado sube al nivel superior. Árbol visual + Markdown. - [Calculadora de Anión Gap Sérico (AG)](https://elysiatools.com/es/tools/anion-gap-calculator): Calcula el anión gap sérico AG = Na⁺ − Cl⁻ − HCO₃⁻ (mmol/L), con opción de la fórmula con K⁺ y corrección por albúmina. AG elevado (≈ >12) sugiere acumulación de aniones no medidos (lactato, cuerpos cetónicos, metanol/etilenglicol, salicilatos, insuficiencia renal; nemotecnia GOLD-MARK). Acidosis metabólica con AG normal (8–12) es hiperclorémica: diarrea, acidosis tubular renal, infusión de salino. AG bajo (<3–6) suele ser hipoalbuminemia; también hipercalcemia/hipermagnesemia, litio, mieloma IgG (paraproteínas catiónicas), bromuro/pseudohipercloremia. En hipoalbuminemia use la corrección AG_corr = AG + 2.5×(4.0 − albúmina). Fuentes: Kraut CJASN 2007, Figge 1998, MDCalc. Interpretar con gases y clínica. No es consejo médico. - [Lista Indentada a Árbol ASCII](https://elysiatools.com/es/tools/ascii-tree-from-indented-list): Convierte una lista jerárquica indentada (2/4 espacios o tabulación; prefijos -, *, 1. opcionales) en un árbol de directorios ASCII copiable. Dos estilos: cuadro Unicode y ASCII clásico. Interruptores para líneas guía completas, espacios finales y hojas entre corchetes. - [Generador de Data URI](https://elysiatools.com/es/tools/data-uri-generator): Convierte archivos en Data URIs (Base64 o porcentaje-codificado) para incrustar imágenes, fuentes y recursos directamente en HTML, CSS o Markdown - [Convertidor de PDF cifrado](https://elysiatools.com/es/tools/encrypted-pdf-converter): Abre PDF protegidos con la contrasena correcta y los exporta como Markdown, JSON o texto - [Linealizador reproducible de Jupyter Notebook](https://elysiatools.com/es/tools/jupyter-notebook-to-reproducible-script-linearizer): Convierte .ipynb en scripts Python con # %% y detecta estado desordenado, oculto o eliminado - [Convertidor de Markdown a PDF](https://elysiatools.com/es/tools/markdown-to-pdf-converter): Convertir archivos Markdown a documentos PDF con formato, resaltado de sintaxis y estilo ## Ejemplos - [Ejemplos de Procesamiento de Imágenes Android Java](https://elysiatools.com/es/samples/android-image-processing-java): Ejemplos de procesamiento de imágenes Android Java incluyendo lectura/escritura, escalado y conversión de formato - [Ejemplos de Procesamiento de Imágenes Android Kotlin](https://elysiatools.com/es/samples/android-image-processing-kotlin): Ejemplos de procesamiento de imágenes Android Kotlin incluyendo lectura/escritura, escalado y conversión de formato - [Ejemplos de Operaciones de Archivos Android Java](https://elysiatools.com/es/samples/android-file-operations-java): Ejemplos de operaciones de archivos Android Java incluyendo lectura/escritura de archivos de texto, copiar/mover archivos, recorrido de directorios y validación de archivos - [Ejemplos de Operaciones de Archivos Android Kotlin](https://elysiatools.com/es/samples/android-file-operations-kotlin): Ejemplos de operaciones de archivos Android Kotlin incluyendo lectura/escritura de archivos de texto, copiar/mover archivos, recorrido de directorios y validación de archivos ## Contenido relacionado - [Herramientas de conversión de texto, codificación y normalización](https://elysiatools.com/es/hubs/text-convert): Compara conversión de mayúsculas y minúsculas, conversión de ancho de caracteres, conversión de codificación, manejo de quoted-printable y normalización de texto en un solo hub. - [Herramientas de exportación, OCR y conversión de Markdown](https://elysiatools.com/es/hubs/markdown-convert): Compara herramientas de Markdown a PDF, PDF a Markdown, OCR, exportación de diapositivas y conversión estructurada de Markdown en un solo hub para flujos de publicación técnica. - [Herramientas de Text](https://elysiatools.com/es/hubs/text-utility): Explora 33 herramientas de text para flujos de utility y encuentra utilidades cercanas con rapidez. - [Herramientas de análisis de texto, legibilidad e inspección de contenido](https://elysiatools.com/es/hubs/text-analyze): Compara estadísticas de texto, detección de idioma, legibilidad, análisis de sentimiento, revisión de moderación y análisis de patrones en un solo hub.