Тёмный

Figma autolayout - делаем адаптивный экран 

Sasha Smetanina
Подписаться 221
Просмотров 281
50% 1

Привет!) Это второй видосик по автолэйаутам, гляньте еще • Figma autolayout - осн... первый, если не видели:)
Будем верстать адаптивный экран на автолэйаутах. Разберем подробнее абсолютное позиционирование, а также настроим экран для прототипа. Всякие фигурки звездочек и тд можете добавить при желании по аналогии через абсолютное позиционирование:)
0:00 Что будем делать
1:07 Верстаем навбар
7:48 Настраиваем адаптивный экран
10:43 Делаем превьюшку карточек
25:50 Заголовок и теги
32:56 Делаем основные карточки
51:00 Таббар
55:00 Настраиваем прототип

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

 

12 июл 2024

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 18   
@dongoozer
@dongoozer 7 дней назад
Бля вечер кайф, смотрю любимого фигмера, пиво в одной руке, автолейаут в другой, лежу смотрю, балдежом заряжаюсь))
@SashaSmetanina
@SashaSmetanina 6 дней назад
Ахахах балдёёёж, круто))))
@Sergey-h9g
@Sergey-h9g 7 дней назад
Здорово, что урок проходит практически с настоящей задачей, так гораздо лучше понимаешь как применять на практике, спасибо!
@SashaSmetanina
@SashaSmetanina 6 дней назад
Очень рада, что понравился такой формат)))💚
@sergeyfoxy
@sergeyfoxy 7 дней назад
Саша, спасибо! Уже который раз открываю для себя что-то новое у тебя в уроках :)
@SashaSmetanina
@SashaSmetanina 6 дней назад
Очень рада, что могу помочь узнать что-то новое!) 🌼
@mr.artmak
@mr.artmak 7 дней назад
🖤
@1974mura
@1974mura 7 дней назад
Сделай компоненты и варианты, а внутри автолейауты, наворот. Какой то серьезный макет типа архитектура
@SashaSmetanina
@SashaSmetanina 6 дней назад
Хочу скоро сделать видос по компонентам, так объяснить всякие приколюхи, и потом показывать уже на них)
@1974mura
@1974mura 6 дней назад
@@SashaSmetanina кайф,
@user-rd6wi2lz7i
@user-rd6wi2lz7i 4 дня назад
Саша, привет. Спасибо за крутые видео! Смотрю взахлёб и параллельно практикуюсь. Скажи пожалуйста, вот ты ставишь "Спейсеры" в макет, а как разрабы к ним относятся, не усложняет ли им это работу и не нагружает ли сам экран? Я не то чтобы оспариваю твою работу, мне просто интересно понять необходимость их применения. Или у вас в компании есть договорённость их использования, и ты по привычке их используешь в этом обучающем макете? Заранее спасибо за ответ)
@SashaSmetanina
@SashaSmetanina 4 дня назад
@@user-rd6wi2lz7i привет!) спасибо огромное))) У всех разрабов разный подход к верстке, но не встречала, чтобы разрабам не нравились спейсеры. Для них наши автолэйауты с отступами внутри и спейсеры - одно и то же, т.е. просто какое-то расстояние. Ты можешь хоть не в автолэйауте верстать, а просто во фрейме - они все равно поймут, так как смотрят расстояние между объектами
@user-rd6wi2lz7i
@user-rd6wi2lz7i 4 дня назад
@@SashaSmetanina Спасибо за супер оперативный ответ! Приму во внимание!)))
@lev.bortov
@lev.bortov 7 дней назад
у меня возникло пара вопросиков: во-первых подскажи пожалуйста пак иконок, который ты используешь в этом уроке; во-вторых, очень понравилось то, как выглядит карточка поста, особенно скругления у заголовка, которые перекрывают обложку, но ведь если заголовок не поместиться на одну строчку - элемент скругления выйдет за пределы карточки, а у фотографии появиться некрасивый прямой угол справа снизу. как быть в таком случае? я как бы вижу два пути: через отступы / спейсеры в автолэйауте ограничить длину заголовка - этим мы добьёмся того, заголовок не сможет растянуться на всю ширину карточки, какой бы она не была., но тогда мы рискуем получить очень не информативные обрезаные заголовки (в такой заголовок даже не поместится фамилия Пеневежневецких, например 🫠 ). либо мы можем сделать два варианта карточки: один с милым, красивым заголовком, другой - без. что ты думаешь об этом? *p.s.* а ещё «option shift command v» звучит как заклинание из некрономикона 👾 5:45
@SashaSmetanina
@SashaSmetanina 6 дней назад
1) К сожалению, этого пака уже нет в фигме, но есть похожий. Называется «+3000 free to use icons», вбей это в фигма комьюнити, должно найти) 2) Можно сделать ограничение по ширине у самого текста (он должен быть hug) и обрезать его в троеточие. Минусы такого решения: при большом экране будут такие же ограничения, как и для маленького экрана, а значит на большом телефоне будет зачастую достаточно большой отступ с правой стороны и странно сокращенный заголовок. Боюсь именно в такой реализации заголовка (вынесенном в абсолютное позиционирование) не получится сделать все автоматом по сокращениям, скорее всего придется вручную удалять символы при разных экранах. Поэтому, можно для него придумать правило: если строки 2, то текст не сокращается, а переносится на следующую строку, но делать это придется вручную (написать 2 строки и вынести блок с заголовком повыше, а нижнее скругление пониже). Если бы это не было вынесено в абсолютное позиционирование, можно было бы решить спейсерами Вот как-то так:) p.s. и правда заклинание какое-то :D
@1974mura
@1974mura 7 дней назад
В чем задумка что все отступы должны быть кратны 4? Не первый раз встречаю этот тезис. Зачем себе жизнь усложнять если можно сделать 5, 10, 15, 20, легче же считать, не?
@SashaSmetanina
@SashaSmetanina 6 дней назад
Числа 5, 15 и тд не делятся на 2. То есть если у тебя где-то есть отступ 5, и тебе там больше нравится отступ в 2 раза меньше - придется ставить 2,5, но 2,5 нельзя делать, поэтому придется держать в голове во всем проекте ты 2 выбираешь или 3 при таких маленьких значениях, что усложняет создание макетов и вносит хаос небольшой. Также если захочешь отступ 3, но поменьше, там уже 1,5 и тд... Поэтому обычно берут 16, 12, 8, 4, 2 и тд, так как они хорошо делятся на 2 каждый раз и их не так сложно запомнить:)
@1974mura
@1974mura 6 дней назад
@@SashaSmetanina понял, спасибо
Далее
Всё об Auto Layout в Figma
12:57
Просмотров 20 тыс.
Хотите поиграть в такую?😄
00:16
Просмотров 464 тыс.
Audi R8 - заезды поколений
18:53
Просмотров 226 тыс.
Как работает экосистема Apple?
18:08
Переменные в Figma (урок 3)
29:55