Con el fin de Q2 vuelven los vídeos al canal. Semana que viene el próximo 😅

Esta colección de iconos open source Mage Icons, me gusta mucho... https://mageicons.com/
Buenos recursos para tus proyectos.

Ahí vamos... 🙂 https://www.instagram.com/p/CufX53isREP/

A lo largo del día subiré el tutorial completo al canal de YouTube.
Buena semana equipo! 🙂

En este tutorial de Figma, te enseñaré cómo crear un componente de barra de búsqueda que podrás descargar y usar en tus proyectos de diseño de interfaz y experiencia de usuario.

https://youtu.be/Pwq4c--xZ9U

Este componente es muy útil para diseñadores y desarrolladores que buscan crear interfaces de usuario intuitivas y atractivas. Con él, podrás crear un buscador personalizado que se adapte a las necesidades de tu proyecto.

La barra de búsqueda es muy importante en cualquier proyecto de diseño UX y UI. Con ella, los usuarios pueden buscar información específica en un sitio web o aplicación móvil. Además, un searchbar bien diseñado puede mejorar la experiencia del usuario y hacer que un proyecto sea más fácil de usar.

En este vídeo te explicaré paso a paso cómo crear el componente botón, con las 4 variantes que necesitará esta primera versión del buscador.

Aprenderás a crear componentes reutilizables que te ahorrarán tiempo y esfuerzo en tus proyectos futuros.

Espero que disfrutes del tutorial y que puedas aplicar lo que aprendas aquí. Si tienes alguna pregunta adelante, deja un comentario, me encantará leer y responder tu inquietud.

¡Gracias de antemano por tu feedback!

Nos vemos en la segunda parte ❤️

👉 Entre hoy y mañana llega el segundo vídeo dedicado a la construcción del componente search bar https://www.juanpol.com/como-crear-barra-busqueda-figma/

✅ En este tutorial de #figma te voy a explicar cómo diseñar un buscador https://lnkd.in/dzF8Fxms

✅ Mañana publicaré el vídeo final para diseñar el componente Search bar. He retomado el ritmo habitual del canal. Gracias por la paciencia 🙏

✅ Publico la tercera parte del tutorial de Figma https://lnkd.in/dGJ_gsNv para crear un componente buscador con 4 variantes, listo para descargar y usar en tus proyectos de UXdesign

📌 Te dejo el índice de la clase:

00:00 - Avance
00:08 - Presentación
00:29 - Cómo crear la base del componente de buscador (Auto Layout, definir dirección, alineación, espacio entre elementos, padding, comportamiento horizontal del campo de búsqueda y selección de iconos para los botones)
02:56 - Crear la primera variante del componente search bar (Ocultar botón derecho y ajustar padding right)
03:37 - Duplicar la segunda variante y hacer cambios en ella para obtener la tercera (Ocultar botón izquierdo, hacer visible el layer con el botón derecho y ajustar padding left y right)
04:08 - Crear la cuarta variante (Ocultar botones y ajustar padding left, right, top y bottom)
04:45 - Seleccionar las 4 variantes y crear un Component set (Renombrar componente y editar nombre de la propiedad "Type")
05:31 - Editar el nombre de las variantes: "Simple", "Left icon", "Right icon" y "Two icons"
06:15 - Arrastrar al canvas una instancia del componente buscador (Probar cambio de variantes desde el siderbar derecho)
06:38 - Cómo cambiar el orden de las variantes de un componente, desde el modal que se abre con el icono Edit property
07:58 - Cómo crear un wireframe para probar el componente (Ajustar alineación y editar valores de Constraints)
11:25 - Cómo descargar y duplicar el componente para usarlos en tus proyectos
12:18 - Saludo final

Si tienes alguna pregunta adelante, deja un comentario, me encantará leer y responder tu inquietud.

Gracias de antemano por tu feedback!

Nos vemos en otro tutorial ❤️

Hola equipo, como termináis el viernes?
Yo con la tarea cumplida, ya tengo grabado y editado el tutorial que en este caso publicaré el domingo.
Si tenéis alguna otra sugerencia de día, decídmelo y lo contemplaré.
Gracias y buen fin de semana! ❤

Hola equipo, buenas tardes!
Lo prometido... aquí tenéis el tutorial se se estrena mañana lunes https://youtu.be/FsOSMj1EkJc
Terminad bien el fin de semana!
😘

✅ Te dejo un clip del tutorial que compartí esta mañana en el canal, este vídeo forma parte de un post publicado en mi blog https://youtu.be/FsOSMj1EkJc

🔥 ¡Basta de procrastinar Juan!
Acabo de reactivar mi newsletter semanal.
Si estás dentro, lo recibirás.

📌 Las tareas de un design system, mantén informado a tu equipo UX/UI https://www.juanpol.com/tareas-design-system/

📌 Te voy a explicar cómo documentar componentes de Figma https://www.juanpol.com/como-documentar-componentes-figma/

Este artículo es la continuación del post donde te conté los pasos que doy para informar a mi equipo #uxui sobre las tareas que realizo para construir y mantener un design system.

📌 Nuevo post: aprende todos los pasos para diseñar en Figma con Material Design 3. https://www.juanpol.com/material-design-figma/

Instala el kit oficial y Material Theme Builder.

📌 ¿Cómo organizo mi sistema de diseño? https://www.juanpol.com/organizacion-design-system/

Aprende a trabajar la organización de un design system con este caso real.

Mañana mandaré al newsletter un correo con consejos para presentar un diseño a un stakeholder.

🤐 También te pasaré algunos trucos que no te cuentan.

Y una cosa más, en el mismo correo adjuntaré una foto que sólo la podrás ver allí.

Me la mandó un suscriptor y... en fin, no comments... 😅

Si quieres recibir el mail déjame un comentario y te lo mando.

Gracias.

📌 Cómo presentar una propuesta de diseño
👉 Trucos para hacer una presentación exitosa
👉 Consejos para hablar con stakeholders

https://www.juanpol.com/como-presentar-diseno/

Ojito, que el post que estoy escribiendo sobre Data Driven Design tiene mucha chicha.