Как сделать кнопку Фигме? Правила создания кнопки. Уроки Figma для начинающих.

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

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

  • @chanellll-332
    @chanellll-332 2 года назад +12

    Случайно наткнулась на канал, как тут не десятки тысяч просмотров. Настолько полезная информация, особенно для новичков. Я здесь информации нашла больше, чем у блогеров миллиоников. Не останавливайтесь!

    • @Chyrkov
      @Chyrkov  2 года назад +1

      Спасибо вам за такой приятный отзыв!)

  • @tatyanaorci8483
    @tatyanaorci8483 Год назад +3

    Спасибо ОГРОМНОЕ! Все четко ,без воды!

    • @Chyrkov
      @Chyrkov  Год назад

      Пожалуйста, рад что понравилось )

  • @ЕгорКозодой-х2ю
    @ЕгорКозодой-х2ю 9 месяцев назад +1

    спасибо)я очень ценю, то что вы делитесь своим опытом

    • @Chyrkov
      @Chyrkov  9 месяцев назад

      Пожалуйста)) а вам спасибо за комментарий!)

  • @melodystemptation
    @melodystemptation Год назад +1

    Дякую! Це єдине відео з усіх, що передивився де нормально пояснено як робити анімацію кнопки!

    • @Chyrkov
      @Chyrkov  Год назад

      супер) я радий, що вам сподобалося і було все зрозуміло!✊

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

    Конечно полезное видео! Спасибо! Пошёл смотреть ,что ещё у вас есть)

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

      Спасибо за отзыв!) заходите ещё)

  • @Nikaflow_art
    @Nikaflow_art 5 месяцев назад

    Мега полезный урок!!! Нашла даже больше чем искала и все в одном видео! Спасибо

    • @Chyrkov
      @Chyrkov  5 месяцев назад

      Супер! Я рад 😇

  • @katerynapiligrim2829
    @katerynapiligrim2829 2 года назад +5

    Отличное видео! Очень полезно, говорите спокойно, все действия называете, а не клацаете так что не понятно что вообще происходит 😂
    Спасибо большое! Сделала красивые кнопки 😋

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

      спасибо! рад, что было полезным!)

  • @xeniaartsman
    @xeniaartsman 2 года назад +5

    Отличное видео! Голос убаюкивающий, приятный))

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

      Спасибо!😅

  • @manshukzhumasheva8382
    @manshukzhumasheva8382 11 месяцев назад +1

    Очень полезное видео! Спасибо вам!

    • @Chyrkov
      @Chyrkov  11 месяцев назад +1

      Пожалуйста! Рад, что понравилось!

  • @leroyhom8433
    @leroyhom8433 2 года назад +1

    Сергей, вы чудесный, спасибо!

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

      😅 спасибо большое!

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

    Спасибо, очень полезно и понятно😊

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

      Пожалуйста)

  • @Hy6_Homep_gBa
    @Hy6_Homep_gBa Год назад +2

    Интересно, а кнопка "показать ещё" так же делать? Было бы интересно ,если бы Вы рассказали, как использовать её в совокупности со страницами, когда при нажатии данной кнопки появляется снизу ещё меню

    • @Chyrkov
      @Chyrkov  Год назад

      Да конечно принцип такой же) за идею спасибо)

  • @GEM_2
    @GEM_2 2 года назад +1

    Доступно и понятно, пасиб)

    • @Chyrkov
      @Chyrkov  2 года назад +1

      Спасибо за отзыв) рад, что все понравилось!)

  • @yuliaanisakharova
    @yuliaanisakharova 2 года назад +1

    Супер, спасибо!

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

      Пожалуйста, успехов!)

  • @st_valentine
    @st_valentine Год назад +1

    так, спасибо огромное) кнопку я создал) расставил по фрейму, куда надо, все работает - шевелится куда надо. а теперь вопрос: как мне ее правильно впихнуть в zeroblock на тильде? там написано довольно коротко "загрузите блок"...

    • @Chyrkov
      @Chyrkov  Год назад

      Привет!) Ответил в телеге)

  • @ArmenianArthurBoy
    @ArmenianArthurBoy 2 года назад +1

    Очень здорово, спасибо)

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

      Пожалуйста))

  • @НаталіяВасилівна-е9у
    @НаталіяВасилівна-е9у 2 года назад +1

    Спасибо! Отличное видео. Только пожелание четче экран сделать.

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

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

    • @НаталіяВасилівна-е9у
      @НаталіяВасилівна-е9у 2 года назад +1

      @@Chyrkov Я имела ввиду четкость трансляции Вашего экрана))), но все равно спасибо!

  • @АлександрСилков-ф2ж
    @АлександрСилков-ф2ж 2 месяца назад

    Спасибо., зашло..)

    • @Chyrkov
      @Chyrkov  2 месяца назад

      Огонь 🔥

  • @ondskapt4059
    @ondskapt4059 2 года назад +1

    Огонь!

  • @МарияМеркулова-п3в
    @МарияМеркулова-п3в 2 года назад +1

    Спасибо ) только я так понимаю в бесплатной версии фигма анимации нет (

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

      Лицензия не влияет на наличие анимации. Она доступна и в бесплатной версии 😉

  • @dariachetverikova8508
    @dariachetverikova8508 Год назад

    спасибо за видео!

    • @Chyrkov
      @Chyrkov  Год назад

      Пожалуйста!)

  • @kristinachernaya4292
    @kristinachernaya4292 2 года назад +1

    Здравствуйте. Делала всё как показано в видео. Но на просмотре работает только 1 кнопка (первая), а остальные нет. Я даже переделывала, но ничего не изменилось. В чём может быть проблема?

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

      Добрый день! Так сложно понять что именно не так. Скорее всего проблема именно в настройках самого прототипа, а именно настройки интерактивных прототипов.

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

    Доброго дня, подскажите в чём ужасность капса в дизайне? У меня часто просят именно капс у кнопки, как-то раньше и не задумывалась, что прям нежелательно так делать, сейчас задумалась и понять не могу, хорошо ж смотрится, не? )

    • @Chyrkov
      @Chyrkov  5 месяцев назад +1

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

  • @galynaarikh4548
    @galynaarikh4548 2 года назад +1

    Здравствуйте, а как теперь эту кнопку встреть на все страницы сайта?

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

      Конечно, просто копируйте кнопку из компонента в нужные месте в макете и все.

  • @Svetlana_Murenets
    @Svetlana_Murenets Год назад +1

    А как сохранить готовую анимацию для заказчика?

    • @Chyrkov
      @Chyrkov  Год назад

      Анимацию можно сохранить в формате Lottie через их плагин, но для кнопок в этом никого смысла. Анимации кнопок делается через CSS и JavaScript разработчиком.

  • @ОлександрПопсуй
    @ОлександрПопсуй Месяц назад

    Как в способе с авторазметкой убрать надпись Frame2 над кнопкой?

    • @Chyrkov
      @Chyrkov  Месяц назад

      Frame2 - это название фрейма. Вы можете изменить его в слоях, нажав правой кнопкой на нужный слой, затем выбрав Rename. Если вы расположите фрейм внутри другого фрейма то название первого не будет видно в рабочей зоне

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

    Очень полезное видео!

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

      Досмотрела до конца, вообще очень круто! Так рада, что наткнулась на Ваш канал, Сергей. Большое спасибо! Это именно то, что я искала.

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

      Спасибо большое)) рад, что нравится!)

  • @usman_lab
    @usman_lab Год назад +1

    как копировать? у меня не получается, тоесть, я вытаскиваю копию из компонентов, и затем вставляю в нужное место, проверяю, а она не реагирует

    • @Chyrkov
      @Chyrkov  Год назад

      Можно перетянуть с зажатым альтом или достать компонент из вкладки assets

    • @usman_lab
      @usman_lab Год назад +1

      @@Chyrkov оу, спасибо, попробую, я просто новенький в дизайне, и тут сразу же на конкурс кое-какой попал, нужно создать кнопку анимированную, а не знаю как :)

    • @Chyrkov
      @Chyrkov  Год назад

      Понял)) удачи вам!!!

  • @morikaru
    @morikaru 2 года назад +1

    а как сделать чтобы кнопка активировала сыллку при нажатии?

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

      В настройках прототипа кнопки (interaction), выбираем on click, затем ниже вместо navigate to нужно выбрать open link и указать нужную ссылку😉

  • @АлланТагиров
    @АлланТагиров 5 месяцев назад

    А как этот проект сохранить и опубликовать?

    • @Chyrkov
      @Chyrkov  4 месяца назад

      В Фигме не нужно сохранять, все автоматически сохраняется в облако. Чтобы опубликовать нажмите share в верхнем правом углу

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

    Все хорошо, только у меня не получается перенести кнопку из сета как на видео. У меня он уносит одну кнопку, а вторая остается в предыдущем фрейме🥺 И соответственно анимация не работает.

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

      Скорее всего у вас не копируется кнопка когда вы ее тяните. Попробуете потянуть с зажатым альтом

  • @ihorfedorchuk
    @ihorfedorchuk Год назад

    Очень полезно.

  • @שלימרסל
    @שלימרסל 2 года назад

    Как вы кнопки перенесли на другой фрейм? Скопировали или что

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

      Да можно перетянуть с зажатым альтом из компонента или просто скопипастить ☺️

  • @dreamgarden1352
    @dreamgarden1352 Год назад +1

    Автор конечно молодец. Но он не объясняет как он копирует кнопки, как оно их вынимает . Может я конечно настолько тупой, но почему бы на это лишнюю минуту не потратить

    • @Chyrkov
      @Chyrkov  Год назад +2

      Спасибо за отзыв! Это базовые действия о которых обычно забываешь сказать, так как делаешь их машинально. Кнопки копируются как и любой элемент, просто выделите ее и с зажатым альтом (option для MacOS) потяните в сторону. Так можно скопировать все что угодно. Кстати в других графических редакторах, например Фотошоп, это работает точно так же😉

  • @МаринаПрохорова-ж7ж
    @МаринаПрохорова-ж7ж 7 месяцев назад

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

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

      Не вижу ошибок))

  • @black_hole_888_yt7
    @black_hole_888_yt7 Год назад

    Как их перенести?16:09 как их перенести? Чё зажать? Сказать нельзя блин!

    • @Chyrkov
      @Chyrkov  Год назад

      Без паники! Мы создаем дочерний компонент, с зажатым ALT переносим из основного компонента, по сути копируем элемент. Можно так же вынести копию компонента из панели Assets.

  • @rachelmagic3416
    @rachelmagic3416 Год назад

    А как её скачать?

    • @Chyrkov
      @Chyrkov  Год назад

      Что именно? Можно сохранить код кнопки в CSS

  • @dlendisbook3128
    @dlendisbook3128 Год назад +1

    Я НЕ ПОНИМАЮ КАК ВЫ ЕЕ ПЕРЕНОСИТЕ, Я ПЕРЕНОШУ, И АНИМАЦИЯ ЛОМАЕТСЯ, КАК?????????

    • @Chyrkov
      @Chyrkov  Год назад

      Я правильно понимаю, что переносите вариант кнопки из компонента? Это нужно делать с зажатым alt (windows) или option (macOS), то есть по факту делаете копию этого варианта. Можно просто скопипастить, или взять ее из вкладке assets где находятся все компоненты