Как сделать календарь в Фигме с Auto Layout?
Вставка
- Опубліковано 15 січ 2021
- 🔥 Мой авторский курс «Figma с нуля»: 👉 designsweets.co/courses/figma...
В этом видео вы узнаете как быстро и просто нарисовать адаптивную карточку календаря используя инструмент Auto Layout в Figma. Пошагово мы создадим разметку календаря, используя только функцию auto-layout и затем создадим полноценную карточку календаря с выбранным диапазоном дат.
👉 Бесплатный доступ к исходнику: www.buymeacoffee.com/chyrkov/...
🔗 Мои ссылки:
Мой канал в телеге: t.me/chyrkovfm
Мой авторский курс «Figma с нуля»: 👉 designsweets.co/courses/figma...
Студия: chyrkov.studio
Behance: www.behance.net/chyrkov
Twitter: / sergeichyrkov
Портфолио по фото: sergeichyrkov.com
_____________
#Figma #FigmaTutorial #UXDesign #Webdesign
Волшебный урок, абсолютно доступно и в хорошем темпе. Подписка+
Спасибо большое) рад что понравилось!)
Это мэйджик! Сергей, спасибо что записал подробное объяснение!
Рад, что оказалось было полезно))
Всё супер понятно! Спасибо огромное за классный урок
Юлия, спасибо большое за отзыв!!
Спасибо! Очень полезный урок
Пожалуйста) рад, что было полезно)
Спасибо большое! Очень полезная информация.
пожалуйста!)
Благодарю, с удовольствием посмотрела и применила в работе. никаких вопросов не осталось. Жду много новых видео уроков;)
Спасибо! Рад, что понравилось!) Пишите темы, которые будут интересны!
@@Chyrkov я б хотела тему в которой показаны возможности Auto Layout, как и где он чаще всего применяется в практических задачах
ок, спасибо! сделаем!)
Сергей, спасибо за Ваше подробное видео.
Лайк и подписка!
Удачи.
Спасибо, Максим!) рад, что помог!)
Спасибо большое! Я только обучаюсь и каждый элемент у меня вызывает затруднения и муку😅 Благодаря таким видео, появляется надежда, что это все же выполнимо❤️ Я наконец поняла, зачем нужна эта функция🎉
Ура!🥳 рад, что у вас получатся! Главное не останавливаться! Рекомендую посмотреть другие видео у меня на канале, там много полезного😉 а еще приглашаю на свой курс по Фигме😎
Благодарю! Захотелось создать календарик :) ценное видео.
Обязательно попробуйте!)
Спасибо, Сергей!
Со второго раза у меня получилось, теперь всё ровненько) Полезный видос.
Отлично!) Рад, что все получилось)
БЛАГОДАРЮ
Пожалуйста ☺️
Огромное спасибо за видео!
Огромное пожалуйста!))
Благодарю
Пожалуйста!)
Дуже інформативно та доступно, з першого разу все вдалось. Дякую :)
здорово) рад, что все получилось!)
Спасибо за видео!!
Пожалуйста)
я наконец-то поняла для чего нужен автолоял этот
Отлично!))
Спасибо за видео! С третьего раза получилось сделать календарь :D
Ура!))) рад, что получилось!)
Спасибо!
Пожалуйста!)
Супер
Спасибо)
Отличный пример, возьму на вооружение ) А есть ли видео по вариантс?
берите)) по вариантам нет, надо сделать))) но есть много про интерактивные компоненты)
@@Chyrkov Да, тоже интересно для прототипирования
Спасибо за видео! Сергей, как настроить аутолэйаут, чтобы выделенные даты тоже были резиновые?
Пожалуйста! К сожалению так не получается сделать. В теории нужно тянуть зелёный фрейм который находится во фрейме с остальными датами в ряду, но фигма не понимает как оно должно тянуться…
@@Chyrkov Спасибо! А то я замучился пробовать)
Спасибо за туториал, такой вопрос: может, было бы лучше поместить каждую цифру в автолэйаут, как это было в конце урока?
Пожалуйста! Да, можно если вы точно планировали создавать «выделение» дат. Но так как основная задача была сделать календарную сетку, а выделение это как доп опция) не вижу смысла тратить на это время)
Здравствуйте! А у вас интерфейс в Фигме по другому оформлен, как достичь такого стиля или это только на яблоке?
Привет! Это очень старое видео и с того времени произошли изменения в интерфейсе фигмы особенно в Auto Layout. Буквально даже неделю назад были обновления. Рекомендую посмотреть более свежие видео у меня на канале, например создание калькулятора, там скорее всего будет уже более привычный для вас интерфейс.
Почему когда делаю аутолояут в автолояуте и после этого когда дублирую, то дублируется по горизонтали, а не по вертикали? Может увидите комментарий))
Справа в настройках Auto Layout есть две стрелочки которые указывают направление расположение объектов внутри AL. Вам нужно выбрать стрелочку которая указывает вниз (вертикаль).
@@Chyrkov разобрался, это надо было в слоях фрейм выделять и копировать))
Как сделать так, чтобы лишних чисел старого месяца не было, как их убрать без сдвига остальных ?
Проще всего, чтобы оставить эффект респонсива, можно просто скрыть номера предыдущего месяца, чтобы там были пустышки 😉
Большое спасибо) Но у меня есть вопрос, как уже ваш готовый календарь растягивать без потери диапазона?
пожалуйста! если вы все правильно собрали в Auto Layout и режим Fill тогда он будет тянуться без перестраивания.
а возможно ли сделать выделение дат (диапазон) интерактивным?
Да можно это сделать через интерактивный компонент. Но конечно это будет иметь демонстрационный характер, чтобы показать визуал.
Добрый день. А как сделать так: нажимаешь на иконку в приложении и как бы круг от неё расходится? Если будет возможность такой урок записать, то спасибо огромное 🎉
привет! спасибо за идею) попробую сделать)
Что нужно зажать что бы сразу несколько выделить и перекрасить?
Попробуйте зажать контрл шифт и выделить все объекты которые вам нужны
@@Chyrkov да вышло. Большое спасибо
Вопрос. Сергей, вот вы выделили 6,7 и 8 числа чтобы показать диапазон. А если мне нужно показать диапазон с 6 по 21 числа. Я попытался выделить все числа и добавить их в ауто лайаут. Получился какой то ужас 😨 как правильно это сделать , как правильно показать такой большой диапазон ?
Объедините все числа в строке в отдельный AL и закрасите фон AL через fill. Если большой диапазон, объедините другие числа в следующих строках. Главное не объединять строки, вам нужны только числа в строках.
Все это очень хорошо. Но как его листать?
Элементарно) создается компонент с вариантами на каждый месяц. Затем настаивается прототип с переходами. Можно попробовать сделать без вариантов, сделать через переменные (variables) прототипа, но думаю это будет сложнее
а где найти resizing?у меня в фигме нет ((
Интерфейс Фигмы поменялся с момента записи этого видео, более свежие можно посмотреть тут
ua-cam.com/video/QOkWCHplUhk/v-deo.html
Сергей, спасибо за видео ))
Могли бы Вы сделать подробное видео по Variants (как быстро щолкать вариативные блоки в сайтах, формы в разном состоянии). Заранее благодарю
пожалуйста!) сделаем!
привет!) видео по заявке залил))
После создания "периода" календарь поломается и адекватно трансформироваться не будет, тк fill не работает в пропорциях/процентах, фигма в той строке будет 5 равноширинных элементов, а в других по 7. Если посмотреть свойства у нового фрейма ширина "под контент" и заданные отступы.
Да вы все верно заметили, фигма к сожалению не понимает как можно тянуть эту строку с выделенными датами вместе с остальным календарем. Если вы найдете способ, присылайте!
@@Chyrkov делать промежутки отдельными компонентами со своими вариантами, и потом менять. Получаются компоненты с датами фиксированного размера с выравниванием текста по центру (что позволит ставить нормальные даты вместо 01, 02 и тд.), и между ними промежутки с значением fill. И потом просто датам и промежуткам меняем условное состояние с рест на актив, ни чего не группируя. Кмк это сделать проще чем описывать в комментарии))
Спасибо, хороший урок. Но у меня он так не работает- когда пытаюсь ctrl+D- у меня не хочет дублироваться вниз- а сбоку пропадает меню лаут...когда выделяю текст, например 29- тоже пропадает меню. И вишенка на торте- когда вставляю один лаут в другой- у меня он почти наползает на текст внизу....
Спасибо за комментарий! Сложно понять не видя макет. Дублируется вниз скорее всего потому что у вас ориентация AL стоит горизонтальная. Меню пропадает потому что сам текст не может быть AL, он может быть только внутри AL. По вставке, тут сложно понять, скорее всего у вас не стоит spacing между объектами и они поэтому не выстраиваются в ряд…
У меня не виходит блок "resizing" не понимаю почему , делаю все как в видео
Уточните пожалуйста на каком моменте в видео? У вас точно все в AL находится?
@@Chyrkov у мен такая же проблема, на 6:49 минуте, у меня нет resizing, хотя все находится в auto layout
@@killme.l в мае 2022 в фигме были обновления и теперь интерфейс отличается. посмотрите мой обзор обновления здесь ua-cam.com/video/8uWa6hkwyek/v-deo.html
не аут layout, АВТО layout!
АУТО лэйаут 😉