Cuando tienes una identidad corporativa con variedad de recursos gráficos es muy interesante generar un estampado para poder utilizarlo en alguna sección de tu web, en redes sociales e incluso en tus tarjetas de visita.
En este post aprenderás a hacer un estampado con Figma, así que ya no tienes excusa.
Ya verás que crear estampados es muy rápido y sencillo, y una vez lo tengas listo no vas a poder dejar de utilizarlo para todo. Queda bien en todo, ¡no vas a poder parar de aplicar el estampado!
Si ya estás listo ¡vamos a empezar con nuestro estampado!
PASO 1: Entrar en Figma y crea un archivo nuevo
Lo primero que debes hacer es abrir Figma y seleccionar en “+New” → “Design file”, como explicamos en el post anterior.
Una vez tengas el archivo abierto cambia el nombre a Estampado 01, por ejemplo, y crea un frame cuadrado.
Piensa que según las medidas que le pongas al archivo, el estampado quedará más pequeño o más grande. Ya que cuando lo dupliques, si es más pequeño se repetirá más veces y no se verá el estampado tan grande.
En este caso yo lo haré de 480px.
PASO 2: Crea tu composición
Este es el momento de crear tu composición con los recursos que tengas para tu estampado. Diseña dentro del frame cómo quieres que se vean los elementos que van a repetirse a lo largo del pattern.
La composición debe estar a tu gusto. Más recargada o menos, con mucho color o con poco. Lo que tú prefieras y vaya más acorde a tu identidad.
Como decía, puedes crear la composición que más te guste, pero ten en cuenta que no puede quedar ningún objeto cortado en los laterales, porque eso provocaría que no funcionara bien el pattern.
PASO 3: Duplicar el frame
En este momento debes duplicar el frame en todas las direcciones para comprobar que no queda ningún hueco extraño.
Para duplicar un frame debes hacer clic sobre el nombre “frame 1” y manteniendo pulsado el frame y pulsando Option + Shift en mac y Alt +Shift en pc mover hacia la dirección que nos interese.
En caso de que quede algún hueco, borra las duplicaciones y rellena los huecos.
Y repite el proceso hasta que te guste el resultado.
PASO 4: Crear el frame definitivo
Una vez tienes tu composición creada debes duplicar el frame tres veces más a la derecha.
Para unificar estos cuatro frames en un único clica encima del frame 1, y coloca el cursor sobre el lateral derecho, clica y manteniendo clicado y pulsando Command en mac (Ctrl en pc) desplázate hasta el final del frame 4 y suelta el frame.
En este caso si has hecho el frame inicial de 480px, este frame debería quedarte de 1920px, que es un buen ancho para utilizar en diseño web.
Ahora debes pasar el contenido de los otros frames al frame 1. Puedes seleccionar el primer elemento de tu frame 2 en la barra lateral izquierda y manteniendo “shift” pulsado seleccionas el último elemento de dentro de tu frame y ya los tienes todos seleccionados para pasar al frame uno. Haz clic sobre la selección y arrástrala al frame uno. Una vez hecho esto con todo el contenido de los frames 2, 3 y 4 ya podrás eliminarlos.
¡Y listo! ya tienes tu estampado para utilizar como fondo de una sección de tu web.
PASO 5: Aplicar el estampado en una sección de tu web
Decide dónde puede quedar bien tu estampado y utilízalo. Ya sea de fondo entero, de fondo de media sección con un filtro encima o incluso para acompañar a una foto.
Y hasta aquí el tutorial para hacer estampados en Figma. Espero que te sirva para tus futuras secciones de la web y que le saques partido.
¡Puedes comentarnos en el post si ya habías hecho estampados o si te parece interesante!
Si te gustan los estampados también tenemos un post para aprender a crear un estampado en Photoshop que te puede interesar. Y si quieres que te ayudemos con tu web y aplicar tus estampados puedes comprar una de nuestras webs prediseñadas para adaptar tu diseño aquí.
Muy bien explicado todo paso a paso! Me ha servido de mucha ayuda tu tutorial! saludos
Gracias Ignacio 🙂