Su diseño de Figma montado en HTML y CSS: una página a partir de frames exportados, con versión para móvil

Ejemplo de resultado

Ejemplo del paquete EstándarVer completo

Página de inicio de una clínica dental creada a partir de su diseño

Antes: el diseño que envió el cliente

Después: la página funcionando

Archivos: un archivo ZIP con index.html, los estilos y 2 imágenes para la página, listo para subir al hosting del cliente. Las imágenes de aquí son capturas de pantalla de la página.

Cliente: Bright Smile Dental. Tarea: convertir el diseño de la página de inicio en una página HTML que funcione, con la misma estructura, los mismos colores y textos, y botones de cita que llaman a la clínica.

El cliente y todos los datos son ficticios.

Acerca de este servicio

Su diseño está listo en Figma y lo necesita como una página que funcione. Exporte los frames como PNG a 1x o 2x y súbalos, y los montamos en HTML y CSS: las mismas secciones, cuadrícula, espaciados, colores y botones, con texto real en lugar de una imagen de texto. Si tiene un frame para móvil, lo seguimos; si no, hacemos la versión para móvil a partir del frame de escritorio. No podemos abrir archivos .fig ni enlaces de Figma, así que no se leen las capas, los componentes, las variantes ni los enlaces del prototipo: lo que no se vea en la exportación, como los colores al pasar el ratón, va en el brief. Las fotos se dibujan de nuevo salvo que las suba. Sin animaciones, back end, CMS ni hosting.

Qué incluye

• Qué recibeUn archivo ZIP con las páginas, los estilos y las imágenes, listo para subir a su hosting, y una vista previa de cada página en la página del pedido.
• Fiel a sus framesSecciones, cuadrícula, espaciados, colores y tamaños de letra tal como se exportaron
• Versión para móvilA partir de su frame para móvil, o hecha desde el de escritorio
• Texto realTitulares y párrafos en HTML que los buscadores pueden leer
• Sus imágenes, si las envíaLas fotos e iconos exportados por separado se usan tal cual; el resto se dibuja de nuevo
• Código limpioHTML y CSS sencillos, sin frameworks, sin nada cargado desde otros sitios

Cómo funciona

1. 1
   ExportaciónUsted exporta los frames como PNG, los sube y anota lo que no se ve
2. 2
   CreaciónMontamos las páginas y dibujamos las imágenes que faltan
3. 3
   Vista previa y archivoUsted compara las páginas con su diseño en ordenador y en móvil, descarga el archivo y pide cambios dentro de su paquete

Qué necesitamos de usted

Hasta 5 imágenes en PNG, JPEG o WebP: frames exportados de Figma a 1x o 2x, una página por archivo, y, si lo desea, fotos, ilustraciones o su logotipo exportados por separado para usarlos tal cual. Indique qué frame corresponde a qué página, los nombres de las fuentes que usó, los estados al pasar el ratón o abiertos que no se vean en la exportación, y adónde lleva cada botón. No archivos .fig ni enlaces de Figma.

Le preguntaremos:

• ¿Qué frame corresponde a qué página?
• Fuentes del diseño
• Estados que no se ven en la exportación
• ¿Adónde lleva cada botón?
• ¿El diseño es suyo?

Comparar paquetes

Preguntas y respuestas

¿No encontró su respuesta? Pregúntenos