Figma autolayout - делаем адаптивный экран
Vložit
- čas přidán 17. 07. 2024
- Привет!) Это второй видосик по автолэйаутам, гляньте еще • Figma autolayout - осн... первый, если не видели:)
Будем верстать адаптивный экран на автолэйаутах. Разберем подробнее абсолютное позиционирование, а также настроим экран для прототипа. Всякие фигурки звездочек и тд можете добавить при желании по аналогии через абсолютное позиционирование:)
0:00 Что будем делать
1:07 Верстаем навбар
7:48 Настраиваем адаптивный экран
10:43 Делаем превьюшку карточек
25:50 Заголовок и теги
32:56 Делаем основные карточки
51:00 Таббар
55:00 Настраиваем прототип
![Объяснение 12 законов Вселенной и их Применение в Жизни [ЧТОБЫ ЛЕГКО ПОЛУЧАТЬ ЖЕЛАЕМОЕ]](/img/n.gif)
Бля вечер кайф, смотрю любимого фигмера, пиво в одной руке, автолейаут в другой, лежу смотрю, балдежом заряжаюсь))
Ахахах балдёёёж, круто))))
Здорово, что урок проходит практически с настоящей задачей, так гораздо лучше понимаешь как применять на практике, спасибо!
Очень рада, что понравился такой формат)))💚
🖤
Саша, спасибо! Уже который раз открываю для себя что-то новое у тебя в уроках :)
Очень рада, что могу помочь узнать что-то новое!) 🌼
Саша, привет. Спасибо за крутые видео! Смотрю взахлёб и параллельно практикуюсь. Скажи пожалуйста, вот ты ставишь "Спейсеры" в макет, а как разрабы к ним относятся, не усложняет ли им это работу и не нагружает ли сам экран? Я не то чтобы оспариваю твою работу, мне просто интересно понять необходимость их применения. Или у вас в компании есть договорённость их использования, и ты по привычке их используешь в этом обучающем макете? Заранее спасибо за ответ)
@@user-rd6wi2lz7i привет!) спасибо огромное)))
У всех разрабов разный подход к верстке, но не встречала, чтобы разрабам не нравились спейсеры. Для них наши автолэйауты с отступами внутри и спейсеры - одно и то же, т.е. просто какое-то расстояние. Ты можешь хоть не в автолэйауте верстать, а просто во фрейме - они все равно поймут, так как смотрят расстояние между объектами
@@SashaSmetanina Спасибо за супер оперативный ответ! Приму во внимание!)))
Сделай компоненты и варианты, а внутри автолейауты, наворот. Какой то серьезный макет типа архитектура
Хочу скоро сделать видос по компонентам, так объяснить всякие приколюхи, и потом показывать уже на них)
@@SashaSmetanina кайф,
у меня возникло пара вопросиков: во-первых подскажи пожалуйста пак иконок, который ты используешь в этом уроке; во-вторых, очень понравилось то, как выглядит карточка поста, особенно скругления у заголовка, которые перекрывают обложку, но ведь если заголовок не поместиться на одну строчку - элемент скругления выйдет за пределы карточки, а у фотографии появиться некрасивый прямой угол справа снизу. как быть в таком случае?
я как бы вижу два пути: через отступы / спейсеры в автолэйауте ограничить длину заголовка - этим мы добьёмся того, заголовок не сможет растянуться на всю ширину карточки, какой бы она не была., но тогда мы рискуем получить очень не информативные обрезаные заголовки (в такой заголовок даже не поместится фамилия Пеневежневецких, например 🫠 ). либо мы можем сделать два варианта карточки: один с милым, красивым заголовком, другой - без. что ты думаешь об этом?
*p.s.* а ещё «option shift command v» звучит как заклинание из некрономикона 👾 5:45
1) К сожалению, этого пака уже нет в фигме, но есть похожий. Называется «+3000 free to use icons», вбей это в фигма комьюнити, должно найти)
2) Можно сделать ограничение по ширине у самого текста (он должен быть hug) и обрезать его в троеточие. Минусы такого решения: при большом экране будут такие же ограничения, как и для маленького экрана, а значит на большом телефоне будет зачастую достаточно большой отступ с правой стороны и странно сокращенный заголовок. Боюсь именно в такой реализации заголовка (вынесенном в абсолютное позиционирование) не получится сделать все автоматом по сокращениям, скорее всего придется вручную удалять символы при разных экранах. Поэтому, можно для него придумать правило: если строки 2, то текст не сокращается, а переносится на следующую строку, но делать это придется вручную (написать 2 строки и вынести блок с заголовком повыше, а нижнее скругление пониже). Если бы это не было вынесено в абсолютное позиционирование, можно было бы решить спейсерами
Вот как-то так:)
p.s. и правда заклинание какое-то :D
В моменте со скруглениями чет не получается ничего, несколько раз уже момент пересмотрел и все равно правый «квадратик» не двигается с текстом. У меня в одном фрейме текст и два абсолютно позиционированных квадратика. Левый сделал constraints left и Top, правый - Right Top. Что бы не делал, правый квадратик вообще не съезжает
Он просто по какой-то причине не хочет прилипать к правому краю
@@user-pf8jx8qt8oтакое бывает иногда, возможно фигма лагает. Попробуй снять абсолютное позиционирование, а потом опять добавить. Возможно поможет. Если нет, попробуй вынести так какой-то другой элемент проверить, вдруг с ним норм будет. Если тоже нет, попробуй у всего фрейма заголовка убрать абсолютное позиционирование, добавить туда квадратики, и уже потом выносить в абсолютное позиционирование.
По идее должно работать как на видосе, но такое как у тебя, к сожалению, бывает (на крайняк попробуй с нуля сделать)
В чем задумка что все отступы должны быть кратны 4? Не первый раз встречаю этот тезис. Зачем себе жизнь усложнять если можно сделать 5, 10, 15, 20, легче же считать, не?
Числа 5, 15 и тд не делятся на 2. То есть если у тебя где-то есть отступ 5, и тебе там больше нравится отступ в 2 раза меньше - придется ставить 2,5, но 2,5 нельзя делать, поэтому придется держать в голове во всем проекте ты 2 выбираешь или 3 при таких маленьких значениях, что усложняет создание макетов и вносит хаос небольшой. Также если захочешь отступ 3, но поменьше, там уже 1,5 и тд... Поэтому обычно берут 16, 12, 8, 4, 2 и тд, так как они хорошо делятся на 2 каждый раз и их не так сложно запомнить:)
@@SashaSmetanina понял, спасибо