Animated Buttons in

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

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

  • @timurislakaev-uiuxwebdesign
    @timurislakaev-uiuxwebdesign  4 года назад +4

    Animated Buttons in #FIGMA Анимируй кнопки в FIGMA
    Prototype file: www.figma.com/proto/8T2HgwMmSgcUd9cJ9abc3g/BUTTONS-Animation-in-FIGMA?node-id=1%3A5&viewport=1024%2C1052%2C0.5&scaling=min-zoom
    Исходник / Source file: www.figma.com/file/8T2HgwMmSgcUd9cJ9abc3g/BUTTONS-Animation-in-FIGMA?node-id=0%3A1

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

      А если изображение имеет скроллинг, и при ховеры вы прокрутились немного, то изображение будет прыгать вверх?

  • @ИринаЧ-ы4к
    @ИринаЧ-ы4к 4 года назад +3

    Невероятно, шикарные кнопки👏 😊 Однозначно подписка👌успехов с каналом💪

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

    Привет, попробовал 4 кнокпи из примеров, все получилось, все гуд! спасибо!

  • @ВикторияГолинская-з8д

    Видео хорошее, но почему не показаны другие варианты. В исходнике все тоже самое, как понять как делать другие анимации

  • @айшаабду-м7ж
    @айшаабду-м7ж 2 года назад

    шикарно спасибо за видео

  • @АртурСаакян-и1в
    @АртурСаакян-и1в 3 года назад +1

    Круто, очень круто ,молодец!!

  • @КАТАПУШКА-г1н
    @КАТАПУШКА-г1н 3 года назад +2

    Спасибо большое! Всё понятно!

  • @audiomegalibrary8959
    @audiomegalibrary8959 4 года назад +7

    Тимур спасибо огромное тебе за такие чудесные уроки! Во многом помогли мне как начинающему дизайнеру! НОООООО! Что за музыка! Вынос мозга полный! Я не собираюсь спорить о музыкальных предпочтениях - это личное дело каждого из нас. Но очень прошу в следующих роликах использовать нейтральную фоновую музыку. Ещё лучше когда ты комментируешь свои видео! А так отличный канал, с удовольствием и большой пользой провожу время за просмотром твоих роликов. С уважением Александр.

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

      Музыка годная, мне зашло

  • @kanatyes
    @kanatyes 4 года назад +6

    Я не понял, как мне потом в других фреймах эту кнопку использовать? Простое перетаскивание/копирование не работает, в компонент перевожу - тоже(

  • @annayelizarova7155
    @annayelizarova7155 4 года назад +4

    то что надо! СПАСИБО! Подписалась в колокол ударила =) Удачи с каналом!

  • @SrinivasBuddha69
    @SrinivasBuddha69 4 года назад +1

    amazing buttons bro

  • @kadirovgroup
    @kadirovgroup 4 года назад +1

    Круто! Удачи тебе

  • @ЮлияХусаинова-в5х
    @ЮлияХусаинова-в5х 4 года назад +3

    Спасибо за видео! Подскажите пожалуйста как вы заанимировали третью кнопку. Никак не получается((((

    • @timurislakaev-uiuxwebdesign
      @timurislakaev-uiuxwebdesign  3 года назад +2

      Спасибо, кнопка - № 3, нужно в первой кнопке сделать в 1px шириной полоску вертикальную на высоту кнопки и наложить ее прям на край обводки, после дублируем кнопку, и во второй кнопке при наведении эту полоску в 1px расширяем на ширину самой кнопки, получится то что в видео. также сдублируйте исходник и посмотри в слоях, сравните их, уверен сразу догадаетесь.

  • @Nsdimon
    @Nsdimon 4 года назад +2

    БРО ты помог мне ... Я как раз делал сайт и не получалось не как ховер у кнопки сделать! Спасибо от души!

  • @elguajo.96
    @elguajo.96 4 года назад +1

    Классный урок!

  • @tpostolova
    @tpostolova 4 года назад +1

    super

  • @niceedesign2039
    @niceedesign2039 4 года назад

    Привет,а где взять этот синий маркер на нижний слое,когда ты нажал prototype

  • @gonchKV87
    @gonchKV87 4 года назад +1

    Супер) Только один вопрос, как их сделать кликабельными? Чтобы навёл курсор получил эффект, а потом ещё и нажал на неё с переходом на другую страницу.

    • @timurislakaev-uiuxwebdesign
      @timurislakaev-uiuxwebdesign  4 года назад +1

      для этого надо на второй кнопке где дизайн ховера сделать переход на страницу при клике

    • @gonchKV87
      @gonchKV87 4 года назад +1

      @@timurislakaev-uiuxwebdesign спасибо 🤝 и отдельно спасибо за видео. 💪 Однозначно подписка!

    • @sokolovdesign87
      @sokolovdesign87 4 года назад

      @@timurislakaev-uiuxwebdesign тогда после клика, открытия и потом закрытия попапа, кнопка остается в состоянии ховера, а не возвращается в первоначальное. Или я что-то не так делаю?

    • @timurislakaev-uiuxwebdesign
      @timurislakaev-uiuxwebdesign  4 года назад

      @@sokolovdesign87 ага что то не так делаешь, если в прототипе выбрать ховер, то изменения будут только при наведении, а если выбрать клик, то изменения будут работать по клику и назад уже не вернуться на состояние дефолт, только если не сделать в обратную сторону клик на первый прототип

  • @urhorattel
    @urhorattel 4 года назад

    Timur, спасибо!
    Нереально хорошо и грамотно!
    На канал подписался! Класс - жду новых фишек!

  • @timofeev_sergey1991
    @timofeev_sergey1991 4 года назад +1

    Красавчик, подписался!

  • @Alex-hm3uk
    @Alex-hm3uk 4 года назад +4

    Если много экранов, то таким способом создавать для каждого экрана копиюю это жуть как неудобно.

  • @КсенияЩукина-ъ5в
    @КсенияЩукина-ъ5в 3 года назад

    Как кнопку сохранить с анимацией? И как ей задать адрес,чтобы при нажатии перекидывало на опред страницу на апт сап например

  • @ВарвараОнли
    @ВарвараОнли 4 года назад

    Отличные видео! Спасибо!

  • @helenmyrlen1887
    @helenmyrlen1887 4 года назад +4

    Классно получилось!
    Я так и не поняла как делать остальные кнопки(

  • @МарияУварова-ь8р
    @МарияУварова-ь8р 4 года назад +1

    Спасибо!

  • @nataliepodverbnaya7043
    @nataliepodverbnaya7043 4 года назад +1

    Спасибо

  • @alimamedgasanov5591
    @alimamedgasanov5591 4 года назад

    Какой стандартный размер сайта в пикселях
    Если можешь ответь, очень нужно...

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

    How did you solve the problem of the top button? It is animating while hovered in the button below. I am facing the same problem

  • @atbxoxo
    @atbxoxo 4 года назад +5

    Background music is insane. And not in a good way. Okay lemme try this is again, The background music is f*cking INSANE, are you crazy?!!
    GOD smh

    • @timurislakaev-uiuxwebdesign
      @timurislakaev-uiuxwebdesign  4 года назад

      you made me laugh

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

      @@timurislakaev-uiuxwebdesign Вот реально, такую музыку на туториалах это просто пиздец, вот серьезно! Без негатива, просто это отпугивает. За видео спасибо!

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

      @@timurislakaev-uiuxwebdesign присоединяюсь, диз поставлен только из-за музыки

  • @kamidesign0
    @kamidesign0 4 года назад +1

    А как сдавать проект сделаный в figme? В фотошопе отдаешь psd, а тут как не пойму. Не ужели на выходе верстальшик получает вот такую кучу страниц как у тебя в видео?

    • @timurislakaev-uiuxwebdesign
      @timurislakaev-uiuxwebdesign  4 года назад +2

      В фигме еще проще передать исходник, шаришь ссылку верстаку и он может работать с файлом из браузера.
      а по поводу большого кол-ва страниц, конечно так исходник не собирается для разработчика, это только демонстрация для клиента, для верстака достаточно показать одно действие или отдельно ТЗ, а лучше отдельный uikit файл со всеми элементами взаимодействия.

  • @MAGATRONE
    @MAGATRONE 4 года назад +1

    Видео хорошее, но я либо тупой, либо да, потому что у меня начинается адские пляски с фреймами, хотя я делаю всё, как ты показал.

    • @timurislakaev-uiuxwebdesign
      @timurislakaev-uiuxwebdesign  4 года назад +1

      возможно, что скорее всего, какой то шаг пропустил, думаю стоит повторить процесс и все обязательно получится

    • @MAGATRONE
      @MAGATRONE 4 года назад +1

      @@timurislakaev-uiuxwebdesign А, ну я не правильно делал. Я копировал не весь фрейм, а только кнопку, вот и был ад.

  • @ІраГорай-л5х
    @ІраГорай-л5х 4 года назад +3

    в начале видео показал как крутые кнопки, а показал как делать элементарную очевидную кнопку, а остальные догадайтесь сами, блин, издевательство

    • @timurislakaev-uiuxwebdesign
      @timurislakaev-uiuxwebdesign  4 года назад

      :) ну там же я оставил исходник, что бы посмотреть что внутри, принцип везде одинаковый. Но думаю стоит отдельно записать видео подробное на каждую кнопку

    • @ІраГорай-л5х
      @ІраГорай-л5х 4 года назад +2

      @@timurislakaev-uiuxwebdesign там только просмотр доступен, все равно не видно как это сделано

    • @timurislakaev-uiuxwebdesign
      @timurislakaev-uiuxwebdesign  4 года назад

      @@ІраГорай-л5х напишите мне в телеграм, я вам помогу t.me/Timur_Islakayev

  • @stellal7864
    @stellal7864 4 года назад +1

    Покажи как делать остальные кнопки, а то смысл тогда из здесь демонстрирвоать ???

  • @romanbaev3206
    @romanbaev3206 4 года назад

    Минус. Через оверлей намного разумнее это делать

    • @timurislakaev-uiuxwebdesign
      @timurislakaev-uiuxwebdesign  4 года назад

      Через оверлей не будет анимации как в примерах

    • @timurislakaev-uiuxwebdesign
      @timurislakaev-uiuxwebdesign  4 года назад

      Для демонстрации достаточно показать одну кнопку, так будет понятнее, что должно быть, как для клиента, так и для верстака. Эффектная презентация намного увеличивает впечатление и тем самым повышает процент, что ваш проект примут и утвердят. А что скрыто внутри и как это сделано, это уже не так важно, главное конечная цель.

    • @timurislakaev-uiuxwebdesign
      @timurislakaev-uiuxwebdesign  4 года назад +1

      Также в грамотной дизайне не должно быть большое разнообразие кнопок, достаточно обойтись 2-3 стилями кнопок на весь дизайн

    • @Кылыч-д7г
      @Кылыч-д7г 4 года назад +2

      @@timurislakaev-uiuxwebdesign думал в фигме придумали наконецто анимацию ховеров, а тут опять эти новые страницы создаются

    • @mariadawnwork9387
      @mariadawnwork9387 4 года назад

      @@romanbaev3206 там ничего нет(