На 97,5% полностью адаптивный дизайн в Figma за 16 минут
HTML-код
- Опубликовано: 27 июн 2022
- Ссылка на проект в фигме с обучающими материалами:
www.figma.com/file/2LliqYqtW6...
Дизайн практика: Адаптивный дизайн в Figma / 11 - 17 июля
dofurther.gumroad.com/l/adaptive
ааа как же приятно видеть , что человек, на голову выше меня, тоже ошибается в простых вещах, методом тыка ищет вариант решения задачи
очень успокаивает внутреннего самокритика))
Материал очень насыщенный, мне нужно будет несколько раз пересмотреть, чтобы прям осознать всё. Идея,где ты используешь предметы реального мира, чтобы объяснить функционал очень классная и запоминающаяся. Появляющаяся фотка Девида Блейна - это так забавно и супер врезается в память,ну мне по крайней мере😆
По хорошему все лучше повторить)
@@Chihuahua-du5zx Ну так то согласна, нужно повторять)
women 😇
Давно ждала такое видео. Правда понимаю, что нужно еще пару раз пересмотреть и попрактиковаться) Спасибо!
Ура, все курсы по UX дизайну в одном видео! Лет 6 видимо ждала такое подробное видео, а это за все время изучения и появления фигмы 😭😭😭🙏🙏🙏 Благодарна от души 💓💖
Видно, что материал очень детально проработан и самое важное понятно рассказан! Ребята большие молодцы 👍Смотрел с удовольствием, так держать
Вау, находка❤ спасибо
Все четко, инсталляции вобще шикарны))😍
Блин! Это очень изящно! Но, походу, придётся раза 2 ещё посмотреть) спасибо!
Видео-урок по фигме это просто супер!
Очень круто! Всех вам благ и миллиона подписчиков!
Бомба, смотрю Ваши видосы уже 6 часов, и не могу оторваться, продолжайте в том же духе 😂
Огромное спасибо, это прям то, что я хотел найти! Подробный разбор автолейаута) Так главное попалось видео случайно, в рекомендациях!)) Подпишусь!
Очень крутое видео, информация изложена четко. Непростая тема, я пересмотрю еще пару раз, но многие вещи встали на свои места. Редко встретишь настолько подробное видео с простым объяснением. Классные фишки для себя записала. Благодарю!
это бесценный урок......... спасибо огромнейшее!! тысячи огоньков❤🔥❤🔥❤🔥❤🔥❤🔥 точно буду в свободное время пересматривать и тренироваться по этому уроку
Если Вассермана обычно слушают на скорости 1.5, то здесь ставьте максимум 0.75, чтобы ничего не пропустить. Пожалуйста!
огромное спасибо за такой подробный и крутой урок!!
Спасибо дружище! Береги себя и близких пожалуйста 🤍
Зная твою обстановку в какой ты оказался,ты просто молодец!!!
Как всегда топ! Спасибо!
Безумно полезное видео! Спасибо большое!
Огромное спасибо, лучший контент)
Прекрасная работа, спасибо
Очень круто, просто и доступно. Спасибо большое! Делай, пожалуйста побольше такого, полезного контента =)
Что-то базовое и практическое?
@@DoFurther практическое, пожалуйста ☺️
Очень качественний контент, спасибо
Найкращий, лови вподобайку! Як креативно подаєш матеріал, підтримаю тебе дуже давно і вдячна за кожен ролик. Люблю!
Очень крутой материал для изучения! Спасиб
Огромное спасибо! Ни в одном платном курсе не видела, чтобы так показывали про адаптивность. Там на уровне: создаем новый фрейм под планшет и под айфон, переносим и собираем 😵💫
Игорь, большая благодарность тебе за твои видео. Тебя очень интересно смотреть, здорово, что коллега посоветовал твой канал. Тоже верстаю на вебфлоу и иду по твоему пути, в какой-то мере. Мне тоже скоро 35) Выздоравливай!!! А самое главное, желаю тебе проснуться в мирной и свободной стране, а себе в стране не дураков, а гениев. Пусть даже и через 100 веков. Берегите себя, ребята.
Спасибо за пожелание и цитирование Талькова )
Спасибо огромное за такой титанический труд¡
По правде говоря, я действительно подзадолбался пока делал это видео )
Вот это пушка контэнт !)
Со знанием дела. Очень интересно!
Салют. Через какой плагин можно экспортировать этот дизайн в html? Типо в Елементор на Вордпрес или какие-то плагины Фигмы?
То есть задача в том, чтобы оживить дизайн уже в вебе
Это было супер полезно!!!
Оч крутое видео, спасибо)
Чувак, а че так сочно то а? Офигенно снятно и хорошо рассказано, лови лайков в тачанку)) оч круто!
Подход на 10 баллов по 5 бальной системе. Рассказал и показал просто огонь. Для новичков просто топ
Спасибо ) Польза!!!
Игорь, подскажите pls,kind of got stuck... я сделала 8 frames. They adapt, вроде как works smoothly. Можете уделить немного времени,накопились вопросы?
Ого это очень круто ❤😊😊
Здорово, спасибо!
Что за контент ,🎉 спасибо !
И вот я снова вернулся пересматривать, чтобы сделать новый заказ наглядно адаптивным)
Блин.... эти видео должны быть платными...
Это же целая супер сила!!!
Блен, а шо делать если бэкграунд не монолитный по цвету?
Великий лайк, друже!) Дуже корисний матеріал)
Привет, спасибо за видос! Очень круто. Подскажи, пожалуйста, почему у меня у компонента article_thumb нет возможности "fill conteiner", а у тебя есть?)))
привет, а можешь в видео обьяснить, как правильно дизайнить сайты для школ/колледжей учитывая стандарты от государства?
Супер полезно!
Материал хорош, но боже, что за инсталляции с крафтовым картоном 😍😍😍😍😍
Привіт, а коли розпочнеться дизайн практика? я підписалася та дуже чекаю на початок)
Оце так контент! Дякую безмежно, давно шукала такий туторіал на живому проекті ,а не просто окремих елементів)
Я так и хотел )
Игорь, ты мой кумир! я уже собираю фигурку тебя из ЛЕГО!!!
Круто ) Обязательно скинь что получиться. Кепки, кстати сложно делать из лего ;)
Як завжди контент на висоті!
Надіюсь, колись щось подібне буде рідною мовою.
Я теж на це сподiваюсь XD
Привет) Cуперский видос!!! Было б интересно как верстать этот адаптивный в WIX или WebFlow
Присоединяюсь
По началу, думаю как и все, все группировал по папкам. Потом через констреинс, когда на фигму перешел. Но как я кайфанул, когда наконец осилил Auto layout. Госпади, спасибо разработчикам фигмы. Особенно последнее обновление порадовало, когда добавили абсолютное позиционирование.
Если все нормально настроил для десктопа, то на адаптив времени немного нужно.
Как вспомню времена, когда в фш все приходилось переделывать, аж вздрагиваю))
То были темные времена XD
Спасибо
супер кайф!
4:35 в Adobe XD есть такая штука как Stack (единственное чего не хватает в Figma) - разное расстояние между группой слоёв. Можно менять порядок слоёв, а общий принцип остаётся
Да ладно
Посмотрел на RUclips, прикольная фича. Есть чего ожидать от фигмы в следующем году )
класс!
Дуже круто!
пока досмотрел ролик и узнал про движуху, все места уже раскупили 😶
Это я жестко натупил с настройками. Сам чешу репу, почему только один человек записался (*вытираю слезы*)
Где вы раньше были, где? 😭
класс класс класс!
Так через что ты там загрузил бл***скую Фигму?)
Хахахахах. Я в шоке! Ну красавчик. Точно дэвид блэйн! Подписываюсь.
Класна робота! Найчастіше приходиться робити адаптив саме для мобільного екрану і там буде дуже багато ручних доопрацювань, перебудови блоків і тд.
Куда делся Space Between в 2024?
круть
Я новичек. Посоветуйте что начать изучать, Adobe XD или Figma?
Figma
Верстка макета. Уровень "Боженька"
Как оплатить тариф в фигме? В free версии всего 3 страницы можно создавать
Что-то я такое впервые слышу про 3 страницы.
?? сотни страниц, просто все лежат в drafts
@@DoFurther то есть я могу без проблем отрисовать 10-30 страниц для своего сайта услуг к примеру?
@@VnukKonyaBudennogo конечно
@@DoFurther нет, на базовом тарифе только 3 страницы
Звучит так, будто без 100 гр. не разобраться. Вроде понятно, но цепочка не выстраивается в голове. Но все равно круто, спасибо за видео))
у меня не получаааетсяяя 🥲 что-то я делаю не так
Дякую, друже
Мне кажется следующий шаг это выгрузка дизайна фигмы сразу в код. Или такой плагин уже есть?
Ведь по сути все эти блоки это дивы в html а настройки автолейаута это настройки css ))
Ага. Это то к чему нас подталкивают инструменты в Фигме.
Он есть, толь в твоих мечтах 😄
Такие плагины уже есть)) но они лишь хтмл выдают)) однако можно потом натянуть на ВП
Plugin -> Figma to Code
Наглядно и понятно, заодно еще пару полезных нюансов показал. Но побуду граммарнаци. Это не адаптивность. Это «респонсив» дизайн. Фактически это то, из чего в свое время адаптивность выросла
3:00 лол))) это очень смешно!!
один вопрос, а для чего это нужно?
Вот и мне интересно. Разработчики при чем говорят, что это бред и для них такое точно не нужно. Только жизнь им усложняют
Очень полезная вещь для тех кто начинает. Для тех кто с опытом тоже полезно, если что :))
👍
Если вы посмотрите это видео, а потом повторите пару раз, то можете считать, ято фигму вы выучили.
Это еще не чёрная магия, а так серая. Вот если ты делал бы всё в автолайаутах и с адаптивными компонентами и добавлял переменные использую плагин гугл таблицы вот тогда была бы чёрная магия. Ну ты молодец я тоже все собираю компонентами и авто лайаутами. 😉👍
Переменные только при платной подписке! Что для новичков и так без денег будет ужасно дорого
Пятая минута ролика.. А я уже запуталась.
Так иногда бывает. Открой исходник в фигме и постарайся повторить. На слух сложнее воспринимать в сравнее с тем, когда повторяешь действие по примеру.
Требую фулл название файла!!!!!!😄
Да там всё вместилось ) Все три недели отчаяния, когда я выносил стационарный компьютер, чтобы при помощи телефона за 40 минут запустить фигму и занести включенный компьютер обратно в мастерскую. Короче говоря, без интернета - трудно )
а зачем нужен адаптивный дизайн только для дизайна под мобилки ?
Да, потому что 80% трафика с моба
Спасибо за видео! Почти все понятно 😅
Есть замечание, вот тут*; в конце, после создания отступов у всего макета «сломался» дизайн, по задумке горизонтальные линии должны идти до конца макета без отступов (ну или должны быть полные границы вокруг).
*ruclips.net/video/BLKzlVjGYtg/видео.html
Еще не очень понятно, почему такое решение: дивайдеры вместо обводки дочерних контейнеров.
можно было просто назвать Кайфую от автолейаута)) 16 минут
не понял зачем дивайдер рисовать, если можно просто добавить бордер в автолейаут?
Потому что тогда у нас получится отступ до бордера с фиксированным значением.
6:30
АААААААААААААААААААААААААААААААААААААААААААААААААААААААААААААААААААААААААААА!!!!!!!!!!!!!!!!!!!!!!!!!
Очень красиво и ничего не понятно
где найти этот долбаный constraint? ну почему нет хотя бы одного урока со всеми доступными объяснениями. вечно обо что-то спотыкаешься. у меня задача срочная, а я не могу разобраться, как сделать мультиадаптивный дизайн для всех экранов. даже к дизайну не подошла
ничего непонятно ((
к автору видео нет никаких претензий. но я даже не понимаю о чем вообще идет речь. вАаабще(( и это после 8 месяцев после курса "Веб дизайн"
делаю макет лендинга ( уже 2 месяц) и хочется чтобы всё адаптивно тянулось. но увы, не приблизился к решению даже на 5%
видимо в 38 лет только коробки переставлять могу. извиняюсь, что здесь сорвался, но уже почти целый год никаких результатов в этой сфере
я уверен все старания, если не сдашься, очень хорошо окупятся ;)
Теперь спросите верстальщиков нужно ли им это и не усложнит ли это им жизнь. Я уже спросила- они не понимают зачем это нужно и с такими макетами им работать сложнее
Мои клиенты - не верстальщики.
Всем привет!
Кто как начинал свой путь в веб-дизайне? Я сейчас пытаюсь устроиться в студию, т.к опыта мало, но вакансий нет вообще или игнор. Кто как получил свой первый оффер? Крик души уже :((((((
Нужно разбираться, что у тебя с работами, а также с тем как ты ищещь работу (собеседования, отправка e-mail, коммуникация в соц. сетях). Для начала глянь моё видео «Как устроиться в студию» (там Тема Лебедев на обложке).
а сколько ты ждешь? мне приходило несколько предложений спустя 2-3 месяца как отправляла св)
@@NataGrig отклики с тестовыми быстро приходят, а дальше обычно тишина после того как высылаю тестовое
@@dasha_ccheese6545 после тестового еще месяц может пройти
Какой в этом смысл? Верстальщик и так знает что между брейк поинтами контент сужается и отступы между элементами уменьшаются
Можно же на основе автолейаута продолжить делать и мобильную версию, которая будет значительно отличаться от веб версии. Но такой подход будет полезен не только при работе с адаптивом, но и на стадии внесения изменений в дизайн.
я испортил круглую цифру "100" своим 101-м комментом :)
получилось то, что мы и хотели -
...
ничего
😄
Я который ничего не понимаю. Кажется что это китайский язык. Есть такие?))
03:00 - проорал в голос)
Урок не актуальный. В фирме поменялись какие-то фичи и верстка не тянется
Родительский компонент лучше не держать в макете
100%
Поясните пожалуйста детальнее… почему и где тогда держать?