Делаем отзывчивый дизайн сайта в Figma (бесплатный мастер-класс по веб-дизайну)

[@YanAgeenko]

После окончания заметил небольшой косячок. ​Чтобы иконки при изменении размера оставались вертикально на одном уровне с заголовком, заголовку нужно задать Left Center, и также вставить его в отдельный фрейм со Scale по обеим осям

[@ЮлианаДоценко-й6х]

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

[@ЮлианаДоценко-й6х]

Вот теперь, чудесно вышло)))

[@IGUXdesign]

Спасибо

[@kolibri5396]

Спасибо огромное! Узнала то, что не объясняли на других видео-уроках. Наконец-то поняла для чего эта привязка нужна. Всё доступно и понятно и с примерами, а не на словах "ну вот сделайте такую привязку, потому что надо". Спасибо)

[@vadikkaz112]

Спасибо тебе за урок и ютубу за х1.75 скорость )

[@alenakorobova7007]

а я смотрела на 1,25. мне так тоже понравилось!

[@jr-zv9hi]

я х2 тоже норм

[@МарияСергеева-ю8ш]

Спасибо, отличный урок! Красивый макет получился)

[@YanAgeenko]

благодарю )

[@Yakramercom]

Офигенный урок!!! Только блоки немного съезжают почти всегда, нужно контроллить

[@havatari7231]

ты внатуре дизайнер дизайнеров! Спасибо

[@olgaccc5094]

Спасибо огромное за урок, очень важно и понятно!

[@ВалерияГорская-е2р]

очень полезно, спасибо! как раз пытаюсь усвоить responsive design, теперь все запомнилось!

[@Marinka7689]

Спасибо вам за классное видео,вы лучший!!

[@ВладимирМихно-п2ж]

Отличный урок.Спасибо.

[@tanya_dyak]

Спасибо большое за урок. А скажите, пожалуйста, Вы иконки сами делаете или берете откуда-то? А то у меня пока с ними проблемка)

[@YanAgeenko]

Можно использовать готовые, можно нарисовать самостоятельно, тут урок: kzbin.info/www/bejne/i6Clm4eog9hperM

[@tanya_dyak]

@@YanAgeenko А где можна брать готовые, не подскажете?

[@РусланПащенко-г3з]

Спасибо большое! Всё кратко и понятно

[@allagacman4170]

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

[@YanAgeenko]

Можно просто скопировать с любого сайта и вставить: ©

[@ВладимирМихно-п2ж]

Просто класс!

[@DariaKarandasheva]

Спасибо огромное за очень полезный урок!

[@СафроноваМария-х3ъ]

Спасибо ❤️🔥

[@Ace_of_Black]

Спасибо за прекрасный урок! У меня не получилось только создать вокруг гибкого фрэйма фиксированную рамку (условно 10 пикселей с каждой стороны, залитые тянущейся картинкой). Во фрейме стоит auto layout (чтобы размер фрэйма был по высоте текста). У него нельзя задать contstraints top & bottom, поэтому нижний элемент рамки к нему не вяжется.

[@syndromtorrenta]

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

[@YanAgeenko]

В фигме к сожалению нет такого функционала пока что

[@logotipasplius9776]

Спасибо большоею

[@ЛюдмилаКремчанина]

Спасибо! Все классно!!!

[@АЗАМАТБОЛАТХАНОВ]

Здравствуйте, как скруглить только один угол квадрата?😅 P.s.: разобрался

[@Shum_k8]

Спасибо, вот только появился вопрос)) При каких обстоятельствах нужно делать привязки в макете ? Ибо тут главный экран занял почти час, а если весь макет ... 😨 Может проще делать адаптив?

[@YanAgeenko]

Все зависит от конкретного случая :)

[@liubovsh620]

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

[@YanAgeenko]

constraints могут быть неактивны, если элемент находится вне фрейма. Чтобы скруглить один из углов, нужно нажать на кнопку с четырьмя уголками справа от поля с радиусом углов и ввести в появившихся полях нужные значения, или при наведении на нужный угол зажать alt

[@liubovsh620]

@@YanAgeenko Благодарю !

[@Ou_My_Good]

Подскажите а для вордпресса можно в фигме дизайны делать? (я новичок)

[@YanAgeenko]

Можно

[@Ou_My_Good]

@@YanAgeenko Спасибо, у вас есть какие-то гайды по этой теме?

[@IGUXdesign]

Здраствуйте, а куда надо заходить чтоб ставить символ для цитаты?

[@YanAgeenko]

можно просто в гугле найти и скопировать

[@IGUXdesign]

@@YanAgeenko Хорошо,большое спасибо

[@ЛюдмилаКремчанина]

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

[@YanAgeenko]

О каком символе речь?

[@ЛюдмилаКремчанина]

@@YanAgeenko Символ копирайта.

[@assel290385]

Спасибо за МК! У меня такой вопрос: autolayout не выравнивается по левому краю как заголовок при масштабировании, хотя сделала все как в видео, единственный момент, когда выбирала "слева и по центру" у меня выходит не left и center, а hug contents, может дело в этом?

[@YanAgeenko]

Да, скорее всего именно в этом

[@assel290385]

@@YanAgeenko а как тогда это исправить?

[@aleksunknow113]

Чем вы обоснуете применение сетки не кратной числу "2" ? Не ужели удобно масштабировать?

[@YanAgeenko]

Не понял, о чем речь, т к в данном примере сетка кратна двум

[@aleksunknow113]

@@YanAgeenko 50px умножьте на 1.5 и вы получите объект в 75 px, который не будет кратным 2-ки, 8px cетка такой проблемы не даст. Масштабирование на 150% (1.5) сломает объекты в сетке.

[@shevchenko1735]

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

[@topnation7250]

Привет Ян. Подскажите пожалуйста, почему когда я уменьшаю фрейм, то заголовок куда-то съедает и пропадает и закрывает дискриптор. В чем проблема. Помогите пожалуйста решить. Я буду очень благодарен

[@YanAgeenko]

скорее всего, constraints неправильно заданы. привязка заголовка должна быть top left в этом примере

[@vicastrelets2539]

все получилось. кроме одного. я взяла круг и на него поместила букву. сделала subtract selection и при движении frame у меня масштабируется круг и буква меняет свое положение. как её зафиксировать?

[@vicastrelets2539]

ответь, пожалуйста))) очень поможете

[@YanAgeenko]

ничего не понял :) Напиши мне в телеграм yanageenko - там разберемся

[@art_video_design]

А где урок , где создаются другие страницы для этого сайта? и перекликиываются

[@YanAgeenko]

Пока нету, может быть как-нибудь сделаю

[@ВалянцінШлемакоў]

ничего не получилось зафиксировать,все путешествует по макету.Логотип уезжает куда то.

[@YanAgeenko]

значит что-то делаете не так. Рекомендую начать сначала и делать пошагово, как в уроке

[@Andredy89]

в CSS: width: 10%; height: 10vh; /* цифры заменить на необходимые вам */ Урок окончен)

[@YanAgeenko]

В css еще как минимум свойства position, top/left/bottom/right. Но это в любом случае урок о дизайне, а не о верстке.

[@gjwggsethfsrgfd3356]

Сколько вы зарабатываете на веб дизайне?

[@YanAgeenko]

Достаточно :)