Ultimate Button with Variants, Interactive Components and Auto Layout • Turbo Figma

Поделиться
HTML-код
  • Опубликовано: 18 ноя 2024

Комментарии • 29

  • @SebastienWozny
    @SebastienWozny  3 года назад +4

    Qui sera le premier à me dire qu'il n'y a pas d'état Hover sur Smartphone ? Qui ? ⚡️🔥

  • @cloecoupris6238
    @cloecoupris6238 3 года назад

    Super video, merci beaucoup pour le tuto ! 💪
    Quant au rythme on a tendance à me dire que je suis speed, ce qui fait que là en l'occurrence j'apprecie bien ton mode turbo 😆

  • @SimonAgassoussi
    @SimonAgassoussi 3 года назад

    Trop cool ta chaîne , tes vidéo sont bien construite et compréhensible j’adore je m’abonne et j’attend les prochaines vidéos avec impatience !!😁

  • @radepent
    @radepent 3 года назад +1

    excellent .. ! becoming my Fav channel. ...

  • @snot44
    @snot44 3 года назад

    Merci pour ton tuto turbo super efficace!

  • @pierre-georges
    @pierre-georges 3 года назад +1

    Super vidéo merci :) Enfin des tutos qui ne vont pas à 2km/h !
    Question : pourquoi partir d'un bouton avec 2 icônes masquées à l'intérieur que tu ré-affiche par après ? De mon côté j'ai fais pareil mais au lieu de masquer les icônes, je les ai juste supprimées. Ca fonctionne parfaitement mais j'ai peut-être loupé un cas de figure particulier.

    • @SebastienWozny
      @SebastienWozny  3 года назад +1

      Hello Pierre ! 👋
      Merci pour ton commentaire ! ⚡️
      Je n’ai pas vraiment d’explication. 😅
      Figma gère très bien les éléments masqués niveau performances du coup je ne vois pas trop l’intérêt de les supprimer.
      En fait, c’est plus une organisation personnelle, j’aime bien l’idée que mon composant soit intact qu’importe la variante, supprimer c’est un peu trop définitif pour moi.
      Une règle que j’utilise, c’est que si j’ai une variante de composant avec + de 3 éléments cachés, c’est qu’il est temps de le convertir en nouveau composant car il diffère trop de l’original.

  • @potatoscoach
    @potatoscoach 2 года назад

    Simple et rapide !

  • @manou1409
    @manou1409 3 года назад

    Top !

  • @stefanofois-com
    @stefanofois-com 3 года назад

    Thank you! 🤙

  • @RemiRodrigues
    @RemiRodrigues 3 года назад +3

    Heureusement que RUclips permet de lire la vidéo en vitesse x0.25 😂🔥

  • @dany9457
    @dany9457 3 года назад +1

    Incompréhensible tu vas beaucoup trop vite mais la qualité de la vidéo est géniale !

    • @SebastienWozny
      @SebastienWozny  3 года назад

      Turbo Figma c’est plutôt orienté pour les utilisateurs de Figma « avancés », le concept c’est justement d’aller vite et à l’essentiel. 🙂

  • @Baskohdub
    @Baskohdub 7 месяцев назад

    Les gens en sueur sur la vitesse alors que je suis en x2 simple mortels…

  • @iSylfaen
    @iSylfaen 3 года назад +1

    Allez @+

  • @thomasfuchs7244
    @thomasfuchs7244 3 года назад

    Ne fonctionne malheureusement pas chez moi... ni en version bêta, ni en classique.. Dommage sinon très bon tutoriel

    • @SebastienWozny
      @SebastienWozny  3 года назад +1

      Hey ! 👋
      Si ça ne marche pas en bêta, c’est que tu n’as pas rejoint le programme des composants interactifs ! Pour s’inscrire c’est ici : docs.google.com/forms/d/e/1FAIpQLSctELo9clvK0uP-0zDAxMqrgtCNyK0OB2hff6O7SnK9y4jo5g/viewform

    • @minna633
      @minna633 3 года назад

      @@SebastienWozny hello ! combien de temps environ ils mettent pour envoyer la confirmation ? :)

    • @SebastienWozny
      @SebastienWozny  3 года назад +1

      @@minna633 En général 3 ou 4 jours en ce moment de ce que j'ai entendu !

  • @Shteuf
    @Shteuf 3 года назад

    Eh ouais mais sur mobile le hover n’existe pas… [insert trollface here]

  • @yourdan-j3z
    @yourdan-j3z 3 года назад

    Where is atomic design, boi

    • @SebastienWozny
      @SebastienWozny  3 года назад

      Buttons are atoms in my religion, not for you? 🦠

    • @yourdan-j3z
      @yourdan-j3z 3 года назад +2

      ​@@SebastienWozny What if u want to change for example the icon size, space between icon and text, or padding? In your case u need to do it manually on every variant, doesn't sound like an optimized workflow.
      Instead of this create the first "button atom inside" for example with text and icons on left and right, then put it into the second component "button atom shape" and add the padding to make it a real button, then from that component create every single state and possibility by changing just colors and hiding the unnecessary layers such as icons.

    • @SebastienWozny
      @SebastienWozny  3 года назад +2

      ​@@yourdan-j3z Yes, the Ions extension of the atomic design can be useful in some case, but in my opinion, on buttons it's overkill.
      Figma has a powerful search feature, in 2 clics I can do exactly what you're talking about with a good naming convention.
      My personal opinion is that a component must be usable on it's own in a design, too much decomposition is not going in this direction.
      If you are talking about making a universal button with 800 variants that can be used in 100% of your projects, then that is indeed interesting, but personally I don't work like that, I prefer small, simple and functional components that I would have no trouble maintaining.

  • @TsukiiPNG
    @TsukiiPNG 6 месяцев назад

    j'ai tellement rien compris