Curso de Figma para Developers
2:03:45
De Figma a Código | Locofy AI
21:55
Пікірлер
@nimiaenciso
@nimiaenciso 5 сағат бұрын
Interesante! Si me gustaría saber sobre el tamaño para mobile. Me habían comentado que se debe de hacer a 360 y por otro lado veo justamente como lo muestras aquí que se utiliza en 480... Por cual debo optar? Estoy realizando un diseño para una app mobile
@lauradalama3583
@lauradalama3583 11 сағат бұрын
Genial tus videos! Tengo una consulta, el MODO DEV sólo puede crearlo y editarlo alguien con cuenta profesional verdad?
@LikantrO777
@LikantrO777 21 сағат бұрын
podrias poner un chivato de teclas para saber que comandos y teclas vas presionando, para siguientes videos almenos. gracias
@mokkapp
@mokkapp 19 сағат бұрын
Tomo nota! 👍
@benditoovillo
@benditoovillo 4 күн бұрын
Espectacular !! Gracias por compartir !!!
@mokkapp
@mokkapp 3 күн бұрын
Gracias a ti!! 😊
@Camilorh
@Camilorh 5 күн бұрын
Puedes compartir el archivo?
@mokkapp
@mokkapp 19 сағат бұрын
Este es un vídeo de hace algún tiempo, busco el archivo y si todavía lo tengo lo publico
@Rockin.Rebel97
@Rockin.Rebel97 7 күн бұрын
Hola Xavi!!!🔥🔥🎸🎸
@mokkapp
@mokkapp 7 күн бұрын
Hola Javi!! 👋
@MercuryAR
@MercuryAR 8 күн бұрын
Que excelente canal me trajo el algoritmo de yt
@mokkapp
@mokkapp 6 күн бұрын
Muchas gracias!! Me alegro que te pueda servir mi canal! 😊
@MercuryAR
@MercuryAR 6 күн бұрын
@@mokkapp si hace poco me matriculé en Diseño UX / UI después de estar 20 años en desarrollo de sistemas
@mokkapp
@mokkapp 6 күн бұрын
@MercuryAR buen cambio. Esa experiencia que tienes te puede servir de gran ayuda en diseño UX. Yo pase del frontend a diseño y me ayudo mucho. Ánimo!! 💪🏼
@MercuryAR
@MercuryAR 9 күн бұрын
¿Es de pago QoQo?
@mokkapp
@mokkapp 8 күн бұрын
Si no ha cambiado, tienes un periodo de prueba gratuito y luego un pago mensual
@MercuryAR
@MercuryAR 8 күн бұрын
@@mokkapp Gracias, excelente tu canal, hace poco hice un curso de UX / UI y si bien me pareció increíble la app porque hace todo, coincido en que el Research UX tiene que ser real.
@paulofernandez6222
@paulofernandez6222 12 күн бұрын
Es necesario tener Dev Mode para usar locofy? Locofy es gratuito
@mokkapp
@mokkapp 12 күн бұрын
Hay dos modos de hacerlo, uno desde la web de Locofy y otro desde el plugin dentro del dev mode, que es el Locofy Lightning
@paulofernandez6222
@paulofernandez6222 9 күн бұрын
@@mokkapp intente pero no tengo el Dev Mode en figma, desde la pagina de LocoFy no puedo. Ambos son de pago y en estos momentos estoy en mi etapa de aprendizaje como desarrollador back end, quiero ayuda para las vistas así puedo armar proyectos y subirlos a mi porfolio. Estoy investigando y encontre alternativas a GCopilot como Continue que usa Ollama y Codestral, pero por lo que veo no es para Linux. Si tienes algún video que hable de alguna alternativa como esta para SO Linux te agradecería. De todas formas gracias por tomarte el tiempo de contestarme y hacer videos tan bien explicados y de tan buena calidad
@julithoprieto9012
@julithoprieto9012 13 күн бұрын
Ese plugins también sirve para celular o solo pantallas de monitores
@mokkapp
@mokkapp 12 күн бұрын
Sirve para cualquier dispositivo
@Oliverastro
@Oliverastro 14 күн бұрын
Yo utilizo la propiedad de convertir a Tailwind, se me hace mucho más rápido, voy a probar Locofy, gracias
@mokkapp
@mokkapp 12 күн бұрын
Esto lo que hace es si lo quieres pasar a algún framework de frontend como por ejemplo react
@roxenrottschwarz1595
@roxenrottschwarz1595 14 күн бұрын
Buaah muchas gracias! soy nueva en FIGMA y haciendo los prototipos no tenia manera de saber como crear esta navegación que es tan común de hacer y me estaba volviendo loca.
@mokkapp
@mokkapp 13 күн бұрын
Me alegro que te haya servido para lo que estabas buscando!! Un saludo 👋 😊
@sofiacontent
@sofiacontent 17 күн бұрын
Hola! Tengo una duda. Cuando hago un frame con los dos frames: frame 1 (texto con fill) y el frame 2 (frame linea filled que luego ocultamos) , aumento el texto y no me aumenta ni el frame 1 ni el 2, se quedan quietos y el texto sobresale. ¿Qué estoy haciendo mal? Un saludo y ¡¡¡graciass!!
@mokkapp
@mokkapp 17 күн бұрын
Hola! Revisa que los Frame en los que tengas textos tenga el Auto layout aplicado y luego a ese mismo Frame le aplicas la propiedad Hug contents.. Creo que por lo que comentas, así te funcionará. Un saludo
@hugotti
@hugotti 17 күн бұрын
;uy bien explicado.. da gusto así
@mokkapp
@mokkapp 17 күн бұрын
Gracias, saludos! 😊
@blue-moon-novelas
@blue-moon-novelas 18 күн бұрын
Esta herramienta puede procesar todo el diseño de la página completo con cada una de las secciones al tiempo o trabaja de a una parte así como mostraste con la página de inicio?
@mokkapp
@mokkapp 17 күн бұрын
Hola, en principio, si no han cambiado nada, creo puedes añadir más de una página a parte de la home
21 күн бұрын
Gracias.
@arielmoreno2624
@arielmoreno2624 22 күн бұрын
Hola Xavi! que buen Plugin trajiste hoy, creo que me ahorraría muchísimo tiempo en diseñar el UI, quiero ponerme a usar esos recursos que propones en el video, ya!✨
@mokkapp
@mokkapp 20 күн бұрын
Hola Ariel! Qué tal? Si, ese plugin tiene cosas interesante en su versión gratuita, a ver qué tal te van... Un saludo! 😁
@alf-bs
@alf-bs 22 күн бұрын
Muy bueno y útil.
@axelhunger
@axelhunger 22 күн бұрын
Sí desde un wireframe con varias imagenes card en reticula, quisieras añadir más filas de esas cardas, expandiendo el template, layout, se puede? No dire nada más como un slidebar y scrollbar
@mokkapp
@mokkapp 22 күн бұрын
Buenas Axel! No lo he probado con todos los templates que hay pero imagino que están todos diseñados del mismo modo
@enriqueruiz320
@enriqueruiz320 22 күн бұрын
Muy bueno
@mokkapp
@mokkapp 22 күн бұрын
Gracias Enrique!! Un saludo 👋🏽😁
@enriqueruiz320
@enriqueruiz320 22 күн бұрын
Primero 😝
@arii529
@arii529 23 күн бұрын
donde se descargan sus plugins?
@mokkapp
@mokkapp 22 күн бұрын
Los Plugins están todos en la comunidad de Figma. Si te refieres a los archivos de diseño del vídeo hay algunos que están también en mi perfil de la comunidad de Figma
@arii529
@arii529 22 күн бұрын
@@mokkapp y dónde encuentro la comunidad de figma
@mokkapp
@mokkapp 22 күн бұрын
Depende de si usas el navegador o la app de escritorio puedes tenerla en sitios diferentes.. pero el icono es como una globo del mundo. Si tienes dudas puedes mirar el capítulo 1 del curso de Figma que tienes en mi canal
@alf-bs
@alf-bs 25 күн бұрын
Acabo de descubrir el curso, muchas gracias por el curro!
@mokkapp
@mokkapp 24 күн бұрын
Gracias a ti! A ver tal va y si te sirve de ayuda. Un saludo! 👍🏼
@javieralonso3772
@javieralonso3772 26 күн бұрын
Muy buen video. Gracias por compartir tanta información de valor. Una pregunta respecto a las variables y tokens. ¿como se puede hacer para que esas variables y tokens estén disponibles para todas las páginas de un mismo proyecto?. Gracias de antemano
@mokkapp
@mokkapp 24 күн бұрын
Hola Javier, gracias a ti por el comentario. En cuanto a tu duda, comentarte que cuando creas variables en un mismo proyecto, esa colección de variables estarán disponibles para las diferentes páginas que vayas creando. Pero si tienes diferentes proyectos, puedes publicar como librería ese proyecto donde están las variables, componentes, etc... para que desde otro proyecto puedas usarlas. Ya me dirás si resuelvo tu duda. Un saludo!
@benditoovillo
@benditoovillo 29 күн бұрын
Muchas gracias por compartir!! Genial!!
@mokkapp
@mokkapp 29 күн бұрын
Gracias a ti!!! 😉
@rodsotm
@rodsotm Ай бұрын
Hola. Excelente los videos. Muy claros e interesantes. Tengo una pregunta. Los recursos como por ejemplo CSS Tailwind, ¿se pueden utilizar para un proyecto empresarial o comercial real? ¿Hay temas de costos o de copyright?. Muchas gracias.
@mokkapp
@mokkapp 29 күн бұрын
Hola! Tailwind CSS es un framework de CSS de código abierto que te permite diseñar y programar webs. Revísalo en la web oficial lo que quieras hacer: tailwindcss.com/
@benditoovillo
@benditoovillo Ай бұрын
A probar!! gracias!
@HectorMartinez-kf7cy
@HectorMartinez-kf7cy Ай бұрын
Excelente aporte!
@mokkapp
@mokkapp Ай бұрын
Gracias!! 😊
@benditoovillo
@benditoovillo Ай бұрын
Espectacular!! Gracias!
@mokkapp
@mokkapp Ай бұрын
Muchas gracias 🙏
@manueloficina7762
@manueloficina7762 Ай бұрын
En el minuto 1:10:32 inserta los logos de las demás tarjetas, en el video el logo se pone del tamaño correcto ajustando la tarjeta, pero lo que me pasa a mi es que el logo se deforma en el espacio donde estaba el logo de Figma anterior haciendo que los logos de Framer y React queden aplastados. Si alguien sabe cual es el problema se lo agradecería mucho u.u
@mokkapp
@mokkapp Ай бұрын
Hola! Creo que es porque una vez tienes el icono seleccionado para redimensionar, en la barra de la derecha debes de presionar en “Constrains proportions” es un icono que encontraras Justo al lado del ancho y largo
@ro_an7996
@ro_an7996 Ай бұрын
puse tan bien la variable hasta que me salió que no podía porque tenia que pagar, existe algún otro modo?
@mokkapp
@mokkapp Ай бұрын
Hola! Si, de momento los modos de las variables están en el plan de pago. No obstante puedes hacer algo parecido con las colecciones… crear tres colecciones. Una para cada dispositivo. No es lo mismo pero es una solución
@guillermomf
@guillermomf Ай бұрын
Buen vídeo. Aunque no me llamaba la atención especialmente Figma Slides después de ver tu vídeo si que lo veo más util.
@mokkapp
@mokkapp Ай бұрын
Hola! Creo que es un producto muy específico y que aprovecha las funcionalidades existentes en Figma. Lo que quizás hace que las presentaciones las sigamos haciendo desde archivos de diseño... A ver como va evolucionando. Un saludo 😁👋🏽
@guillermomf
@guillermomf Ай бұрын
Eres un crack. Muy bien explicado todo.
@mokkapp
@mokkapp Ай бұрын
Gracias! 😊
@gonzzdev
@gonzzdev Ай бұрын
Uff, Realtime Colors es una herramienta excelente. Y los videos de @juxtopposed, su creadora no se quedan atrás! Muy buena recomendación de herramientas!
@javita1215
@javita1215 Ай бұрын
Lo explicaste mucho mas sencillo y mas rapuido que otros. Si bien les agradezco a todos los q se toman la molestia en explicar quieren abarcar mucho mas que lo qe necesitamos en especifico a veces. Ten tu like buen hombre
@sergio.arboleda
@sergio.arboleda Ай бұрын
Muchas gracias
@mokkapp
@mokkapp Ай бұрын
A ti Sergio! Un saludo 😊
@axelhunger
@axelhunger Ай бұрын
yo no lo veo asi la pagina real time. ESO POR MIS PLUGINS ROMPE PAGINAS
@axelhunger
@axelhunger Ай бұрын
Los enlaces de capitulos crei que te llevaban enlaces de la pagina de esos terceros.
@axelhunger
@axelhunger Ай бұрын
VARIAS DE ELLAS YA LAS TENIA EN FAVORITOS.
@mokkapp
@mokkapp Ай бұрын
Quizás por alguna extensión de Chrome que tengas instalada?
@arielmoreno2624
@arielmoreno2624 Ай бұрын
Hola Xavi😊 De lujo el metería de Mokkapp🚀 Me ahorraría muchísimo tiempo si tendría que diseñar algo, todos estos recursos🥳pero además de todo eso, algo en mi forma de pensar 💭 cambio, mientras veía el video de Mokkapp✨
@mokkapp
@mokkapp Ай бұрын
Hola Ariel! Cómo va todo? Si, este video es un poco diferente al resto, ya que quería compartir otras webs que uso fuera de Figma. Me alegro que hayas podido tener un punto de vista diferente tal y como comentas, eso siempre es bueno!! jaja Cualquier consulte me dices! Un saludo 😁👍🏼
@deno12dev
@deno12dev Ай бұрын
pageflows me parece super top... que proyecto más interesante
@mokkapp
@mokkapp Ай бұрын
Completamente de acuerdo! Está muy bien pensado 👍🏼
@astronom_ai
@astronom_ai Ай бұрын
Wowww!! La última web... buenísima!!!
@mokkapp
@mokkapp Ай бұрын
Si! hay cosas chulas para usar 😎
@enriqueruiz320
@enriqueruiz320 Ай бұрын
Considera a Spline, está 😱
@mokkapp
@mokkapp Ай бұрын
Si! Lo tengo presente. pero no se si en un video como este en plan resumen o un tutorial más detallado.. Gracias por tu aportación!! 👍🏼
@enriqueruiz320
@enriqueruiz320 Ай бұрын
@@mokkapp Considero que un tutorial porque es una herramienta aparte de Figma, yo ayer que la vi quedé alucinado 😵‍💫
@Soy___rodri
@Soy___rodri Ай бұрын
🎉
@javialexarias
@javialexarias Ай бұрын
Hermano que tal, hice los pasos y la parte de ingresas las letras "a, b y c" todo bien. El problema que tengo es que la contraseña pongo una incorrecta por ejemplo "acbb" y la correcta es la del video "aabb", y pues no me sale el mensaje de error sino me manda directo a la de home, ya vi de nuevo el video y cambio, algunas cosas pero sigue sin funcionar :(
@mokkapp
@mokkapp Ай бұрын
Hola! Mira a ver si has aplicado bien el evento "Change to" para que te cambie el estado en lugar de acceder al espacio personal
@Carolina-m4h
@Carolina-m4h Ай бұрын
excelente forma de enseñar! se necesita Figma Pro para completar el curso?
@mokkapp
@mokkapp Ай бұрын
Hola! Muchas gracias! En cuanto a tu duda, si que hay ejercicios tanto el el video 2 como en el 3 que es necesario el figma profesional. Dime qué aspectos crees que te pueden interesar para ver si puedo hacer un video con algo parecido en cuanto a contenido pero con la version Free
@JorgeMartinez-wd5xi
@JorgeMartinez-wd5xi Ай бұрын
Muy buena esta información, me ha ayudado mucho. Gracias por compartir.
@mokkapp
@mokkapp Ай бұрын
Gracias a ti por comentar! 😁
@JhoanSinisterra-x9j
@JhoanSinisterra-x9j Ай бұрын
Muy bueno el video, ya me lo terminé y me ayudó muchísimo.
@FrancoSablic
@FrancoSablic Ай бұрын
Qué bien explica, maestro! Lloverán follows and likes, crack. Excelente curso.
@javialexarias
@javialexarias Ай бұрын
Hola hermano que tal! Primer vídeo tuyo que veo y esta genial, me estoy acoplando porque hoy active la cuenta a pro. Quería saber como le puedo hacer por ejemplo en el password, ingreso pero quiero que haya la opción de ese como ojito que al presionarlo vez la contraseña que ingresaste, y si no solo se ve "*********" o "xxxxxxx". Y para confirmar que he puesto bien la contraseña lo activo y veo lo que ingresé. Eso hermano por fa, de todos todos modos tengo algunas ideas de como hacerlo ya lo voy a intentar pero tu respuesta me ayudaría mucho. Saludos!!
@mokkapp
@mokkapp Ай бұрын
Buenas!! Qué tal? Una forma sencilla de de hacerlo es seleccionar dos estilos de tipogafía.. creo haber visto alguna fuente que todos sus caracteres pueden ser este tipo de signos. Entonces mediante un condicional puedes activar una fuente (la legible) y con el otro valor la no legible. Este evento lo puedes activar por ejemplo insertando los iconos de un ojo dentro del input. Ya me dirás si has podido hacerlo de esta manera o de otra. Un saludo!! 🫡
@pablohatt
@pablohatt Ай бұрын
Genial... Muchisimas gracias por este curso. TODO sobre Figma, TODO respecto a los estandares UI, mas una buena seleccion de Plugins recomendados, inicio al modo Dev, y ademas, un magnifico archivo para practicar lo explicado, con algun ejercicio y mucho material de utilidad. Un curso mucho mas completo, que otros cursos que he realizado en plataformas OnLine de pago... Gracias de nuevo.
@mokkapp
@mokkapp Ай бұрын
Muchas gracias por la valoración! Me alegro que pueda servirte y ayudarte tal y como comentas. ..Esa era precisamente la intención del video! Un saludo 🫡
@sophiaollerschmid1709
@sophiaollerschmid1709 Ай бұрын
Excelenteeee explicación!! Super simple, gracias! <3