Это- второй самый доходчивый урок по продвинутой Фигме, который я нашел в русском Ютубе. И первый был тоже Сашин. Даже удивительно, что так мало реакций и подписчиков( Такой канал заслуживает большего!
Мде. До этого видео я еще думал, что что-то умею в Фигме...( Саша, спасибо, что глаза открыла!) Очень глубокие скилы у тебя, и предельно понятно рассказано
@@SashaSmetanina Хотя вот с одним косяком я по этому уроку никак не могу справиться( хотя все прописанные условия проверил- ошибки нет нигде. Проблема в том, что при любой активированной кнопке - тег 2,3 или 4-можно. активировать кнопку 1, и они останутся активными в паре. Не понимаю, в чем дело(
Саша, огромное тебе спасибо, повторила для себя весь мини-курс по переменным и осталась в восторге от результата и твоей подачи. Очень классные примеры и понятные объяснения. Пожалуйста, продолжай снимать видео о фигме, очень не хватает таких учителей на ютубе, ты супер-талантлива! 💘💘💘
@@annamilner5016 спасибо) рада, что понравилось Аватарка двигается из-за того, что это гифка. Я ее скачала из стикеров телеграмма и конвертировала фоомат в gif. Но вы также можете взять любую анимацию в формате gif, будет все двигаться
В моменте со скруглениями чет не получается ничего, несколько раз уже момент пересмотрел и все равно правый «квадратик» не двигается с текстом. У меня в одном фрейме текст и два абсолютно позиционированных квадратика. Левый сделал constraints left и Top, правый - Right Top. Что бы не делал, правый квадратик вообще не съезжает
@@user-pf8jx8qt8oтакое бывает иногда, возможно фигма лагает. Попробуй снять абсолютное позиционирование, а потом опять добавить. Возможно поможет. Если нет, попробуй вынести так какой-то другой элемент проверить, вдруг с ним норм будет. Если тоже нет, попробуй у всего фрейма заголовка убрать абсолютное позиционирование, добавить туда квадратики, и уже потом выносить в абсолютное позиционирование. По идее должно работать как на видосе, но такое как у тебя, к сожалению, бывает (на крайняк попробуй с нуля сделать)
@@SashaSmetanina у меня тоже самое(( попробовала все, что ты написала ничего не помогает, переделывала с нуля 3 раза. А еще не могу понять почему у меня субстракты в слоях ниже текста, но при этом они перекрывают текст
Спасибо!))) Тут без разницы, можно писать просто "Action", можно "Is action", можно хоть "Have action" - тут как тебе больше нравится и как будет более понятно
Саша, привет. Спасибо за крутые видео! Смотрю взахлёб и параллельно практикуюсь. Скажи пожалуйста, вот ты ставишь "Спейсеры" в макет, а как разрабы к ним относятся, не усложняет ли им это работу и не нагружает ли сам экран? Я не то чтобы оспариваю твою работу, мне просто интересно понять необходимость их применения. Или у вас в компании есть договорённость их использования, и ты по привычке их используешь в этом обучающем макете? Заранее спасибо за ответ)
@@user-rd6wi2lz7i привет!) спасибо огромное))) У всех разрабов разный подход к верстке, но не встречала, чтобы разрабам не нравились спейсеры. Для них наши автолэйауты с отступами внутри и спейсеры - одно и то же, т.е. просто какое-то расстояние. Ты можешь хоть не в автолэйауте верстать, а просто во фрейме - они все равно поймут, так как смотрят расстояние между объектами
Так рада, что мне попались в выдаче ваши ролики! Наконец-то у меня появилось понимание, как работают переменные. Спасибо вам большое за такой понятный и наглядный урок. Однозначно - лайк, подписка 👍🏻
В чем задумка что все отступы должны быть кратны 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 каждый раз и их не так сложно запомнить:)
у меня возникло пара вопросиков: во-первых подскажи пожалуйста пак иконок, который ты используешь в этом уроке; во-вторых, очень понравилось то, как выглядит карточка поста, особенно скругления у заголовка, которые перекрывают обложку, но ведь если заголовок не поместиться на одну строчку - элемент скругления выйдет за пределы карточки, а у фотографии появиться некрасивый прямой угол справа снизу. как быть в таком случае? я как бы вижу два пути: через отступы / спейсеры в автолэйауте ограничить длину заголовка - этим мы добьёмся того, заголовок не сможет растянуться на всю ширину карточки, какой бы она не была., но тогда мы рискуем получить очень не информативные обрезаные заголовки (в такой заголовок даже не поместится фамилия Пеневежневецких, например 🫠 ). либо мы можем сделать два варианта карточки: один с милым, красивым заголовком, другой - без. что ты думаешь об этом? *p.s.* а ещё «option shift command v» звучит как заклинание из некрономикона 👾 5:45
1) К сожалению, этого пака уже нет в фигме, но есть похожий. Называется «+3000 free to use icons», вбей это в фигма комьюнити, должно найти) 2) Можно сделать ограничение по ширине у самого текста (он должен быть hug) и обрезать его в троеточие. Минусы такого решения: при большом экране будут такие же ограничения, как и для маленького экрана, а значит на большом телефоне будет зачастую достаточно большой отступ с правой стороны и странно сокращенный заголовок. Боюсь именно в такой реализации заголовка (вынесенном в абсолютное позиционирование) не получится сделать все автоматом по сокращениям, скорее всего придется вручную удалять символы при разных экранах. Поэтому, можно для него придумать правило: если строки 2, то текст не сокращается, а переносится на следующую строку, но делать это придется вручную (написать 2 строки и вынести блок с заголовком повыше, а нижнее скругление пониже). Если бы это не было вынесено в абсолютное позиционирование, можно было бы решить спейсерами Вот как-то так:) p.s. и правда заклинание какое-то :D
Привет, Саша) Прошла все уроки, сделала персонажей из гифок мемных котов и радовалась каждый раз, запуская прототипчик. Большое спасибо за понятные и последовательные объяснения, подписалась, буду ждать новых классных штук 🥰
@@SashaSmetanina я понял)) Я кстати всегда думал что краёв нет, а недавно наткнулся что предел есть оказывается))) долго пытался двинуть канвас в сторону пока добрый чел подсказал, что мол, успокойся, это бесполезно. У всего есть начало и конец
Это мега крутое совпадение! Сегодня мы с тобой общались и вот ты у меня в Ютубе)) Я не искала тебя, ютуб сам предложил! А значит, он продвигает твои видео! Успехов тебе, много просмотров и лайков, Саша❤
Круто придумала собирать состояния у элемента через секции :) Обязательно попробую тоже так сделать! На реальных проектах где обычно показывают эти состояния? Рядом с тем экраном/страницей где он применяется или выносится на отдельную страницу в фигме? Спасибо за видео! Уроки по переменным супер!
Спасибо!) Я, например, в работе отрисовываю эти состояния рядом с экраном в отдельном секшене. Если флоу большой - рисую сначала весь путь пользователя, а уже рядом создаю секцию «состояния элемента» и кладу туда экран, а справа от него состояния. Тут от конкретных макетов зависит, но лучше не уносить сильно далеко такие состояния, иначе могут не найти Это точно не стоит делать на отдельной странице. Максимум в отдельном секшене или фрейме, или просто в местечке, где сразу можно понять «вот флоу, вот экран, а вот прям тут его состояния»
Саша, спасибо за урок! Хоть и знал про автолейауты, подчеркнул новое у тебя, например спейсеры и про варианты карточек. Сейчас у Фигмы, вышла обнова Suggest auto layout Ctrl +Alt+Shift+А позволяет оборачивать много объектов в автолейауты автоматически, интересная вещь.
Саша, спасибо за уроки! Сделал все четыре. Наконец-то начал дружбу с переменными и автолейаутами. Понравилось упражнение и как ты доходчиво объясняешь каждый этап.
Спасибо!) Переменные доступны бесплатно, только в них нельзя создавать темы (например, темную тему для изменения цветов, это только в платной). Поэтому, должны быть доступны
Логические операторы на прототипах только в платной, так что почти всё из показанного, к сожалению, не сделать на free аккаунте... Но если честно, это и не нужно. Слишком много труда ради элементарного эффекта, делающегося в коде за 2-3 строчки. На крайняк можно во Framer перегнать, там насколько знаю, всё это в бесплатной версии работает.
Спасибо за интересное видео и подробное объяснение процесса создания прототипа приложения, особенно понравилось, как вы показали работу с аватарками и тегами. Я сам недавно начал осваивать веб-разработку и столкнулся с выбором курсов. Рассматривал разные варианты, но в итоге выбрал Skypro, так как у них были лучшие отзывы. Курсы оказались очень структурированными и понятными. Уже через несколько месяцев я смог начать работать по новой специальности и устроился на хорошую работу.
Я их скачивала из телеграмма и меняла им расширение на gif (можно на сайтах разных конвертировать). Конкретно стикеры из урока с шибой из пака Shiba Inu, а зайка из пака Mia Bunny. Гифки с аватарок - это просто эмодзи, которые анимируются с телеграм премиум:)
Очень классная серия роликов получилась) я правда один пока посмотрел, но подача супер) я опытный дизайнер, но мне все равно было интересно, хотя некоторые моменты технически я бы сделал иначе, но это не критично) успехов в развитии канала и дизайн-навыков))
Спасибо большое за урок и низкий Вам поклон! Огромная просьба, если получится, на уроке с клавиатурой пояснить как можно делать стирание текста по одному символу, а не полной очисткой. И ещё если возможно, подскажите пожалуйста, если делать инпут ручного ввода теста (уже без ui-клавиатуры) для десктопа с привязкой каждой кнопки, как грамотно сделать переход с английского на русский, в случае с ui-клавиатурой всё получилось-там же кнопка, к ней и вяжем, а вот здесь вообще никак не получается задать по Alt+Shift.
Спасибо!)) По стиранию символов - я попробовала это сделать, и это возможно. Но с очень большими ограниченяими, у меня получилось сделать возможность стирания последних четырех букв, но это очень сложный алгоритм. Скорее всего потом запишу об этом ролик. По изменению на английский язык - не нужно привязывать к альт шифт, а просто в интерекшене сделать нажатия английских символов. Там он сам по идее должен применить это все хорошо. Пока сама не пробовала так делать, но в теории должно быть ок. А может и нет:) Позже проверю и отпишусь