- 6
- 6 225
Sasha Smetanina
เข้าร่วมเมื่อ 12 ธ.ค. 2016
Figma autolayout — делаем адаптивный экран
Привет!) Это второй видосик по автолэйаутам, гляньте еще th-cam.com/video/jpR7sh4VCiA/w-d-xo.html первый, если не видели:)
Будем верстать адаптивный экран на автолэйаутах. Разберем подробнее абсолютное позиционирование, а также настроим экран для прототипа. Всякие фигурки звездочек и тд можете добавить при желании по аналогии через абсолютное позиционирование:)
0:00 Что будем делать
1:07 Верстаем навбар
7:48 Настраиваем адаптивный экран
10:43 Делаем превьюшку карточек
25:50 Заголовок и теги
32:56 Делаем основные карточки
51:00 Таббар
55:00 Настраиваем прототип
Будем верстать адаптивный экран на автолэйаутах. Разберем подробнее абсолютное позиционирование, а также настроим экран для прототипа. Всякие фигурки звездочек и тд можете добавить при желании по аналогии через абсолютное позиционирование:)
0:00 Что будем делать
1:07 Верстаем навбар
7:48 Настраиваем адаптивный экран
10:43 Делаем превьюшку карточек
25:50 Заголовок и теги
32:56 Делаем основные карточки
51:00 Таббар
55:00 Настраиваем прототип
มุมมอง: 735
วีดีโอ
Figma autolayout - основы и практика
มุมมอง 7602 หลายเดือนก่อน
Привет! Решила рассказать про автолэйауты. Покажу как его добавить, как его можно растягивать, выравнивать. Посмотрим, как работают Fix, Fill и Hug. А также сделаем адаптивные карточки и сверстаем логотипчик фигмы В следующем уроке покажу, как сверстать полностью адаптивный экран на автолэйаутах:)
Переменные в Figma (урок 4)
มุมมอง 5472 หลายเดือนก่อน
Всем привет!) Это финальный урок по переменным в фигма. Будем делать клавиатуру на переменных и финальный экран. Надеюсь, вам было все понятно и интересно:) Пишите вопросы в комментах, отвечу:) Ссылка на плейлист: th-cam.com/play/PLAf-t2YkMd-wJtDUppbdfFwItuvnFWIO9.html 0:00 Создаём клавиатуру 5:34 Добавляем логику для клавиатуры 12:47 Делаем последний экран 25:03 Что у нас в итоге получилось По...
Переменные в Figma (урок 3)
มุมมอง 5572 หลายเดือนก่อน
Всем привет!) Это третий урок по переменным в Figma. В этом уроке сделаем выбор многих тегов с картинками и подсчет количества выбранного. Эмоджи для экрана с урока: 🍌🍦🥩🍅🍏🍪🥒🥚🥑 Все вопросы пишите в комментах, отвечу:) Ссылка на плейлист: th-cam.com/play/PLAf-t2YkMd-wJtDUppbdfFwItuvnFWIO9.html 0:00 Делаем заготовку для 3 экрана 2:12 Создаем теги 6:58 Делаем картинки 10:15 Накидываем логику на экр...
Переменные в Figma (урок 2)
มุมมอง 1.2K2 หลายเดือนก่อน
Всем привет! Это второй урок по переменным в Figma. В этом уроке сделаем тёмную и светлую тему, одинарный выбор, смену темы прямо в прототипе через Set variable mode и многое другое. Все вопросы пишите в комментариях, отвечу:) Ссылка на плейлист: th-cam.com/play/PLAf-t2YkMd-wJtDUppbdfFwItuvnFWIO9.html 0:00 Создаем картинки для экрана 3:06 Добавляем логику к смене картинок 7:07 делаем кнопку с л...
Переменные в Figma (урок 1)
มุมมอง 2.4K2 หลายเดือนก่อน
Всем привет! Это серия из 4 уроков по переменным в фигме. Во всем прототипе мы задействуем все 4 типа переменных и посмотрим как они работают. В этом уроке создадим переменные, будем менять их значение через Set variable, изучим Conditional и накинем на прототип много интересной логики. Все вопросы пишите в комментариях, отвечу:) Ссылка на плейлист: th-cam.com/play/PLAf-t2YkMd-wJtDUppbdfFwItuvn...
Спасибо, но у меня нету Figma Design😥
С нани порвало
О боже СПАСИБООО БОЛЬШОЕ ВАМ!!! Я ТУТ ДО МИЛЛИОН
Спасибо!❤❤❤
Саша, привет! Спасибо большое за уроки!
@@user-dar-123 привет!) Очень рада, что понравилось )))
Будут ли ещё ролики на канале?)
@@user-oo6wg3gl2v да, будут)) я стараюсь записывать, но свободного времени мало. Сейчас делаю ролик по переменным, потом по компонентам 🥲
@@SashaSmetanina спасибо вам за ваш труд ❤️
Наконец то достойное объяснение переменных
Спасибо!))
Это- второй самый доходчивый урок по продвинутой Фигме, который я нашел в русском Ютубе. И первый был тоже Сашин. Даже удивительно, что так мало реакций и подписчиков( Такой канал заслуживает большего!
Спасибо большое!!) очень приятно ❤️ Рада, что было полезно ❤️
Спасибо за видео! Все стало понятно)
Дизайн тоже своего рода немножко программирование))
Это правда, да)
Мде. До этого видео я еще думал, что что-то умею в Фигме...( Саша, спасибо, что глаза открыла!) Очень глубокие скилы у тебя, и предельно понятно рассказано
@@pavelpchelintsev6444 спасибо большое!))❤️ Фигма на самом деле не такая сложная, просто нужна практика:)
@@SashaSmetanina Хотя вот с одним косяком я по этому уроку никак не могу справиться( хотя все прописанные условия проверил- ошибки нет нигде. Проблема в том, что при любой активированной кнопке - тег 2,3 или 4-можно. активировать кнопку 1, и они останутся активными в паре. Не понимаю, в чем дело(
@@pavelpchelintsev6444 к сожалению, не очень понимаю ситуацию, сложно на словах ориентироваться:(
@@SashaSmetanina Могу скринкаст минутный сделать, если у тебя есть время его смотреть, конечно
@@pavelpchelintsev6444 да, давай. Гляну как будет время:)
Саша, огромное тебе спасибо, повторила для себя весь мини-курс по переменным и осталась в восторге от результата и твоей подачи. Очень классные примеры и понятные объяснения. Пожалуйста, продолжай снимать видео о фигме, очень не хватает таких учителей на ютубе, ты супер-талантлива! 💘💘💘
Ой спасибо огромное, очень-очень приятно! ❤️❤️❤️ Рада, что все получилось))
Спасибо, Саша. Очень импонирует, что тебе важно, чтобы всем было понятно и интересно. Милота и полезнота!)
@@karineminasyan687 спасибо большое! Очень рада ❤️❤️❤️
Добрый день, скажите пожалуйста как вы добавили анимацию для аватара? Cпасибо большое за такое полезное видео))
@@annamilner5016 спасибо) рада, что понравилось Аватарка двигается из-за того, что это гифка. Я ее скачала из стикеров телеграмма и конвертировала фоомат в gif. Но вы также можете взять любую анимацию в формате gif, будет все двигаться
@@SashaSmetanina Спасибо большое❤
Спасибо за урок
Огромное спасибо за такое подробный ролик! Всем селом ждем видос про компоненты :))
Хех скоро буду пилить!))❤
В моменте со скруглениями чет не получается ничего, несколько раз уже момент пересмотрел и все равно правый «квадратик» не двигается с текстом. У меня в одном фрейме текст и два абсолютно позиционированных квадратика. Левый сделал constraints left и Top, правый - Right Top. Что бы не делал, правый квадратик вообще не съезжает
Он просто по какой-то причине не хочет прилипать к правому краю
@@user-pf8jx8qt8oтакое бывает иногда, возможно фигма лагает. Попробуй снять абсолютное позиционирование, а потом опять добавить. Возможно поможет. Если нет, попробуй вынести так какой-то другой элемент проверить, вдруг с ним норм будет. Если тоже нет, попробуй у всего фрейма заголовка убрать абсолютное позиционирование, добавить туда квадратики, и уже потом выносить в абсолютное позиционирование. По идее должно работать как на видосе, но такое как у тебя, к сожалению, бывает (на крайняк попробуй с нуля сделать)
@@SashaSmetanina у меня тоже самое(( попробовала все, что ты написала ничего не помогает, переделывала с нуля 3 раза. А еще не могу понять почему у меня субстракты в слоях ниже текста, но при этом они перекрывают текст
Не дает пользоваться кондишнлом в фигме, это платная функция
И правда, спасибо!) Буду знать
Давно хотел изучать перемены. Спасибо большое за урок Саша, все очень понятно💥👍
Такой вопрос почему в название компонентов добавляешь Is "Is action" а не просто "action"? Играет ли это какую-то роль или нет?
Спасибо!))) Тут без разницы, можно писать просто "Action", можно "Is action", можно хоть "Have action" - тут как тебе больше нравится и как будет более понятно
Саша, привет. Спасибо за крутые видео! Смотрю взахлёб и параллельно практикуюсь. Скажи пожалуйста, вот ты ставишь "Спейсеры" в макет, а как разрабы к ним относятся, не усложняет ли им это работу и не нагружает ли сам экран? Я не то чтобы оспариваю твою работу, мне просто интересно понять необходимость их применения. Или у вас в компании есть договорённость их использования, и ты по привычке их используешь в этом обучающем макете? Заранее спасибо за ответ)
@@user-rd6wi2lz7i привет!) спасибо огромное))) У всех разрабов разный подход к верстке, но не встречала, чтобы разрабам не нравились спейсеры. Для них наши автолэйауты с отступами внутри и спейсеры - одно и то же, т.е. просто какое-то расстояние. Ты можешь хоть не в автолэйауте верстать, а просто во фрейме - они все равно поймут, так как смотрят расстояние между объектами
@@SashaSmetanina Спасибо за супер оперативный ответ! Приму во внимание!)))
Здоровские уроки! Спасибо!
@@den_kizhaev очень рада, что понравилось!))
Так рада, что мне попались в выдаче ваши ролики! Наконец-то у меня появилось понимание, как работают переменные. Спасибо вам большое за такой понятный и наглядный урок. Однозначно - лайк, подписка 👍🏻
Спасибо!) Очень рада, что помогла разобраться с переменными)))
В чем задумка что все отступы должны быть кратны 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 понял, спасибо
у меня возникло пара вопросиков: во-первых подскажи пожалуйста пак иконок, который ты используешь в этом уроке; во-вторых, очень понравилось то, как выглядит карточка поста, особенно скругления у заголовка, которые перекрывают обложку, но ведь если заголовок не поместиться на одну строчку - элемент скругления выйдет за пределы карточки, а у фотографии появиться некрасивый прямой угол справа снизу. как быть в таком случае? я как бы вижу два пути: через отступы / спейсеры в автолэйауте ограничить длину заголовка - этим мы добьёмся того, заголовок не сможет растянуться на всю ширину карточки, какой бы она не была., но тогда мы рискуем получить очень не информативные обрезаные заголовки (в такой заголовок даже не поместится фамилия Пеневежневецких, например 🫠 ). либо мы можем сделать два варианта карточки: один с милым, красивым заголовком, другой - без. что ты думаешь об этом? *p.s.* а ещё «option shift command v» звучит как заклинание из некрономикона 👾 5:45
1) К сожалению, этого пака уже нет в фигме, но есть похожий. Называется «+3000 free to use icons», вбей это в фигма комьюнити, должно найти) 2) Можно сделать ограничение по ширине у самого текста (он должен быть hug) и обрезать его в троеточие. Минусы такого решения: при большом экране будут такие же ограничения, как и для маленького экрана, а значит на большом телефоне будет зачастую достаточно большой отступ с правой стороны и странно сокращенный заголовок. Боюсь именно в такой реализации заголовка (вынесенном в абсолютное позиционирование) не получится сделать все автоматом по сокращениям, скорее всего придется вручную удалять символы при разных экранах. Поэтому, можно для него придумать правило: если строки 2, то текст не сокращается, а переносится на следующую строку, но делать это придется вручную (написать 2 строки и вынести блок с заголовком повыше, а нижнее скругление пониже). Если бы это не было вынесено в абсолютное позиционирование, можно было бы решить спейсерами Вот как-то так:) p.s. и правда заклинание какое-то :D
Сделай компоненты и варианты, а внутри автолейауты, наворот. Какой то серьезный макет типа архитектура
Хочу скоро сделать видос по компонентам, так объяснить всякие приколюхи, и потом показывать уже на них)
@@SashaSmetanina кайф,
спасибо тебе большое за этот мини-курс: было очень интересно, очень полезно, много нового узнал; словом - всё супер 🤗
Очень рада, что понравилось!))
Саша, спасибо! Уже который раз открываю для себя что-то новое у тебя в уроках :)
Очень рада, что могу помочь узнать что-то новое!) 🌼
Здорово, что урок проходит практически с настоящей задачей, так гораздо лучше понимаешь как применять на практике, спасибо!
Очень рада, что понравился такой формат)))💚
Бля вечер кайф, смотрю любимого фигмера, пиво в одной руке, автолейаут в другой, лежу смотрю, балдежом заряжаюсь))
Ахахах балдёёёж, круто))))
🖤
отличный гайд, просто отличный! спасибо тебе большое ❤
Спасибо!)) Рада, что понравилось ❤
Привет, Саша) Прошла все уроки, сделала персонажей из гифок мемных котов и радовалась каждый раз, запуская прототипчик. Большое спасибо за понятные и последовательные объяснения, подписалась, буду ждать новых классных штук 🥰
Спасибо!)) Очень рада, что все получилось и понравилось)) Очень здорово!
Поле фигмы не бесконечно. Есть края.
@@1974mura ну понятно, что есть края) это я преувеличила конечно)
@@SashaSmetanina я понял)) Я кстати всегда думал что краёв нет, а недавно наткнулся что предел есть оказывается))) долго пытался двинуть канвас в сторону пока добрый чел подсказал, что мол, успокойся, это бесполезно. У всего есть начало и конец
@@1974mura ахах да, есть такое))
Это мега крутое совпадение! Сегодня мы с тобой общались и вот ты у меня в Ютубе)) Я не искала тебя, ютуб сам предложил! А значит, он продвигает твои видео! Успехов тебе, много просмотров и лайков, Саша❤
Спасибо большое!!!❤️❤️❤️
О, спасибо большое! Данный урок помог разобраться с проблемой, которую мы решали очень долго. Оказалось, все не сложно! Большое спасибо!
Очень-очень рада, что получилось помочь решить проблему!)))
Не забрасивай канал, успехов и удачи тебе🎉
Большое спасибо!)))❤️
Круто придумала собирать состояния у элемента через секции :) Обязательно попробую тоже так сделать! На реальных проектах где обычно показывают эти состояния? Рядом с тем экраном/страницей где он применяется или выносится на отдельную страницу в фигме? Спасибо за видео! Уроки по переменным супер!
Спасибо!) Я, например, в работе отрисовываю эти состояния рядом с экраном в отдельном секшене. Если флоу большой - рисую сначала весь путь пользователя, а уже рядом создаю секцию «состояния элемента» и кладу туда экран, а справа от него состояния. Тут от конкретных макетов зависит, но лучше не уносить сильно далеко такие состояния, иначе могут не найти Это точно не стоит делать на отдельной странице. Максимум в отдельном секшене или фрейме, или просто в местечке, где сразу можно понять «вот флоу, вот экран, а вот прям тут его состояния»
@@SashaSmetanina спасибо большое за развернутый ответ!
@@ellniel обращайся:)
а где твой тг канал можно найти?
У меня пока нет тг канала:)
@@SashaSmetanina сделай пожалуйста, подпишусь и другие тоже будут рады думаю и подпишутся 🙂
@@SashaSmetanina Пора бы завести
Не знаю что это даже, но сейчас посмотрю обязательно)
Хех, надеюсь будет полезно:)
Круто, полезно для продвинутого использования. А то уроки наподобие "щас я покажу как заменить текст" уже все переросли...
Спасибо!) Рада, что было полезно))
Ура вышел ролик моей любимой блогерши Саши Сметаниной! Летс факинг гоу уничтожать эти автолейауты!!!!11
Ахах, так мило)))
Спасибо большое за урок!!!❤❤❤
Очень рада, что понравилось!🩷
Саша, спасибо за урок! Хоть и знал про автолейауты, подчеркнул новое у тебя, например спейсеры и про варианты карточек. Сейчас у Фигмы, вышла обнова Suggest auto layout Ctrl +Alt+Shift+А позволяет оборачивать много объектов в автолейауты автоматически, интересная вещь.
Спасибо!❤️ Да, фигма сделала автоматический автолэйаут, но он работает не на все 100% хорошо:) Но его можно создать, а потом просто поправить)
Саша, спасибо!!!!!!!!! Это пушка-бомба!
Большое спасибо!))) Рада, что понравилось))
Спасибо!
Саша, спасибо за уроки! Сделал все четыре. Наконец-то начал дружбу с переменными и автолейаутами. Понравилось упражнение и как ты доходчиво объясняешь каждый этап.
Большое спасибо!)))❤️ Это очень здорово, что все получилось. Рада, что вышло понятно объяснить :))
Классный урок, спасибо ☺️ это же работает только в платной версии фигмы?
Спасибо!) Переменные доступны бесплатно, только в них нельзя создавать темы (например, темную тему для изменения цветов, это только в платной). Поэтому, должны быть доступны
Логические операторы на прототипах только в платной, так что почти всё из показанного, к сожалению, не сделать на free аккаунте... Но если честно, это и не нужно. Слишком много труда ради элементарного эффекта, делающегося в коде за 2-3 строчки. На крайняк можно во Framer перегнать, там насколько знаю, всё это в бесплатной версии работает.
Спасибо за интересное видео и подробное объяснение процесса создания прототипа приложения, особенно понравилось, как вы показали работу с аватарками и тегами. Я сам недавно начал осваивать веб-разработку и столкнулся с выбором курсов. Рассматривал разные варианты, но в итоге выбрал Skypro, так как у них были лучшие отзывы. Курсы оказались очень структурированными и понятными. Уже через несколько месяцев я смог начать работать по новой специальности и устроился на хорошую работу.
Спасибо! Очень полезно
Спасибо! 😍
Подскажи пожалуйста, где достать такие стикеры? Уж очень они симпотичные)
Я их скачивала из телеграмма и меняла им расширение на gif (можно на сайтах разных конвертировать). Конкретно стикеры из урока с шибой из пака Shiba Inu, а зайка из пака Mia Bunny. Гифки с аватарок - это просто эмодзи, которые анимируются с телеграм премиум:)
@@SashaSmetanina угу, понятно. Спасибо за материал! Супер подача)
@@farrukhx7143 спасибо большое!)))❤️
Очень классная серия роликов получилась) я правда один пока посмотрел, но подача супер) я опытный дизайнер, но мне все равно было интересно, хотя некоторые моменты технически я бы сделал иначе, но это не критично) успехов в развитии канала и дизайн-навыков))
Большое спасибо!)) Очень приятно ❤