Componentes de Figma a partir de una importación: convierte una página de UnHTML Pro en estilos reutilizables

Lo que Pro ya convierte al importar

Conseguir componentes de Figma a partir de una importación ya no es una tarea manual, al menos no para la mayor parte de una página. Cuando ejecutas una importación con Pro, el plugin lee el CSS propio de la página y traduce el espaciado, el padding, el wrap y el comportamiento de stretch a auto layout: gap para la distancia entre objetos, padding para el espacio alrededor de ellos, y una dirección para el flujo vertical, horizontal o en grid. Las secciones cuya geometría no se puede reproducir con auto layout pasan solas a posicionamiento absoluto, así que un frame que no se puede representar con limpieza no llega roto.

El mismo paso también resuelve dos cosas que normalmente hacen los diseñadores a mano. El texto repetido (encabezados, cuerpo, subtítulos) se convierte en text styles compartidos, así que editar un estilo actualiza cada capa que lo usa. Y los elementos visuales repetidos (tarjetas, elementos de navegación, bloques de testimonios) se convierten en componentes reales con instancias y variantes, siguiendo el mismo modelo de componente principal e instancia que usa Figma de forma nativa: el componente principal guarda la fuente de verdad, y las instancias son copias vinculadas que heredan sus actualizaciones.

Pro es deliberadamente conservador con esta segunda parte. Si reemplazar una repetición por una instancia moviera su posición o alterara el layout capturado de la página, Pro la deja como frame simple en vez de forzar un componente que se desviaría del original. Ese es el vacío que cubre este artículo: encontrar lo que quedó como frame simple, y terminar el trabajo a mano.

Si todavía no hiciste la importación, revisa cómo importar un sitio en React o Vue a Figma para el paso de captura que viene antes de todo esto.

Ayuda pensar la importación como dos pasadas en vez de una. Pro se encarga de la primera por su cuenta: lee la geometría, observando cómo se organizó cada frame de la página en CSS, y la reproduce con gap, padding y una dirección que reflejan el comportamiento de flexbox y grid. La segunda pasada, la que cubre este artículo, tiene que ver con nombrar y reutilizar: convertir una geometría que ya funciona en estilos y componentes que un equipo pueda mantener de verdad. Si te la saltas, terminas con un archivo que se ve bien el día de la importación y se vuelve más difícil de editar cada día después.

Paso 1: revisa el reporte de importación para ver qué quedó como frames simples

Cada importación con Pro incluye un reporte de importación junto al archivo. Ahí se listan todas las sustituciones de fuente (una fuente faltante reemplazada por Inter por defecto, registrada para que nada cambie en silencio) y se marca qué secciones repetidas se convirtieron en componentes y cuáles quedaron como frames simples.

Abre primero el reporte, antes de tocar el lienzo. Compara las secciones marcadas con las repeticiones visuales de la página: grillas de tarjetas, niveles de precio, filas de testimonios, columnas de enlaces del footer. Son los lugares con más probabilidad de haber quedado como frames a propósito, y también donde una pasada manual rinde más rápido, ya que arreglar una plantilla de tarjeta actualiza cada tarjeta en cuanto se convierte en instancia.

No asumas que una sección quedó fuera por error. El reporte existe justamente para distinguir entre "Pro no pudo reproducir este layout" y "Pro no lo intentó porque un componente lo habría movido".

Vale la pena anotar dos listas antes de tocar el lienzo: las secciones marcadas como respaldo de posición absoluta, y las marcadas como frames simples a pesar de repetirse. La primera es un problema de layout, una sección cuyo CSS original no se pudo mapear con limpieza a auto layout, y arreglarla puede significar reconstruir la estructura de ese frame a mano. La segunda es un problema de nombres y componentización: secciones que ya están bien organizadas y solo necesitan convertirse en componentes reales. Los pasos 2 a 4 tratan sobre esa segunda lista. Trata la primera lista como una pasada separada y más pequeña, ya que forzar auto layout en un frame que de verdad no lo soporta produce el mismo tipo de desviación que Pro intentaba evitar desde el principio.

Paso 2: convierte en text styles el texto repetido que quedó pendiente

Para el texto que Pro no convirtió, normalmente encabezados únicos o texto que no se repitió lo suficiente como para marcarse, puedes aplicar el mismo tratamiento a mano. Selecciona una capa de texto, abre la sección de tipografía en la barra lateral derecha y crea un nuevo estilo. Nómbralo por rol y tamaño (Heading/Large, Body/Default, Caption/Small) en vez de por su posición en la página. El nombre es lo que va a ver tu equipo cuando elija un estilo dentro de seis meses, no de qué página vino.

Si una capa debe mantener su apariencia actual sin quedar ligada a un estilo compartido, separarla (detach) quita el vínculo con la definición del estilo pero conserva intactos los valores actuales de la capa. Eso importa cuando limpias una importación de forma selectiva: aplica un estilo para probarlo, y luego separa la única capa que necesita quedar un poco distinta sin tocar el resto.

Crear y editar estilos requiere acceso de edición en un plan de pago de Figma (Education, Professional, Organization o Enterprise). Quienes solo pueden ver el archivo pueden aplicar un estilo existente de una biblioteca compartida, pero no crear uno nuevo, algo que conviene saber antes de pasar el archivo a revisión.

Paso 3: convierte en componentes las secciones que Pro dejó pendientes a propósito

Este es el paso que convierte en componentes reales los frames simples marcados en tu revisión. Selecciona las capas que forman una sección repetida y elige Create component; Figma anida la selección dentro de un frame de componente, marcado con el ícono morado de componente en el panel de capas. Cuando varias secciones separadas necesitan el mismo tratamiento, tres niveles de precio, cinco tarjetas de testimonios, seleccionarlas todas y elegir Create multiple components convierte cada una en su propio componente en una sola pasada, en vez de repetir el flujo de selección individual sección por sección.

Ten presente la misma precaución de Pro mientras avanzas. Si convertir una repetición específica en instancia le cambiara la posición, o bien ajusta el frame para que la instancia encaje con limpieza, o deja esa repetición como frame y componentiza el resto. Un componente que hay que reacomodar después de cada uso es peor que un frame que simplemente se queda como frame.

Una vez que una sección es un componente real, el componente principal se convierte en el lugar donde haces cada edición futura: cambias el padding, cambias un ícono, ajustas el patrón del texto, y cada instancia del archivo lo recibe.

Presta atención a un caso particular que aparece mucho en páginas importadas: secciones que se ven idénticas pero que se construyeron con un marcado ligeramente distinto, una tarjeta con una insignia opcional, por ejemplo, frente a una sin ella. Forzar ambas dentro de un solo componente sin soporte de variantes hace que la insignia aparezca en todas las instancias o en ninguna. Las variantes de componente resuelven justo esto. Construye primero el componente base, y luego agrega una propiedad de variante (Badge: Yes/No) para que cada instancia pueda diferir de forma definida sin romper el vínculo con el componente principal. Es un paso extra al crearlo, y ahorra una reconstrucción más adelante cuando la página agrega una tercera variación que no habías previsto.

Paso 4: organiza el archivo para la entrega

Antes de publicar nada a una biblioteca de equipo, agrupa los text styles y componentes nuevos que acabas de crear y dales una convención de nombres que coincida con lo que Pro generó automáticamente, para que el archivo se lea como un solo sistema y no como dos. Un archivo componentizado y con estilos le da a un equipo un ciclo de edición más rápido que una importación cruda: un solo lugar para actualizar una sección repetida, un solo lugar para actualizar un rol de tipografía, un panel de capas que muestra estructura en vez de una pila plana de frames posicionados de forma absoluta.

Este es también el momento de decidir qué se queda local al archivo y qué pasa a una biblioteca compartida, ya que el acceso a la biblioteca sigue la misma regla de edición que crear estilos y componentes en primer lugar. Si tu equipo ya tiene una biblioteca de componentes para otro trabajo, este suele ser el momento de sumar los nuevos ahí, en vez de dejar la importación como su propia isla.

El paso de conversión de UnHTML Pro lleva la mayor parte de una página hasta este punto de forma automática. Lo que queda, casi siempre un puñado de secciones que la importación dejó de forma deliberadamente conservadora, es una pasada corta y mecánica, no un rediseño.

Conclusión

Una importación con Pro ya te entrega auto layout, text styles y componentes para la mayor parte de una página. El mapeo de CSS a auto layout y la pasada de componentización corren de forma automática, y el reporte de importación te dice exactamente dónde se detuvieron. Revisar ese reporte, terminar los text styles del texto que quedó pendiente, y convertir en componentes las secciones que Pro dejó a propósito como frames es lo que transforma el archivo de una captura fiel en algo con lo que tu equipo puede trabajar de verdad. Repite la misma pasada corta cada vez que vuelvas a importar una página que haya cambiado.