Figma 2024 с нуля. Урок 4 - Компоненты и варианты, что такое и как их использовать

Поделиться
HTML-код
  • Опубликовано: 26 июл 2024
  • Разбираю, что такое компоненты и варианты компонентов: когда и как их создавать, как называть, как использовать
    Ссылки автора
    Урок по сложным компонентам - boosty.to/manka_dsgn/posts/7c...
    Стать душнилой (доп уроки) - boosty.to/manka_dsgn
    Быть в курсе всех событий - t.me/manka_dsgn
    Ссылки из видео
    Файлик в Notion (полезные ссылки и материалы к урокам по фигма) - foul-tree-99f.notion.site/cbe...
    Таймкоды
    00:00 - Вступление
    00:58 - Открытие файла
    03:10 - Как сделать кнопку
    4:10 - Что такое компонент и как создать
    20:10 - Как хранить компоненты
    21:50 - Материнский и дочерний компоненты
    27:07 - Добавляем иконки
    31:24 - Создание вариантов
    43:10 - Усложняем варианты (Boolean, Instance swap, Text)
    54:12 - Подведение итогов
    #figma #фигма #дизайн #design #tutorials

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

  • @EVolkov18
    @EVolkov18 6 дней назад

    Подобного не видел на ютубе, продолжайте, пожалуйста

  • @vladimircopaq7402
    @vladimircopaq7402 8 месяцев назад +6

    У вас талант вести курсы)

    • @manka_dsgn
      @manka_dsgn  8 месяцев назад

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

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

    Супер урок! Всё ясно, понятно. Без лишней сложности, но при этом со всеми тонкостями. Спасибо большое. Пересмотрела много уроков, но здесь поняла всё)

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

      Спасибо за обратную связь! 💙

  • @Disha_1901
    @Disha_1901 7 месяцев назад +3

    Вы просто чудо! Настолько понятного объяснения я ещё не находила на ютубе, просто БОГИНЯ!😍

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

      оу, спасибо большое! ❤ я рада, что вам полезно

  • @valeriya_vvv
    @valeriya_vvv 8 месяцев назад +3

    Жду каждый урок с нетерпением!
    У вас отличные уроки❤
    Жалко, что вы раньше не появились на моем пути 😅
    Очень жду урок про сетки !!

    • @manka_dsgn
      @manka_dsgn  8 месяцев назад

      спасибо большое! пока записываю по мере возможностей
      а что именно про сетки интересно?

    • @valeriya_vvv
      @valeriya_vvv 8 месяцев назад

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

  • @elli9424
    @elli9424 8 месяцев назад +1

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

    • @manka_dsgn
      @manka_dsgn  8 месяцев назад +1

      спасибо большое!
      я планирую провести мастер класс на эту тему, так как не всем нужно будет усложнение, пока думаю над структурой

    • @elli9424
      @elli9424 8 месяцев назад

      @@manka_dsgn тогда очень ждем))

  • @user-ci6lg9re8z
    @user-ci6lg9re8z Месяц назад

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

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

    Кайф! Пересмотрел урок во второй раз! Когда начинаются усложнения я испытываю настоящий восторг и ощущение что теперь шарю в фигме не на базовом уровне)

    • @manka_dsgn
      @manka_dsgn  6 месяцев назад +1

      тогда если 17 февраля придешь на эфир по сложным компонентам, то кайфанешь сильнее)
      будем с одной стороны усложнять, а с другой - раскладывать по полочкам

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

      @@manka_dsgn Я в деле!

  • @Asver_
    @Asver_ 8 месяцев назад +1

    Красотулечка, спасибо огромное за ваш урок!!! Как всегда всё круто.... ❤❤❤

    • @manka_dsgn
      @manka_dsgn  8 месяцев назад

      спасибо большое за обратную связь! ❤

  • @user-ep7cl1yt5y
    @user-ep7cl1yt5y 8 месяцев назад

    Очень подробно)
    Продолжай в том же духе, очень классный контент)

    • @manka_dsgn
      @manka_dsgn  8 месяцев назад

      спасибо большое за поддержку!

  • @liberty4187
    @liberty4187 8 месяцев назад

    Спасибо большое, пересмотрю еще😘 Подписалась😍

    • @manka_dsgn
      @manka_dsgn  8 месяцев назад

      пожалуйста, приятного пересмотра!)

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

    Спасибо очень классно все разжевали - просто вау!

  • @eukeeva
    @eukeeva 3 месяца назад

    УРА, наконец-то можно разобраться в компонентах. СПАСИБО

    • @manka_dsgn
      @manka_dsgn  3 месяца назад

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

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

    Потрясающий туториал) спасибо огромное!

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

      я рада, пожалуйста ❤

  • @ArtSon2009
    @ArtSon2009 8 месяцев назад +1

    Большое вам спасибо!!!!! ❤❤❤

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

      пожалуйста! ❤

  • @user-qe1ze4hg8f
    @user-qe1ze4hg8f 5 месяцев назад

    Спасибо за отличное видео)) Вы очень интересно и понятно объясняете

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

      спасибо за обратную связь! 🫶

  • @Alykasan
    @Alykasan 8 месяцев назад

    Прекрасный урок, лучше никто не объяснял. Спасибо большое!

    • @manka_dsgn
      @manka_dsgn  8 месяцев назад +1

      спасибо! я рада, что все понятно ❤

  • @user-dt7oi6bp2w
    @user-dt7oi6bp2w 7 месяцев назад

    ТЫ КРУТАЯ!!!!! СПАСИБО ЗА ТВОЙ ТРУД!!!!!

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

      спасибо большое!) ❤

  • @Varvar_art
    @Varvar_art 8 месяцев назад

    Для Win ALT + CTRL + K= Создать компонент
    Большое спасибо за уроки. Я - полная противоположность душнилке, организация внутри макетов - Нарния. Недавно наткнулась в ленте на ваше видео про 100500+ блоков и включила его фоном под работу. Теперь включаю уроки и перетряхиваю проекты, навожу порядок) Спасибо.
    (Смотрю на превью этого урока и не могу отделаться от мысли "Джастин Бибер и 50 оттенков синего" прастити!))

    • @manka_dsgn
      @manka_dsgn  8 месяцев назад

      Я безумно рада, что одна моих миссий реализуется - очень хочется видеть структурированные и понятные макеты коллег! Пожалуйста ❤
      Хах, да, Джастин - теперь мой любимый мем, а 50 оттенков синего - это отличное продолжение 😂

  • @user-th8fz7lu5z
    @user-th8fz7lu5z 8 месяцев назад

    Спасибо большое) Очень полезный и подробный урок, который мне прям нужен был.
    Я собрался в фигме делать шаблоны для соц. сетей. Для себя я умею делать, для заказов то есть, а как сделать это под шаблон, не знал.
    Не знал то есть, как автоматизировать разные моменты, тыкался в эти настройки, про которые вы рассказали, но методом тыка сложно было разобраться)
    Теперь буду знать, спасибо ещё раз)

    • @manka_dsgn
      @manka_dsgn  8 месяцев назад +1

      пожалуйста) спасибо большое за обратную связь!

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

    очень доходчиво! спасибо)

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

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

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

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

  • @attdesigner
    @attdesigner 8 месяцев назад

    умничка, все правильно :)

  • @JamesBond-jf4ni
    @JamesBond-jf4ni 4 месяца назад

    нехватает еще одного свойства варианта это когда кнопки разного размера к ним необходим свич!

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

    Ого сколько фишечек! Вот конспект горячих клавиш:
    - R - обновляет прототип
    - K - масштабирование фрейма вместе с содержимым
    - shift + ctrl + v - вставляет текст без стилей
    - ctrl+P - поиск любого плагина, который использовал

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

      K - скеил не только фрейма, но и любых других элементов)

  • @JamesBond-jf4ni
    @JamesBond-jf4ni 4 месяца назад

    а так в целом заибис )))) магёшь)

  • @forest5148
    @forest5148 5 месяцев назад +2

    Автолааут 😅

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

    Как вы сделали чтоб на видео было видно голову и клавиши которые нажимаете¿

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

      Программа OBS, там можно настроить отображение камеры. А клавиши через программу KeyCastr

  • @alenanagibina271
    @alenanagibina271 3 дня назад

    Аня, я когда нажимаю на текст в кнопке - не появляется значок мишени под "Hug - Hug". Несколько раз перепроверила - делаю все как у вас. Не знаете, почему так может быть?

    • @manka_dsgn
      @manka_dsgn  2 дня назад

      Это какая секунда видео, чтобы я понимала о чем именно речь?
      Фигма выпустила обновление, но оно пока не у всех. У вас еще старая версия, как у меня в видео, или уже новая?

    • @alenanagibina271
      @alenanagibina271 День назад

      @@manka_dsgn 43:38, когда нам нужно выбрать текст во всех кнопках. Да, фигма обновилась

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

    авто лаут

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

      какую цель и ценность несет ваш комментарий?

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

      @@manka_dsgn думаю ему как и мне слегка режет слух такоe произношение, лично я больше привык к "автолояут") но цели и смысла, я думаю, там не было :D

  • @JamesBond-jf4ni
    @JamesBond-jf4ni 4 месяца назад

    адски много балаболит левых слов которые только путают запутывают создают неясность! надо максимально коротко и исключительно подробно и только по делу. Никак нельзя скакать на что то отвлекаться. четкая цель четкое исполнение.

    • @user-fd7sv5pk1m
      @user-fd7sv5pk1m 3 месяца назад +1

      Создайте свой канал и выкладывайте туда бесплатно максимально короткие, исключительно подробные и только по делу уроки. А мы обязательно посмотрим и прокомментируем)

    • @JamesBond-jf4ni
      @JamesBond-jf4ni 3 месяца назад

      @@user-fd7sv5pk1m исчезни пушок из трусов)