Тёмный

Как сделать мобильную версию сайта? | Уроки Figma 

Сергей Чирков
Подписаться 11 тыс.
Просмотров 18 тыс.
50% 1

Опубликовано:

 

30 сен 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 48   
@geminice_k
@geminice_k 2 года назад
Сергей, ваши видео очень крутые, наглядные и понятные! Спасибо!!!😇🙏🏻👍🏻👍🏻👍🏻
@Chyrkov
@Chyrkov 2 года назад
Спасибо большое!!! очень приятно!) рад, что нравится!
@TyttuFrytu
@TyttuFrytu Год назад
Сергей, я правильно понимаю - в конечном итоге фронтенд разработчикам всегда передается 3 макета (десктоп, мобильный и планшет)? Ведь нет необходимости в отрисовке макетов на множество разрешений?
@Chyrkov
@Chyrkov Год назад
Да верно! Но если какой-то сложный дизайн и нужно отдельно показать как будет на 1920, то лучше отрисовать. Это обычно обсуждается с разрабами в конкретном случае.
@TyttuFrytu
@TyttuFrytu Год назад
@@Chyrkov спасибо!
@sothatsthelemontea5154
@sothatsthelemontea5154 2 года назад
Очень полезное видео, благодарю! Иногда испытываю трудности с созданием мобильной версии, поэтому такая информация всегда пригодится 🙏
@Chyrkov
@Chyrkov 2 года назад
Спасибо, рад, что было полезно!) пишите если будут вопросы)
@PCBH
@PCBH 8 месяцев назад
Сергей, что-то не вижу сетки
@Chyrkov
@Chyrkov 8 месяцев назад
Если они у вас добавлены в макете, попробуйте нажать shift G чтобы их отобразить
@Shadow_Leon_
@Shadow_Leon_ Год назад
Сергей, очень продуктивное видео по созданию мобильной версии! Посмотрел с огромным удовольствием! Огромное спасибо!👍
@Chyrkov
@Chyrkov Год назад
Здорово! Я рад!))
@dostonjonbillionaire3186
@dostonjonbillionaire3186 Год назад
Здравствуйте Сергей. У меня есть две вопросов насчёт вашей презентации. 1. Вопрос так. Есть такой сайт где я могу скинуть именно дизайн своего сайта и этот сайт может ли автоматически сделать любые версию нашего модели телефона. 2. А что если наш телефон в другом формате, скажем другой модель ( Xiaomi, Samsung, Huawei и др ). В Фигме, могу ли найти другие модели, таких как телефонов. Спасибо Заранее :)
@Chyrkov
@Chyrkov Год назад
Добрый день! По 1 вопросу - да есть эмуляторы которые показывают как ваш сайт смотрится на разных девайсах, но сам макет никто не поменяет за вас)))) 2 - вам нужно посмотреть размер экрана вашего девайса под который вы делаете макет и создать фрейм в этом размере. В целом в Фигме используются основные стандартные размеры самых распространенных экранов. Отдельно скорее всего есть плагины или шаблоны в коммьюнити Фигмы для Xiaomi, Samsung, Huawei и др. нужно поискать =)
@anna_sss
@anna_sss Год назад
Очень приятная речь, большое Вам спасибо💙
@Chyrkov
@Chyrkov Год назад
Благодарю!) Вам спасибо за отзыв!)
@pixel9841
@pixel9841 4 месяца назад
А не доставляет проблем ,что после Scale всё дробное ?
@Chyrkov
@Chyrkov 4 месяца назад
есть такое, бесит жутко!)) вручную потом можно размеры подправить немного
@ПавловРоман-ф7г
@ПавловРоман-ф7г 2 года назад
Здравствуйте прикольно получилось . Я на 320 обычно делаю адаптив
@Chyrkov
@Chyrkov 2 года назад
спасибо!) да 320 это самый маленькие размер, с него надо начинать
@ДенисПиксель
@ДенисПиксель 2 года назад
Музыку нужно чуть тише
@Chyrkov
@Chyrkov 2 года назад
Спасибо, учту!
@julia_389
@julia_389 5 месяцев назад
А что делать, если у меня при создании моб. версии фото становятся очень пиксельными? Работаю в фотошопе. Качество фото хорошее (5500х3700рх, 10мб), но при переносе их на макет мобилки с размером 320 все в жутких пикселях. Не могу понять в чем проблема. Это проблема в самих фотках или я что-то делаю не так?
@Chyrkov
@Chyrkov 5 месяцев назад
Вы макет в фотошопе делаете? Если в фигму переносите тогда это слишком большой размер и она его сжимает. А зачем такие большие размер? Вообще для сайтов рекомендую использовать размеры фото не более 1920х1080 и весом до 500кб, иначе пользователи могут по пол часа грузить ваши фотографии 😂 и не забывайте про трафик)
@julia_389
@julia_389 5 месяцев назад
@@Chyrkov если я фото более меньшего качества залью на сайт, они еще хуже будут. Не в том проблема. Но я уже разобралась, мне специалисты подсказали
@julia_389
@julia_389 5 месяцев назад
@@Chyrkov и мне загрузили эти фото на сайт и все прекрасно открывается и никаких проблем с трафиком нет
@Chyrkov
@Chyrkov 4 месяца назад
отлично, скорее всего специалисты сжали изображения чтобы уменьшить вес
@lemonade-yz2qk
@lemonade-yz2qk 2 месяца назад
К материалу вопросов нет, но ещё чуть-чуть и будет АСМР. Хотелось бы чтобы вы говорили немного по громче
@Chyrkov
@Chyrkov 2 месяца назад
спасибо! на тот момент были сложности со звуком 😉
@Вацлав-н2ю
@Вацлав-н2ю 7 месяцев назад
Доброй ночи. Я правильно понимаю, что это адаптив исключительно под расширение 7 айфона и на телефонах с более большим расширением экрана весь макет съедет?
@Chyrkov
@Chyrkov 6 месяцев назад
Добрый! Обычно делается брейкпоинты 390 (телефон) 768 (планшет вертикальный) 1024 (планшет горизонтальный) и далее десктопы. Рисовать отдельно под каждую модель телефона конечно нет смысла))) обычно этих брейкпоинтов хватает чтобы макеты хорошо смотрелись.
@Kristen903
@Kristen903 3 месяца назад
Спасибо! В моей первой работе вы очень сильно помогли своим видео! Удачи Вам!
@Chyrkov
@Chyrkov 3 месяца назад
Ура! Очень рад это слышать! 🤗 удачи вам в следующих проектах!
@masha_shele
@masha_shele 2 года назад
Сергей, спасибо большое за интересное видео! Подскажите, важно ли каждый отдельный блок сайта выделять в отдельный фрейм и для мобильной, и для десктопной версий? Я так понимаю, это облегчает жизнь верстальщикам? Плюс в Тильде сейчас появилась возможность импортировать фреймы из тильды в зеро-блок (пока демо), может и в других конструкторах такая возможность есть?
@Chyrkov
@Chyrkov 2 года назад
Пожалуйста!) нет не важно, возможно для Тильды это удобно потому что в ней принцип работы такой - блочный. Верстальщик сам определяет как ему нужно дивы сделать.
@aftolmolog
@aftolmolog 6 месяцев назад
Recrent в сфере дизайна
@Chyrkov
@Chyrkov 6 месяцев назад
👌
@ra4oook
@ra4oook 5 месяцев назад
Есть какое-то чёткое правило какой фрейм надо выбирать? Будет ли он сам подгоняться под другие экраны пользователей? Или надо отдельно для каждого размера экрана делать?
@Chyrkov
@Chyrkov 5 месяцев назад
Не совсем понял о каком фрейме идет речь. Но делать мобильную версию нужно всех страниц отдельно. Автоматически может работать только если вы используете auto layout, блоки могут подстраиваться по размеру и переходить один под другой. На момент записи этого видео такого функционала в фигме насколько я помню еще не было.
@ra4oook
@ra4oook 5 месяцев назад
@@Chyrkov есть разные фреймы под айфон, андроид и так далее. Если я хочу сделать например на айфон и на андроид, мне нужно делать отдельно для каждого вида фрейма или как вы написали auto layout? Я сейчас выбрал андроид фрейм и делаю на нём
@Chyrkov
@Chyrkov 5 месяцев назад
Если вы делаете мобильное приложение тогда лучше выбрать самое популярное минимальное значение для iOS и android для которого будет доступно приложение. Если речь идет о мобильное версии сайта достаточно взять 390 по ширине, сейчас это самое популярное значение. Пару лет назад делали под 320 но сейчас такие телефоны редко уже встречаются.
@SergiLaza
@SergiLaza 2 года назад
Привет, Сергей! Смотрю все ваши видео с удовольствием) Было бы здорово, если бы вы показали что-нибудь про хедер. Анимация при скроллинге страницы, сворачивание и появление хедера и тд. Спасибо😊
@Chyrkov
@Chyrkov 2 года назад
Привет!) спасибо большое!) хорошо, сделаю)
@MOONHOME-bl5oo
@MOONHOME-bl5oo Год назад
Вас так приятно и интересно слушать, спасибо большое!!
@Chyrkov
@Chyrkov Год назад
Спасибо))) а мне приятно видеть такие комментарии!)) спасибо за мотивацию!)
@xenydraws
@xenydraws Год назад
Очень приятная грамотная речь! Спасибо большое, вас приятно слушать
@Chyrkov
@Chyrkov Год назад
Спасибо большое за столь пряный отзыв)
@alennaalena
@alennaalena Год назад
Сергей, очень полезное видео! спасибо! и всё-таки - моб версию требуется отрисовывать на 320 или 375? а если это будет iphone Pro Max?
@Chyrkov
@Chyrkov Год назад
Спасибо за отзыв! Лучше делать под минимальное разрешение 320. Под про Макс можно сделать отдельно если в этом есть необходимость
Далее
# Rural Funny Life Wang Ge
00:18
Просмотров 717 тыс.
Teeth gadget every dentist should have 😬
00:20
Просмотров 941 тыс.
STOP doing DROPDOWNS like this - Figma variables 2023
15:35