Convertir capturas de pantalla en vectores: maquetas UI y rediseños de apps
Transforma capturas de pantalla de aplicaciones en maquetas vectoriales editables. Perfecto para propuestas de rediseño, presentaciones y portfolios UI/UX.
Founder of VectoSolve
Self-taught developer, founder and sole developer of VectoSolve since 2024. He builds the conversion engine and the cutting, embroidery and 3D printing exports.
How this article was made: drafted with AI assistance, then edited and fact-checked before publication. About the author
Por qué los diseñadores UI/UX vectorizan capturas de pantalla
Todo diseñador tiene una carpeta de capturas — apps que admira, patrones UI que vale la pena estudiar. El problema: las capturas son píxeles congelados. No puedes descomponer los espaciados, intercambiar paletas ni integrar elementos en tus propias composiciones.
Cuando vectorizas una captura de pantalla, transformas una captura raster estática en geometría editable y escalable. Ese layout de tarjeta de la app de un competidor se convierte en algo que puedes medir y deconstruir en Figma.
Tableros de inspiración que funcionan. Las capturas vectorizadas permiten extraer componentes individuales — un patrón de navegación aquí, un estilo de botón allá — y remixarlos en nuevos conceptos.
Análisis competitivo con fundamento. UI vectorizadas lado a lado con tus diseños propuestos lucen infinitamente más pulidas que pegar capturas borrosas en un deck.
Propuestas de rediseño sin archivos fuente. Raramente consigues los archivos Figma de un cliente antes de ganar el proyecto. Vectorizar su UI actual te da un punto de partida funcional.
Workflow paso a paso: captura a vector editable
Paso 1: Capturar a la mayor resolución
En macOS, usa Cmd+Shift+4 en una pantalla Retina para una captura 2x. En Windows, configura la escala de pantalla al 100% y usa ShareX configurado para PNG sin comprimir.
Captura siempre en pantalla Retina/HiDPI. Una captura 2x le da al vectorizador cuatro veces más datos de píxeles para la detección de bordes. Si solo tienes una pantalla estándar, escala primero — la diferencia es medible.
Paso 2: Recortar al área relevante
No vectorices la pantalla entera por un solo componente. Recortar enfoca la IA en los elementos importantes y produce un SVG más limpio.
Paso 3: Escalar si es necesario
Las capturas de menos de 1440px de ancho o en DPI estándar se benefician de un pase previo por el escalador IA.
Paso 4: Vectorizar
Sube a VectoSolve. La IA reconoce botones, contenedores, bloques de texto y elementos de navegación. Descarga el SVG.
Paso 5: Importar a Figma y refinar
Arrastra el SVG a Figma, desagrupa las rutas, organiza en frames que coincidan con la jerarquía UI, y reemplaza el texto trazado por capas de texto reales.
Comparación por tipo de fuente
| Tipo de fuente | Mejor enfoque | Calidad esperada | Post-procesado |
|---|---|---|---|
| UI Flat/Material | Vectorización directa | Excelente — formas limpias | Mínimo: reagrupar, corregir texto |
| iOS/macOS nativo | Escalar primero | Muy buena | Moderado: reconstruir sombras |
| Glassmorphism | Vectorizar + trabajo manual | Regular — efectos perdidos | Considerable: recrear blur/transparencia |
| Dashboard/datos | Recortar secciones individualmente | Buena para layout | Moderado: reconstruir gráficos |
| Interfaces con muchos iconos | Vectorización directa | Excelente | Ligero: organizar y nombrar capas |
Calidad según resolución
1x (DPI estándar, ~72-96 PPI): Los bordes aparecen escalonados, el vectorizador adivina dónde caen las curvas. Las formas grandes son aceptables; iconos pequeños y bordes finos son toscos.
2x (Retina/HiDPI, ~144-192 PPI): El punto óptimo. La detección de bordes es precisa, las curvas son suaves, incluso iconos de 16px producen rutas utilizables.
3x+ (ultra-alta o escalada): Rendimientos decrecientes pero beneficioso para interfaces detalladas.
Workflow de importación a Figma
- Arrastra el SVG a Figma — se importa como un grupo único
- Desagrupa (Cmd+Shift+G) para acceder a las rutas individuales
- Crea un frame con las dimensiones de la captura original
- Organiza las capas: Header, Nav, Contenido, Tarjetas, Footer
- Reemplaza el texto trazado por capas de texto con las fuentes correctas
- Reconstruye degradados/sombras con los efectos nativos de Figma
- Crea componentes a partir de los elementos repetidos
Casos de uso
Pitch decks y propuestas a clientes
Mostrar la UI actual de un cliente como arte vectorial limpio junto a tus mejoras propuestas demuestra que has hecho tu investigación.
Casos de estudio y portfolio
Los estados «antes» vectorizados lucen dramáticamente más profesionales que las capturas raster. Escalan perfectamente para Behance, portfolios impresos y slides de conferencias.
Propuestas de rediseño
Vectoriza el estado actual, duplica el artboard, modifica. Como partiste de proporciones reales, tu rediseño mantiene una relación creíble con la realidad.
Documentación de guía de estilo
Vectorizar varias pantallas y comparar componentes extraídos es una de las formas más rápidas de auditar qué se está desplegando realmente versus qué hay en el design system.
Empieza a vectorizar tus capturas de pantalla UI y transforma tu colección de referencias en un recurso de diseño editable.