Trucos para dominar el focus en Figma ¡Nivel PRO! 🔥

Поділитися
Вставка
  • Опубліковано 22 лип 2024
  • Este video proporciona una guía detallada sobre cómo implementar el estado de focus en los componentes de Figma. Se repasa el proceso de creación del estado de enfoque mediante diferentes métodos y técnicas, explicando los beneficios y limitaciones de cada uno.
    5 formas de hacer focus:
    0:00 - Intro
    0:40 - ¿Qué es el focus?
    1:50 - Forma 1 - Sombras
    4:29 - Forma 2 - Outline - border
    5:24 - Forma 3 - Auto layout
    9:50 - Forma 4 - Auto layout doble
    11:32 - Forma 5 - Variants y properties
    15:22 - Despedida
    Puntos destacados:
    🔑 Se enfatiza la importancia del estado de enfoque para la accesibilidad web y la interacción del usuario.
    🛠️ Se exploran distintas técnicas para generar el estado de enfoque, incluyendo el uso de sombras, bordes o marcos.
    ⚖️ Se analizan las ventajas y desventajas de cada método, considerando aspectos como la visibilidad y la introducción de espacios.
    🔍 Se detalla el uso de la posición absoluta y otras funcionalidades de Figma para diseñar el estado de focus.
    ❌ Se advierte sobre las posibles complicaciones que pueden surgir al modificar estructuralmente los componentes.
    🌑 Se explica la aplicación del estado de focus en diferentes temas, tanto oscuros como claros.
    📝 El propósito fundamental es mejorar la accesibilidad y la facilidad de navegación de sitios web o aplicaciones para todos los usuarios.

КОМЕНТАРІ • 14

  • @analorente357
    @analorente357 5 місяців тому +1

    Gracias Raúl!

  • @alejandroquarato8824
    @alejandroquarato8824 5 місяців тому +1

    Gracias a Raúl puedo poner en mi CV que tengo conocimientos de figma avanzados jaja saludos Raul gracias por lo que haces por esta comunidad

  • @marperez629
    @marperez629 5 місяців тому +1

    Estoy rediseñando formularios y esto me ha venido de perlas. ¡¡Muchas gracias Raúl!!

  • @williamrojas7734
    @williamrojas7734 5 місяців тому +1

    Muy bueno gracias

  • @debdeb11337
    @debdeb11337 5 місяців тому +1

    Excelente Raúl! Me viene genial 👍

  • @samaradana.7
    @samaradana.7 5 місяців тому +1

    Súper interesante, Raúl 🙏🏻🙏🏻 muchas gracias por el vídeo!! Un abrazo grande

  • @adrian.padilla
    @adrian.padilla 5 місяців тому

    Si inserto el focus a través de posición absoluta, esto como se traduce en desarrollo? osea estos rectángulos ocupan pixeles en pantalla, o también ocurre lo mismo que en figma?

    • @RaulMarin_Figma
      @RaulMarin_Figma  5 місяців тому +1

      Hola no se si lo entiendo bien. Pero desarrollo nunca haría un focus con posición absoluta. Usaría outline, box-shadow... Si usan esa misma técnica en dev sería una ñapa en toda regla.