- 47
- 237 770
Mokkapp
Spain
เข้าร่วมเมื่อ 14 เม.ย. 2023
I'm a UI/UX designer and instructor with 7+ years of experience. In this channel, I'll share tips and techniques for UI/UX and web design using the latest and greatest tools, and help you improve your skills to become a UI/UX designer. Additionally, I'll cover topics such as product design, business strategies, and share weekly videos on digital design and web development, with useful tools and projects for creatives interested in creating amazing things. Subscribe if you're an aspiring web designer, UI designer, or front-end developer, and want to learn about design principles, user experience, interface design, and AI tools that can help us improve our work.
Cómo crear los mejores Wireframes en Figma
Descubre en este video un increíble plugin para Figma que transformará tu proceso de diseño desde las fases iniciales. Aprende cómo crear wireframes para web o mobile de manera rápida y eficiente con herramientas que te permiten arrastrar y soltar componentes prediseñados directamente en tus prototipos. Olvídate de perder tiempo diseñando elementos básicos y enfócate en plasmar tus ideas de forma ágil y profesional. ¡Optimiza tu flujo de trabajo y lleva tus propuestas de diseño al siguiente nivel!
CAPÍTULOS:
00:00 Introducción
00:31 Plugin de Figma
01:20 Arrastrar componente al frame
02:00 Propiedades del componente
04:17 Estados del componente
El diseño de Wireframes de baja fidelidad es clave en UX porque define la estructura básica del proyecto enfocándose en la funcionalidad sin distracciones visuales. Facilita iteraciones rápidas, ahorrando tiempo y recursos al identificar problemas tempranos. Mejora la colaboración y la comunicación entre equipos y partes interesadas, permitiendo retroalimentación y validación temprana con usuarios. Ayuda a priorizar objetivos y funciones, eliminando elementos innecesarios y reduciendo riesgos de malentendidos. Además, fomenta un proceso iterativo y ágil, optimizando recursos y asegurando un diseño alineado con las necesidades del usuario y del negocio.
CAPÍTULOS:
00:00 Introducción
00:31 Plugin de Figma
01:20 Arrastrar componente al frame
02:00 Propiedades del componente
04:17 Estados del componente
El diseño de Wireframes de baja fidelidad es clave en UX porque define la estructura básica del proyecto enfocándose en la funcionalidad sin distracciones visuales. Facilita iteraciones rápidas, ahorrando tiempo y recursos al identificar problemas tempranos. Mejora la colaboración y la comunicación entre equipos y partes interesadas, permitiendo retroalimentación y validación temprana con usuarios. Ayuda a priorizar objetivos y funciones, eliminando elementos innecesarios y reduciendo riesgos de malentendidos. Además, fomenta un proceso iterativo y ágil, optimizando recursos y asegurando un diseño alineado con las necesidades del usuario y del negocio.
มุมมอง: 485
วีดีโอ
Menu Dropdown en Figma
มุมมอง 1.2K2 หลายเดือนก่อน
Aprende a implementar un menú desplegable interactivo en Figma utilizando componentes, variantes y prototipado avanzado. En este tutorial, te guiaré a través del proceso de creación de un menú dinámico que guarda el estado del elemento seleccionado gracias a variables y condicionales. Capítulos: 00:00 Introducción 00:28 Variables de string 01:41 Componente Option 03:20 Componente Select 04:35 C...
Domina la Arquitectura Web con I.A + plugin en Figma
มุมมอง 1.1K3 หลายเดือนก่อน
En este video, te presento una poderosa herramienta web impulsada por inteligencia artificial que te permitirá crear mapas de sitios de forma rápida y eficiente. Ya sea que necesites diseñar desde cero o analizar la estructura de cualquier sitio web, esta herramienta genera mapas de sitio en cuestión de segundos, optimizando así la arquitectura de la información antes de que comiences tus diseñ...
Recursos de diseño web | Wireframes, Mockups y Componentes
มุมมอง 6464 หลายเดือนก่อน
En un entorno de diseño cada vez más competitivo, la eficiencia y la calidad son fundamentales. Así que en este video te presento Figit, un plugin de Figma, que te ofrece una solución de UI para agilizar tus procesos de diseño y crear web e interfaces de usuario altamente profesionales. Figit es una extensa librería te proporciona una base sólida para tus proyectos. Desde wireframes y mockups p...
Web tools and resources for UX/UI design
มุมมอง 2.8K5 หลายเดือนก่อน
⭐️ Mejora en diseño UX/UI con estos recursos web! En los próximos minutos, te voy a presentar varias herramientas web que considero imprescindibles y que todo diseñador o diseñadora UX/UI debe conocer. Estas webs son herramientas, recursos o fuentes de inspiración y conocimiento que te ayudarán a optimizar tu flujo de trabajo, mejorar la calidad de tus diseños y, en definitiva, a entregar proye...
Accessibility in Figma | Best plugins for web and mobile accessibility
มุมมอง 8925 หลายเดือนก่อน
✅ ¡Accesibilidad al 100% con Stark e Include! En este video tutorial, aprenderás a utilizar dos herramientas imprescindibles para crear interfaces web y mobile accesibles para todos: Stark e Include. ¿Qué es la accesibilidad web? ✅ La accesibilidad web garantiza que todas las personas, independientemente de sus habilidades o limitaciones, puedan acceder y utilizar un sitio web de manera complet...
Figma Slides | How to make presentations in Figma
มุมมอง 3.6K6 หลายเดือนก่อน
Figma Slides, una nueva herramienta que te permite crear presentaciones directamente desde Figma, aprovechando muchos de sus recursos y funcionalidades. En este video, aprenderás a usar las funciones más importantes de Figma Slides para crear tus próximas presentaciones. Con Figma Slides, puedes: ✅ Insertar prototipos funcionales ✅ Aplicar variables desde tus archivos de diseño ✅ Usar component...
How to use Typography Variables and Styles in Figma
มุมมอง 1.3K6 หลายเดือนก่อน
✅ ¡Domina las variables y estilos de tipografía en Figma! Eleva tus diseños al siguiente nivel con esta completa guía sobre el uso combinado de variables y estilos de tipografía en Figma. Aprende a crear diseños impecables, consistentes y escalables que se adaptan a cualquier necesidad. En este video: Descubre cómo usar variables y estilos de tipografía de forma simultánea para optimizar tu flu...
Functional login in Figma | Tutorial for advanced prototypes
มุมมอง 7K7 หลายเดือนก่อน
¡Crea un login funcional en Figma! Prototipo avanzado paso a paso ¿Quieres llevar tus prototipos de Figma al siguiente nivel? En este tutorial, te enseñaré a crear un login o registro de usuarios totalmente funcional y realista. Aprenderás a: Diseñar un formulario de login atractivo e intuitivo. Conectar los inputs para que puedas escribir en ellos desde tu teclado. Implementar lógica para vali...
Interactive prototypes in Figma | Set Variable Mode
มุมมอง 1.6K7 หลายเดือนก่อน
❇️ Transforma tus prototipos con el cambio de modos de variables en Figma! 😎 Figma presenta 'Set Variable Mode', una herramienta que permite cambiar el comportamiento de variables dinámicas en prototipos, creando experiencias más realistas e interactivas. Capítulos: 00:00 Presentación 02:23 Interacciones variables String 04:21 Interacciones variables Color ¡Prototipos más interactivos con varia...
Curso Figma para Developers
มุมมอง 9K7 หลายเดือนก่อน
✅ APRENDE TODO lo que un DEVELOPER necesita saber sobre FIGMA!! En este curso prenderás todo lo que un developer necesita saber para trabajar de manera efectiva con Figma. Pero no solamente está dedicado a desarrollo, sino también a diseñadores y diseñadoras que quieran aprender Figma y UX/UI. Link al archivo de la comunidad de Figma: www.figma.com/community/file/1370761600031722660/curso-figma...
Variables para Tipografía en Figma
มุมมอง 3.2K8 หลายเดือนก่อน
✅ Figma se ha actualizado, actualízate tu también aplicando las variables dentro de los estilos de tipografía. Esto significa que ahora podemos usar fuentes variables y ajustarlas con precisión a nuestras necesidades de diseño, tal y como lo hacemos en CSS. Capítulos: 00:00 Introducción 01:59 Crear Variables de String 07:04 Variables numéricas 09:46 Modos Desktop y Mobile 💥 ¿Qué beneficios ofre...
Cómo crear imágenes con IA en Figma 📸
มุมมอง 6039 หลายเดือนก่อน
😎 Genera imágenes super realistas con IA en Figma En este vídeo te presento un plugin que, con su versión gratuita, puedes generar imágenes realistas y únicas con IA. Además, tienes disponibles algunos filtros para modelar el Prompt y obtener la mejor imagen posible Videos relacionados Cómo crear un web con IA: th-cam.com/video/j6g5Oodjbtw/w-d-xo.html Glassmorfismo: th-cam.com/video/sR7xk-Oe0Ho...
Cómo crear design systems en Figma
มุมมอง 5K9 หลายเดือนก่อน
🟢 ¡Domina los Sistemas de diseño con estos dos plugins de Figma! ¿Quieres crear un sistema de diseño en Figma, pero no sabes por dónde empezar? ¡No te preocupes! En este video te mostraré cómo usar dos plugins que te ayudarán a lograrlo, tanto si tienes experiencia como si no. Primero, veremos Generate Design System Quickly. Este plugin te permite crear las bases de un sistema de diseño en cues...
De FIGMA a CÓDIGO con IA | Locofy Lightning 🤯
มุมมอง 4.1K9 หลายเดือนก่อน
De FIGMA a CÓDIGO con IA | Locofy Lightning 🤯
Cómo documentar las Variables y Tokens en Figma
มุมมอง 1.6K10 หลายเดือนก่อน
Cómo documentar las Variables y Tokens en Figma
FIGMA MULTI-EDIT | Tutorial completo de Edición Múltiple
มุมมอง 1.7K10 หลายเดือนก่อน
FIGMA MULTI-EDIT | Tutorial completo de Edición Múltiple
Glassmorfismo en FIGMA | Tendencias UX/UI 2024
มุมมอง 1.3K10 หลายเดือนก่อน
Glassmorfismo en FIGMA | Tendencias UX/UI 2024
TOP Plugins Figma para optimizar tareas de diseño | 01
มุมมอง 1.5K10 หลายเดือนก่อน
TOP Plugins Figma para optimizar tareas de diseño | 01
Bento Grid en FIGMA | Tendencias UX/UI 2024. 01
มุมมอง 2.1K11 หลายเดือนก่อน
Bento Grid en FIGMA | Tendencias UX/UI 2024. 01
FIGMA CON IA | Copilots en Figma con Inteligencia Artificial
มุมมอง 7K11 หลายเดือนก่อน
FIGMA CON IA | Copilots en Figma con Inteligencia Artificial
CURSO FIGMA | 02 Sistema de Diseño con Variables & Tokens
มุมมอง 12K11 หลายเดือนก่อน
CURSO FIGMA | 02 Sistema de Diseño con Variables & Tokens
FIGMA COURSE 2024 | 01 Introduction to Figma
มุมมอง 61K11 หลายเดือนก่อน
FIGMA COURSE 2024 | 01 Introduction to Figma
Navegación Avanzada en Figma | Prototipos con Memoria 💡
มุมมอง 1.1Kปีที่แล้ว
Navegación Avanzada en Figma | Prototipos con Memoria 💡
Cómo crear Webs en Figma con INTELIGENCIA ARTIFICIAL
มุมมอง 11Kปีที่แล้ว
Cómo crear Webs en Figma con INTELIGENCIA ARTIFICIAL
Cómo alinear elementos en Figma | Sistema de Grid de Figma
มุมมอง 1.9Kปีที่แล้ว
Cómo alinear elementos en Figma | Sistema de Grid de Figma
Hola, una consulta, sabes si se puede hacer lo siguiente: 3 contenedores de informacion ( cantidad habitantes, superficies en km2, recaudacion anual), cada ciudad tiene sus propopios valores, y al selecionar una ciudad muestre esos valores. Gracias
Hola Xavi.... Oye podrías hacer un tutorial de como pasar un diseño de figma a Bravo estudio... Saludos y gracias.
Pues no es la primera vez que me proponen de hacer este tipo de vídeo con Bravo Studio. Lo tengo que usar más todavía para controlar todos los temas pero me encantaría sacar algo en breve. Creo que sería interesante. Un saludo!
hola, amigo, podrías hacer un tutorial acerca de MOTIFF que no es más que Figma evolucionado y darnos tus comentarios. saludos
Hola!! Lo tengo en mente si! quiero hacer varios tutoriales sobre herramientas similares a Figma y entre ellas está Motiff. Gracias por la propuesta 👍🏼
ERES UN GENIO XAVI...HE APRENDIDO DEMACIADO EN TU CANAL FELICIDADES
Muchas gracias! Me alegro que te sirva de ayuda!!
la interfaz ya es diferente lo cual dificulta un poco el aprendizaje
Si! Este vídeo tiene casi un año y la interfaz cambió hace unos meses
2025 espectacular hermano gracias por todo el video! Enseñas cosas que no salen ni en los manuales jeje
Gracias a ti! Esta hecho hace un año pero hay cosas que todavía pueden servir
el 8 de febrero cumplo 1 año como estudiante de diseñador ux ui y ahora a dos meses de cumplir estoy comenzando a hacer mis propios wireframes a mano y a digital para mi primer porfolio para buscar trabajo y ahora que comienzo a hacer mi primer wireframe pero no a papel busco y encuentro esto, la verdad video corto pero super funcional, lo hiciste en hora buena, y me da señal que Dios me bendijo con este nuevo camino de la tecnología y ahora lo sé porque subiste este video a un día de comenzar a hacer wireframes digitales!!
Qué bueno!!! Me alegro que hayas encontrado este vídeo en su justo momento. Si, es corto pero si aporta valor es suficiente. Ánimo en tus estudios! Saludos 👋🏼
Super agradecida, en verdad que me ha ayudado muchísimo con mi proyecto. Saludos
Cuánto me alegro!! Animo con tu proyecto 💪🏼 saludos
...genial este plugin, desde el primer minuto el sistema de diseño es profesional, por que figma recomienda usar variables y properties, ni hablar de autolayout, después se puede personalizar pero ya es una personalización sobre algo avanzado. Creo entender eso y además lo vimos en las mastes clases 2, 3 ,muy bueno! como siempre gracias por compartir tus conocimientos y muy Feliz Año 2025 a Mokkapp y Familia🥂
Hola Ariel! Qué tal? Exacto! es un sistema de diseño y componentes preparados para una función muy específica, como la de crear Wireframes para plasmar ideas y prototipos de baja fidelidad. Igualmente, te deseo un feliz año 2025 a ti y tus seres queridos!! un abrazo 😊
muchas gracias por el apoyo.. tienes algun curso o video donde hayas creado una pagina web desde cero utilizando estas herramientas?
Actualmente no, pero creo que podría ser interesante hacer un vídeo como el que comentas si! Muchas gracias por la propuesta 👍
@ gracias a ti por el aporte, voy a empezar con el curso que tienes sobre developers en figma, explicas muy bien!
@@cer0tube774 Muchas gracias!!! Me alegro que te ayuden mi manera de explicar. El curso sobre Figma para developers tienes el archivo descargable en mi perfil de la comunidad. Creo que puede servirte de ayuda. Un Saludo!
Gracias, excelentes herramientas :)
Gracias a ti!! Un saludo 👋🏼
Muchas gracias!
A ti! 😊
de casualidad podrías hacer un tutorial de figma para exportarlo y darle salida en bravo studio? saludos desde México
Lo revisaré porque no lo he usado todavía. Muchas gracias por la propuesta. Un saludo 🫡
AMIGO ERES UN CRACK MAS VIDEOS PORFA VOR DE FIGMA ES GENIAL
Muchas gracias!! Sin duda que subiré más en breve
Que buena explicación! mil graciassss :D
Gracias a ti! Saludos 😁👋🏽
Wao me ha encantado, muchas gracias, soy un nuevo suscriptor!!
Muchas gracias!! Me alegro que te pueda servir! 😊👍
gracias buscaba esto
No me funciona , hasta agregar set variable puedo y seteo la variable pero luego para agregar que reste o sume un número no me aparece la opción para hacer eso
Puede que se deba a que la interfaz de Figma ha cambiado hace unos meses o que tengas un tipo de cuenta starter y no una proffesional
hay cosas que no aparecen en mi programa figma, layer, instancias de property, true, boolean. que es lo que pasa? gracias
Este vídeo es de hace un año y la interfaz de Figma a cambiado.. este vídeo se hizo con la versión antigua (UI2) y ahora está operativa la (UI3)
gracias!
Gracias a ti!! 😊
Hola! excelente curso, una actualización importante sobre magician es que ya no esta disponible ): lo mencionan en el discord de diagram
Hola!! Si, desde hace tiempo ese plugin dejo dejó de funcionar. Una lástima la verdad…
Que uen curso, me gusta mucho el orden que llevas. Tengo una duda. En la nueva versión de figma no encuentro la opción de "Create boolean property" Sabes dónde pueda estar en este nueva versión? muchas gracias
me pasa lo mismo, no encuentro layer, boolean, etc. gracias.
Debe ser porque ahora mismo está funcionando la versión 3 del UI de Figma
@@mokkapp Hola!! Me pasó lo mismo. No puedo agregar la propiedad boolean al icono flecha, me deja directamente hacerlo con todo el componente botón, alguien sabe por que puede ser?
¡Este video vale oro! , gracias por explicar las opciones que elegiste para crear el Dropdown, saludos desde Colombia.
Gracias a ti!! Saludos desde España 😁
Genial!! 👍
¡Este video es increíble! Muy poco el contenido en español tocando el prototipado avanzado tan bien explicado.
Muchas gracias! A ver si saco más de este estilo y que puedan aportar valor! Un saludo 👋🏼
GRACIAS HERMOSO
A ti!! 😁
la cantidad de diseñadores que serán desplazados por toda esta basura AI
Pues cada vez hay más herramientas. Yo creo que hay que buscar un equilibrio entre lo humano y lo artificial… nos guste o no
Funciona para clonar páginas de Microsoft Dynamic 365, para diseñar prototipos de soluciones?
Te sirve para clonar todo lo que tenga URL, ya que al ser web y usar HTML y Css puede capturarlo y pasarlo a Figma
@@mokkapp Excelente información y excelente video!!
ya se volvio de paga!
Han estado más de un año en fase beta de forma gratuita. Averiguaré si hay otras opciones que sean gratuitas con esta u otra herramienta
Los kits de ui se pueden usar? Cómo se importan?
Para usarlos debes ir a la página del UI Kit en cuestión dentro de la comunidad de Figma. Allí verás un botón de abrir en Figma y se te abrirá un borrador con ese archivo. En general están para usarse, pero debes mirar si hay alguna licencia de uso previa. Por ejemplo los UI de Apple tienen licencias y para usarlos debes leerlas antes para asegurarte del uso que le quieres dar
@mokkapp genial. Gracias!
Es de paga
Creo que se terminó la versión beta
como puedo contactar contigo?
Hola, te paso mi perfil de Linkedin: linkedin.com/in/xavier-pascual-betrán-1889a6116
Muy útil este tutorial. Gracias Xavi!! 👏
Buenísimo. Faltaría uno donde cada poder asignar un link a cada uno.
Quizás para un segundo vídeo.. o modificar contenido mediante variables también! 😉
@@mokkapp Lo que me gustaría hacer sería preparar un prototipo dónde desde el login cada usuario pueda dar click e ir a(las) pantalla(s) de su rol.
Woowwww!!! La última funcionalidad es brutal! 🙌🙌
Ya te digo!
Buenísimo el Dropdown Xavi, excelente clase de variables, y gracias , por usar de ejemplo 1 Buenos Aires💓en ciudades, abrazos!!!
Muchas gracias Ariel! Lo de Buenos Aires va dedicado a todos los que me seguís desde Argentina! 🤍🩵 Un abrazo! 😁
Figma no viene ya con una librería low fi para inspirarse y ver como deberias prototipar tus diseños, funcione? Pues si no esta, pues lo haga .
Si, viene con tres UI Kits básicos para probar, pero son el de Material, iOs y Figma creo... quizás si eres nuevo en Figma pueden ayudarte al inicio
Excelente este tutorial, Muy bien explicado. Saludos !
Muchas gracias! Saludos!! 😁
no sabia que Luisito comunica haria estos videos =0
Jajaja... nunca me habían dicho que me parecía a él.. Quizás por el pelo! 😅
¿Cómo hacer que una imagen se mueva en una dirección? Gracias
¿A qué te refieres con que se mueva la imagen? dentro de un Frame?
Muy buen onboarding! Justo ahora tengo que ponerme a hacer una presentación de research y decidí hacerla con Slides aprovechando justamente que ya podes traerte las librerías y protos.
Pues justo han sacado novedades respecto a Figma Slides esta semana.
Maravilloso.
increíble, gracias por este video! me encantó, super claro 😎😎
que buen video, justo lo que uno necesita en poco tiempo
Alguna alternativa a Magician? Gracias
Prueba content reel
tio este video de verdad que me ha dado la vida con la última función, si no te importa creoq ue haré un video sobre ello te citaré en él! Gran aporte!
Ei Oscar!! Si claro, sin problema. Granas de ver tu vídeo. Seguro que está genial 🙌
como haces para duplicar dos o mas variables al mismo tiempo, ósea como hacer para seleccionar dos variables al mismo tiempo para así duplicarlas porfavor :) gracias
Hola, Presionando sobre las tecla Shift, clicas encima de las variables que quieres seleccionar y a la que tengas esas variables seleccionada, haces click derecho para que aparezca el menu de opciones y seleccionas "Duplicate Variables". Haces una copia de sesas variables selecionada.