На 97,5% полностью адаптивный дизайн в Figma за 16 минут

Поділитися
Вставка
  • Опубліковано 2 січ 2025

КОМЕНТАРІ •

  • @DoFurther
    @DoFurther  2 місяці тому

    Моя программа обучения веб-дизайну:
    dofurther.ru/
    Телеграм-чат с обсуждением по новому контенту, анонсами и результатами студентов:
    t.me/ftplatform

  • @syndromtorrenta
    @syndromtorrenta 10 місяців тому +30

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

  • @Sersimik
    @Sersimik Рік тому +3

    Подход на 10 баллов по 5 бальной системе. Рассказал и показал просто огонь. Для новичков просто топ

  • @katerinakozhevnikova9185
    @katerinakozhevnikova9185 2 роки тому +76

    Материал очень насыщенный, мне нужно будет несколько раз пересмотреть, чтобы прям осознать всё. Идея,где ты используешь предметы реального мира, чтобы объяснить функционал очень классная и запоминающаяся. Появляющаяся фотка Девида Блейна - это так забавно и супер врезается в память,ну мне по крайней мере😆

    • @Chihuahua-du5zx
      @Chihuahua-du5zx 2 роки тому

      По хорошему все лучше повторить)

    • @katerinakozhevnikova9185
      @katerinakozhevnikova9185 2 роки тому

      @@Chihuahua-du5zx Ну так то согласна, нужно повторять)

    • @Qundoff
      @Qundoff 2 роки тому

      women 😇

  • @ТимофейФедорец-н3д
    @ТимофейФедорец-н3д 2 роки тому +9

    Игорь, большая благодарность тебе за твои видео. Тебя очень интересно смотреть, здорово, что коллега посоветовал твой канал. Тоже верстаю на вебфлоу и иду по твоему пути, в какой-то мере. Мне тоже скоро 35) Выздоравливай!!! А самое главное, желаю тебе проснуться в мирной и свободной стране, а себе в стране не дураков, а гениев. Пусть даже и через 100 веков. Берегите себя, ребята.

    • @DoFurther
      @DoFurther  2 роки тому +2

      Спасибо за пожелание и цитирование Талькова )

  • @aigerimsabyrbek5010
    @aigerimsabyrbek5010 Рік тому +4

    Ура, все курсы по UX дизайну в одном видео! Лет 6 видимо ждала такое подробное видео, а это за все время изучения и появления фигмы 😭😭😭🙏🙏🙏 Благодарна от души 💓💖

  • @jelly_bean-l3m
    @jelly_bean-l3m 8 місяців тому

    это бесценный урок......... спасибо огромнейшее!! тысячи огоньков❤‍🔥❤‍🔥❤‍🔥❤‍🔥❤‍🔥 точно буду в свободное время пересматривать и тренироваться по этому уроку

  • @EugeneD456
    @EugeneD456 2 роки тому +5

    Видно, что материал очень детально проработан и самое важное понятно рассказан! Ребята большие молодцы 👍Смотрел с удовольствием, так держать

  • @designzhaba
    @designzhaba 2 роки тому +1

    Найкращий, лови вподобайку! Як креативно подаєш матеріал, підтримаю тебе дуже давно і вдячна за кожен ролик. Люблю!

  • @gamer83m
    @gamer83m 2 роки тому +1

    Блин.... эти видео должны быть платными...
    Это же целая супер сила!!!

  • @pavelsemenov8433
    @pavelsemenov8433 2 роки тому +2

    Блин! Это очень изящно! Но, походу, придётся раза 2 ещё посмотреть) спасибо!

  • @ТатьянаСидоренко-х8у

    Зная твою обстановку в какой ты оказался,ты просто молодец!!!

  • @uxlana
    @uxlana 10 місяців тому

    Очень крутое видео, информация изложена четко. Непростая тема, я пересмотрю еще пару раз, но многие вещи встали на свои места. Редко встретишь настолько подробное видео с простым объяснением. Классные фишки для себя записала. Благодарю!

  • @Net_Lenka
    @Net_Lenka 2 роки тому +3

    Давно ждала такое видео. Правда понимаю, что нужно еще пару раз пересмотреть и попрактиковаться) Спасибо!

  • @dariaserhiienko3876
    @dariaserhiienko3876 2 роки тому +2

    Оце так контент! Дякую безмежно, давно шукала такий туторіал на живому проекті ,а не просто окремих елементів)

    • @DoFurther
      @DoFurther  2 роки тому

      Я так и хотел )

  • @taneka88
    @taneka88 Рік тому

    Огромное спасибо! Ни в одном платном курсе не видела, чтобы так показывали про адаптивность. Там на уровне: создаем новый фрейм под планшет и под айфон, переносим и собираем 😵‍💫

  • @Johnsson25
    @Johnsson25 7 місяців тому

    Очень круто! Всех вам благ и миллиона подписчиков!

  • @ballantines8617
    @ballantines8617 2 роки тому +1

    Игорь, ты мой кумир! я уже собираю фигурку тебя из ЛЕГО!!!

    • @DoFurther
      @DoFurther  2 роки тому

      Круто ) Обязательно скинь что получиться. Кепки, кстати сложно делать из лего ;)

  • @КириллАникеев-е2ш

    Бомба, смотрю Ваши видосы уже 6 часов, и не могу оторваться, продолжайте в том же духе 😂

  • @germanshaburnikov1032
    @germanshaburnikov1032 2 роки тому

    Чувак, а че так сочно то а? Офигенно снятно и хорошо рассказано, лови лайков в тачанку)) оч круто!

  • @paperfacesingold2
    @paperfacesingold2 2 роки тому +3

    Видео-урок по фигме это просто супер!

  • @hannahlukhouskaya4678
    @hannahlukhouskaya4678 6 місяців тому

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

  • @zivart_ua
    @zivart_ua 2 роки тому

    Як завжди контент на висоті!
    Надіюсь, колись щось подібне буде рідною мовою.

    • @DoFurther
      @DoFurther  2 роки тому

      Я теж на це сподiваюсь XD

  • @МарияЗастрожина

    Вау, находка❤ спасибо
    Все четко, инсталляции вобще шикарны))😍

  • @Askar_Abdullin
    @Askar_Abdullin 3 місяці тому

    Лучший видос на эту тему! Спасибо большое :)

  • @defaultalf5161
    @defaultalf5161 2 роки тому +1

    Огромное спасибо, это прям то, что я хотел найти! Подробный разбор автолейаута) Так главное попалось видео случайно, в рекомендациях!)) Подпишусь!

  • @xeniaartsman
    @xeniaartsman 5 місяців тому

    Круто! 🔥Надо обновить, с учётом обновлений в фигме😏

  • @sergiosokolovski7154
    @sergiosokolovski7154 2 роки тому +2

    Очень круто, просто и доступно. Спасибо большое! Делай, пожалуйста побольше такого, полезного контента =)

    • @DoFurther
      @DoFurther  2 роки тому

      Что-то базовое и практическое?

    • @sergiosokolovski7154
      @sergiosokolovski7154 2 роки тому +1

      @@DoFurther практическое, пожалуйста ☺️

  • @zzz7net
    @zzz7net 2 роки тому +9

    Если Вассермана обычно слушают на скорости 1.5, то здесь ставьте максимум 0.75, чтобы ничего не пропустить. Пожалуйста!

  • @Elenciaa
    @Elenciaa Рік тому

    огромное спасибо за такой подробный и крутой урок!!

  • @atthefirstopportunity
    @atthefirstopportunity 2 роки тому

    Спасибо дружище! Береги себя и близких пожалуйста 🤍

  • @alexeysmotin
    @alexeysmotin 3 місяці тому

    Красава. Спасибо за работу.

  • @io_sova
    @io_sova 4 місяці тому

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

  • @levanczcm3720
    @levanczcm3720 2 роки тому +1

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

  • @ИванУланский
    @ИванУланский 2 роки тому +2

    Спасибо огромное за такой титанический труд¡

    • @DoFurther
      @DoFurther  2 роки тому

      По правде говоря, я действительно подзадолбался пока делал это видео )

  • @GrayDelta-ql3kg
    @GrayDelta-ql3kg 2 роки тому

    Очень качественний контент, спасибо

  • @Alex-qm9mf
    @Alex-qm9mf 2 роки тому

    Огромное спасибо, лучший контент)

  • @sergeyglushakov6002
    @sergeyglushakov6002 2 роки тому

    Вот это пушка контэнт !)

  • @breathrelief
    @breathrelief Рік тому

    Материал хорош, но боже, что за инсталляции с крафтовым картоном 😍😍😍😍😍

  • @ostrovmuzy
    @ostrovmuzy 8 місяців тому

    Со знанием дела. Очень интересно!

  • @npavelchenko
    @npavelchenko 2 роки тому

    Безумно полезное видео! Спасибо большое!

  • @redocean1005
    @redocean1005 2 роки тому

    Прекрасная работа, спасибо

  • @kooknuke
    @kooknuke 2 роки тому

    Как всегда топ! Спасибо!

  • @KillJoy1113
    @KillJoy1113 7 місяців тому

    Это было супер полезно!!!

  • @dianayazvinska1383
    @dianayazvinska1383 28 днів тому

    круто, правда интересно 👍

  • @Cherusenberg
    @Cherusenberg Рік тому

    Оч крутое видео, спасибо)

  • @aleksey22095
    @aleksey22095 2 роки тому +6

    По началу, думаю как и все, все группировал по папкам. Потом через констреинс, когда на фигму перешел. Но как я кайфанул, когда наконец осилил Auto layout. Госпади, спасибо разработчикам фигмы. Особенно последнее обновление порадовало, когда добавили абсолютное позиционирование.
    Если все нормально настроил для десктопа, то на адаптив времени немного нужно.
    Как вспомню времена, когда в фш все приходилось переделывать, аж вздрагиваю))

    • @DoFurther
      @DoFurther  2 роки тому +2

      То были темные времена XD

  • @freemsg
    @freemsg 2 роки тому

    Очень крутой материал для изучения! Спасиб

  • @Milevi4
    @Milevi4 2 роки тому

    Великий лайк, друже!) Дуже корисний матеріал)

  • @matteriya6637
    @matteriya6637 Рік тому

    Ого это очень круто ❤😊😊

  • @Alexenuuu
    @Alexenuuu 2 роки тому +1

    Привет) Cуперский видос!!! Было б интересно как верстать этот адаптивный в WIX или WebFlow

    • @andriy-kos
      @andriy-kos Рік тому

      Присоединяюсь

  • @Пробуждение-ь6ш
    @Пробуждение-ь6ш 5 місяців тому +2

    пздц как все это сложно

  • @IgorBobyrev
    @IgorBobyrev Рік тому

    Где вы раньше были, где? 😭

  • @exfobae
    @exfobae 2 роки тому +1

    пока досмотрел ролик и узнал про движуху, все места уже раскупили 😶

    • @DoFurther
      @DoFurther  2 роки тому

      Это я жестко натупил с настройками. Сам чешу репу, почему только один человек записался (*вытираю слезы*)

  • @litvin23
    @litvin23 2 роки тому +1

    4:35 в Adobe XD есть такая штука как Stack (единственное чего не хватает в Figma) - разное расстояние между группой слоёв. Можно менять порядок слоёв, а общий принцип остаётся

    • @VadimIlyin
      @VadimIlyin 2 роки тому

      Да ладно

    • @DoFurther
      @DoFurther  2 роки тому +4

      Посмотрел на UA-cam, прикольная фича. Есть чего ожидать от фигмы в следующем году )

  • @sashfomin
    @sashfomin Рік тому +1

    Звучит так, будто без 100 гр. не разобраться. Вроде понятно, но цепочка не выстраивается в голове. Но все равно круто, спасибо за видео))

  • @stanislavak7778
    @stanislavak7778 Рік тому

    Спасибо ) Польза!!!

  • @yeahLively
    @yeahLively 2 роки тому

    Что за контент ,🎉 спасибо !

  • @dsurkovv
    @dsurkovv Рік тому

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

  • @ChesnokZnak
    @ChesnokZnak 15 днів тому

    Все эти автолейауты и привязки нужны только дизайнеру, чтобы делать быстрее адаптивы? Или верстальщику тоже важно, чтобы они были настроены? А если мне лень все это настраивать и быстрее переверстать в случае правок? Верстальщику это норм?

    • @DoFurther
      @DoFurther  15 днів тому

      для верстальщика скорее это двойная работа

  • @ilyasafronov2421
    @ilyasafronov2421 2 роки тому

    Здорово, спасибо!

  • @Alikhan-xm1xq
    @Alikhan-xm1xq 4 місяці тому

    Привет. Хотел бы спросить, а как это будет верстаться? Верстальщик будет играться с размерами фрейма и смотреть что как меняется и реализовывать в верстке?

  • @graysnake6143
    @graysnake6143 2 роки тому

    Хахахахах. Я в шоке! Ну красавчик. Точно дэвид блэйн! Подписываюсь.

  • @vitavika
    @vitavika 2 роки тому

    Класна робота! Найчастіше приходиться робити адаптив саме для мобільного екрану і там буде дуже багато ручних доопрацювань, перебудови блоків і тд.

  • @СветланаТрошкова-м2и
    @СветланаТрошкова-м2и 9 місяців тому

    Куда делся Space Between в 2024?

  • @armazet8081
    @armazet8081 6 місяців тому

    Сейчас покажусь дураком. Но я всё время думал, что сетка просто для удобной ростановки, и никаких функций не несёт 😳. Вот это нифига себе 😆

  • @desssigner
    @desssigner 2 роки тому +2

    Очень полезная вещь для тех кто начинает. Для тех кто с опытом тоже полезно, если что :))

  • @dariaserhiienko3876
    @dariaserhiienko3876 2 роки тому

    Привіт, а коли розпочнеться дизайн практика? я підписалася та дуже чекаю на початок)

  • @Mrnsky
    @Mrnsky 9 днів тому

    всё еще непонятно что делать со шрифтами, которые для мобилок должны быть меньше

  • @urumova_elina
    @urumova_elina Рік тому

    у меня не получаааетсяяя 🥲 что-то я делаю не так

  • @wswanter
    @wswanter 2 роки тому +2

    Требую фулл название файла!!!!!!😄

    • @DoFurther
      @DoFurther  2 роки тому +2

      Да там всё вместилось ) Все три недели отчаяния, когда я выносил стационарный компьютер, чтобы при помощи телефона за 40 минут запустить фигму и занести включенный компьютер обратно в мастерскую. Короче говоря, без интернета - трудно )

  • @Anton_Ivaniuk
    @Anton_Ivaniuk Рік тому

    Супер полезно!

  • @Karnassix
    @Karnassix Рік тому

    Наглядно и понятно, заодно еще пару полезных нюансов показал. Но побуду граммарнаци. Это не адаптивность. Это «респонсив» дизайн. Фактически это то, из чего в свое время адаптивность выросла

  • @dimaerlikh8887
    @dimaerlikh8887 Рік тому

    Привет, спасибо за видос! Очень круто. Подскажи, пожалуйста, почему у меня у компонента article_thumb нет возможности "fill conteiner", а у тебя есть?)))

  • @alexunknown5152
    @alexunknown5152 7 місяців тому

    Так через что ты там загрузил бл***скую Фигму?)

  • @АлексейЛашманов-и1б

    один вопрос, а для чего это нужно?

    • @alionacandvi
      @alionacandvi Рік тому +1

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

  • @anya6182
    @anya6182 2 роки тому +1

    Мне кажется следующий шаг это выгрузка дизайна фигмы сразу в код. Или такой плагин уже есть?
    Ведь по сути все эти блоки это дивы в html а настройки автолейаута это настройки css ))

    • @DoFurther
      @DoFurther  2 роки тому +1

      Ага. Это то к чему нас подталкивают инструменты в Фигме.

    • @vgenm2457
      @vgenm2457 2 роки тому

      Он есть, толь в твоих мечтах 😄

    • @andriy-kos
      @andriy-kos Рік тому

      Такие плагины уже есть)) но они лишь хтмл выдают)) однако можно потом натянуть на ВП

    • @Maksims-x5v
      @Maksims-x5v 11 місяців тому

      Plugin -> Figma to Code

  • @miranbuke
    @miranbuke 2 роки тому

    Верстка макета. Уровень "Боженька"

  • @ФёдорБлинов-и2я
    @ФёдорБлинов-и2я 2 роки тому

    Блен, а шо делать если бэкграунд не монолитный по цвету?

  • @DameliDautkanovalancaster
    @DameliDautkanovalancaster 10 місяців тому +1

    где найти этот долбаный constraint? ну почему нет хотя бы одного урока со всеми доступными объяснениями. вечно обо что-то спотыкаешься. у меня задача срочная, а я не могу разобраться, как сделать мультиадаптивный дизайн для всех экранов. даже к дизайну не подошла

  • @ПуТНиК-д1п
    @ПуТНиК-д1п 2 роки тому +2

    Это еще не чёрная магия, а так серая. Вот если ты делал бы всё в автолайаутах и с адаптивными компонентами и добавлял переменные использую плагин гугл таблицы вот тогда была бы чёрная магия. Ну ты молодец я тоже все собираю компонентами и авто лайаутами. 😉👍

    • @Maksims-x5v
      @Maksims-x5v 11 місяців тому

      Переменные только при платной подписке! Что для новичков и так без денег будет ужасно дорого

  • @andriibalyberdin5648
    @andriibalyberdin5648 2 роки тому

    Дуже круто!

  • @КИРФ
    @КИРФ 2 роки тому +2

    можно было просто назвать Кайфую от автолейаута)) 16 минут
    не понял зачем дивайдер рисовать, если можно просто добавить бордер в автолейаут?

    • @DoFurther
      @DoFurther  2 роки тому +1

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

  • @EugeneD456
    @EugeneD456 2 роки тому

    3:00 лол))) это очень смешно!!

  • @gypsy2109
    @gypsy2109 2 роки тому

    Пятая минута ролика.. А я уже запуталась.

    • @DoFurther
      @DoFurther  2 роки тому

      Так иногда бывает. Открой исходник в фигме и постарайся повторить. На слух сложнее воспринимать в сравнее с тем, когда повторяешь действие по примеру.

  • @dikaleto9681
    @dikaleto9681 2 роки тому

    супер кайф!

  • @andriy-kos
    @andriy-kos Рік тому

    Салют. Через какой плагин можно экспортировать этот дизайн в html? Типо в Елементор на Вордпрес или какие-то плагины Фигмы?
    То есть задача в том, чтобы оживить дизайн уже в вебе

  • @Waldemart
    @Waldemart 5 місяців тому

    Круть. Только у тебя не адаптив. Когда комтент растягивается по ширине ето резиновая верстка. Адаптив это когда комтент "складывается" в стакан мобильного екрана.

  • @ФокусникАртемНежута

    ничего непонятно ((
    к автору видео нет никаких претензий. но я даже не понимаю о чем вообще идет речь. вАаабще(( и это после 8 месяцев после курса "Веб дизайн"
    делаю макет лендинга ( уже 2 месяц) и хочется чтобы всё адаптивно тянулось. но увы, не приблизился к решению даже на 5%
    видимо в 38 лет только коробки переставлять могу. извиняюсь, что здесь сорвался, но уже почти целый год никаких результатов в этой сфере

  • @Fliger-G
    @Fliger-G 2 роки тому

    Я новичек. Посоветуйте что начать изучать, Adobe XD или Figma?

  • @Menta1ik
    @Menta1ik Місяць тому

    супер

  • @alionacandvi
    @alionacandvi Рік тому +1

    Теперь спросите верстальщиков нужно ли им это и не усложнит ли это им жизнь. Я уже спросила- они не понимают зачем это нужно и с такими макетами им работать сложнее

    • @DoFurther
      @DoFurther  Рік тому

      Мои клиенты - не верстальщики.

  • @VnukKonyaBudennogo
    @VnukKonyaBudennogo 2 роки тому

    Как оплатить тариф в фигме? В free версии всего 3 страницы можно создавать

    • @DoFurther
      @DoFurther  2 роки тому

      Что-то я такое впервые слышу про 3 страницы.

    • @VadimIlyin
      @VadimIlyin 2 роки тому

      ?? сотни страниц, просто все лежат в drafts

    • @VnukKonyaBudennogo
      @VnukKonyaBudennogo 2 роки тому

      @@DoFurther то есть я могу без проблем отрисовать 10-30 страниц для своего сайта услуг к примеру?

    • @DoFurther
      @DoFurther  2 роки тому

      @@VnukKonyaBudennogo конечно

    • @Ballisong-o4l
      @Ballisong-o4l 2 роки тому

      @@DoFurther нет, на базовом тарифе только 3 страницы

  • @MarcusRambo1991
    @MarcusRambo1991 2 роки тому

    класс!

  • @ArtCamp999
    @ArtCamp999 Рік тому +1

    Очень красиво и ничего не понятно

  • @user-c3b9y
    @user-c3b9y 2 роки тому +2

    Какой в этом смысл? Верстальщик и так знает что между брейк поинтами контент сужается и отступы между элементами уменьшаются

    • @DoFurther
      @DoFurther  2 роки тому

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

  • @KattyKkk
    @KattyKkk 2 роки тому

    класс класс класс!

  • @alexbov
    @alexbov 2 роки тому

    Спасибо

  • @Олександр-б6я7й
    @Олександр-б6я7й 2 роки тому

    Дякую, друже

  • @QWERTY-ks8gf
    @QWERTY-ks8gf 2 роки тому

    а зачем нужен адаптивный дизайн только для дизайна под мобилки ?

    • @andriy-kos
      @andriy-kos Рік тому

      Да, потому что 80% трафика с моба