Как сделать календарь в Фигме с Auto Layout?

Рет қаралды 20,641

3 жыл бұрын

🔥 Мой авторский курс «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

Пікірлер: 82

@yulya3072 Жыл бұрын

Волшебный урок, абсолютно доступно и в хорошем темпе. Подписка+

@Chyrkov Жыл бұрын

Спасибо большое) рад что понравилось!)

@user-kg7xj2xk9f 3 жыл бұрын

Это мэйджик! Сергей, спасибо что записал подробное объяснение!

@Chyrkov 3 жыл бұрын

Рад, что оказалось было полезно))

@YuliaRada-by2jf Жыл бұрын

Всё супер понятно! Спасибо огромное за классный урок

@Chyrkov Жыл бұрын

Юлия, спасибо большое за отзыв!!

@user-hg9oo5wi9h 2 жыл бұрын

Благодарю! Захотелось создать календарик :) ценное видео.

@Chyrkov 2 жыл бұрын

Обязательно попробуйте!)

@sothatsthelemontea5154 3 жыл бұрын

Спасибо большое! Очень полезная информация.

@Chyrkov 3 жыл бұрын

пожалуйста!)

@dazzle_no_mana 9 ай бұрын

Спасибо большое! Я только обучаюсь и каждый элемент у меня вызывает затруднения и муку😅 Благодаря таким видео, появляется надежда, что это все же выполнимо❤️ Я наконец поняла, зачем нужна эта функция🎉

@Chyrkov 9 ай бұрын

Ура!🥳 рад, что у вас получатся! Главное не останавливаться! Рекомендую посмотреть другие видео у меня на канале, там много полезного😉 а еще приглашаю на свой курс по Фигме😎

@glorigrey8602 3 жыл бұрын

Благодарю, с удовольствием посмотрела и применила в работе. никаких вопросов не осталось. Жду много новых видео уроков;)

@Chyrkov 3 жыл бұрын

Спасибо! Рад, что понравилось!) Пишите темы, которые будут интересны!

@glorigrey8602 3 жыл бұрын

@@Chyrkov я б хотела тему в которой показаны возможности Auto Layout, как и где он чаще всего применяется в практических задачах

@Chyrkov 3 жыл бұрын

ок, спасибо! сделаем!)

@Kitsutoriki 3 жыл бұрын

Спасибо! Очень полезный урок

@Chyrkov 3 жыл бұрын

Пожалуйста) рад, что было полезно)

@maksymtyshchenko7084 3 жыл бұрын

Сергей, спасибо за Ваше подробное видео. Лайк и подписка! Удачи.

@Chyrkov 3 жыл бұрын

Спасибо, Максим!) рад, что помог!)

@beYoGick 3 жыл бұрын

Спасибо, Сергей! Со второго раза у меня получилось, теперь всё ровненько) Полезный видос.

@Chyrkov 3 жыл бұрын

Отлично!) Рад, что все получилось)

@user-ex4qq4yx1p 2 ай бұрын

БЛАГОДАРЮ

@Chyrkov 2 ай бұрын

Пожалуйста ☺️

@sergshin7712 2 жыл бұрын

Спасибо за видео! Сергей, как настроить аутолэйаут, чтобы выделенные даты тоже были резиновые?

@Chyrkov 2 жыл бұрын

Пожалуйста! К сожалению так не получается сделать. В теории нужно тянуть зелёный фрейм который находится во фрейме с остальными датами в ряду, но фигма не понимает как оно должно тянуться…

@sergshin7712 2 жыл бұрын

@@Chyrkov Спасибо! А то я замучился пробовать)

@oksana.g9175 2 жыл бұрын

я наконец-то поняла для чего нужен автолоял этот

@Chyrkov 2 жыл бұрын

Отлично!))

@user-tz4fb6fm3p 2 жыл бұрын

Огромное спасибо за видео!

@Chyrkov 2 жыл бұрын

Огромное пожалуйста!))

@marinelife5218 2 жыл бұрын

Спасибо за видео! С третьего раза получилось сделать календарь :D

@Chyrkov 2 жыл бұрын

Ура!))) рад, что получилось!)

@teddyrose5289 2 жыл бұрын

Благодарю

@Chyrkov 2 жыл бұрын

Пожалуйста!)

@asstridv2934 Жыл бұрын

Здравствуйте! А у вас интерфейс в Фигме по другому оформлен, как достичь такого стиля или это только на яблоке?

@Chyrkov Жыл бұрын

Привет! Это очень старое видео и с того времени произошли изменения в интерфейсе фигмы особенно в Auto Layout. Буквально даже неделю назад были обновления. Рекомендую посмотреть более свежие видео у меня на канале, например создание калькулятора, там скорее всего будет уже более привычный для вас интерфейс.

@antdrag4754 2 жыл бұрын

Отличный пример, возьму на вооружение ) А есть ли видео по вариантс?

@Chyrkov 2 жыл бұрын

берите)) по вариантам нет, надо сделать))) но есть много про интерактивные компоненты)

@antdrag4754 2 жыл бұрын

@@Chyrkov Да, тоже интересно для прототипирования

@user-dc6eq9nr2n 2 жыл бұрын

Спасибо за видео!!

@Chyrkov 2 жыл бұрын

Пожалуйста)

@dimashukan5372 3 жыл бұрын

Спасибо за туториал, такой вопрос: может, было бы лучше поместить каждую цифру в автолэйаут, как это было в конце урока?

@Chyrkov 3 жыл бұрын

Пожалуйста! Да, можно если вы точно планировали создавать «выделение» дат. Но так как основная задача была сделать календарную сетку, а выделение это как доп опция) не вижу смысла тратить на это время)

@user-du4ce7dw8d Жыл бұрын

Дуже інформативно та доступно, з першого разу все вдалось. Дякую :)

@Chyrkov Жыл бұрын

здорово) рад, что все получилось!)

@svetlanakim4861 Жыл бұрын

Супер

@Chyrkov Жыл бұрын

Спасибо)

@elizavetasmith8152 2 жыл бұрын

Спасибо!

@Chyrkov 2 жыл бұрын

Пожалуйста!)

@MrMoorich 2 жыл бұрын

а возможно ли сделать выделение дат (диапазон) интерактивным?

@Chyrkov 2 жыл бұрын

Да можно это сделать через интерактивный компонент. Но конечно это будет иметь демонстрационный характер, чтобы показать визуал.

@user-vb1bu9we5w 9 ай бұрын

Все это очень хорошо. Но как его листать?

@Chyrkov 9 ай бұрын

Элементарно) создается компонент с вариантами на каждый месяц. Затем настаивается прототип с переходами. Можно попробовать сделать без вариантов, сделать через переменные (variables) прототипа, но думаю это будет сложнее

@user-fc3hs3fp3j 9 ай бұрын

Как сделать так, чтобы лишних чисел старого месяца не было, как их убрать без сдвига остальных ?

@Chyrkov 8 ай бұрын

Проще всего, чтобы оставить эффект респонсива, можно просто скрыть номера предыдущего месяца, чтобы там были пустышки 😉

@user-ln6pe1br8m 2 жыл бұрын

Что нужно зажать что бы сразу несколько выделить и перекрасить?

@Chyrkov 2 жыл бұрын

Попробуйте зажать контрл шифт и выделить все объекты которые вам нужны

@user-ln6pe1br8m 2 жыл бұрын

@@Chyrkov да вышло. Большое спасибо

@ai-bloggers 2 жыл бұрын

Добрый день. А как сделать так: нажимаешь на иконку в приложении и как бы круг от неё расходится? Если будет возможность такой урок записать, то спасибо огромное 🎉

@Chyrkov 2 жыл бұрын

привет! спасибо за идею) попробую сделать)

@user-dc6eq9nr2n 2 жыл бұрын

Почему когда делаю аутолояут в автолояуте и после этого когда дублирую, то дублируется по горизонтали, а не по вертикали? Может увидите комментарий))

@Chyrkov 2 жыл бұрын

Справа в настройках Auto Layout есть две стрелочки которые указывают направление расположение объектов внутри AL. Вам нужно выбрать стрелочку которая указывает вниз (вертикаль).

@user-dc6eq9nr2n 2 жыл бұрын

@@Chyrkov разобрался, это надо было в слоях фрейм выделять и копировать))

@mykytaherman2437 3 ай бұрын

а где найти resizing?у меня в фигме нет ((

@Chyrkov 3 ай бұрын

Интерфейс Фигмы поменялся с момента записи этого видео, более свежие можно посмотреть тут kzfaq.info/get/bejne/h7WbiqZ51dK5mJ8.html

@alex_pivko 2 жыл бұрын

Вопрос. Сергей, вот вы выделили 6,7 и 8 числа чтобы показать диапазон. А если мне нужно показать диапазон с 6 по 21 числа. Я попытался выделить все числа и добавить их в ауто лайаут. Получился какой то ужас 😨 как правильно это сделать , как правильно показать такой большой диапазон ?

@Chyrkov 2 жыл бұрын

Объедините все числа в строке в отдельный AL и закрасите фон AL через fill. Если большой диапазон, объедините другие числа в следующих строках. Главное не объединять строки, вам нужны только числа в строках.

@Passificspring 2 жыл бұрын

Сергей, спасибо за видео )) Могли бы Вы сделать подробное видео по Variants (как быстро щолкать вариативные блоки в сайтах, формы в разном состоянии). Заранее благодарю

@Chyrkov 2 жыл бұрын

пожалуйста!) сделаем!

@Chyrkov 2 жыл бұрын

привет!) видео по заявке залил))

@exlibrisv1 Жыл бұрын

После создания "периода" календарь поломается и адекватно трансформироваться не будет, тк fill не работает в пропорциях/процентах, фигма в той строке будет 5 равноширинных элементов, а в других по 7. Если посмотреть свойства у нового фрейма ширина "под контент" и заданные отступы.

@Chyrkov Жыл бұрын

Да вы все верно заметили, фигма к сожалению не понимает как можно тянуть эту строку с выделенными датами вместе с остальным календарем. Если вы найдете способ, присылайте!

@exlibrisv1 Жыл бұрын

@@Chyrkov делать промежутки отдельными компонентами со своими вариантами, и потом менять. Получаются компоненты с датами фиксированного размера с выравниванием текста по центру (что позволит ставить нормальные даты вместо 01, 02 и тд.), и между ними промежутки с значением fill. И потом просто датам и промежуткам меняем условное состояние с рест на актив, ни чего не группируя. Кмк это сделать проще чем описывать в комментарии))

@denyspk3131 Жыл бұрын

У меня не виходит блок "resizing" не понимаю почему , делаю все как в видео

@Chyrkov Жыл бұрын

Уточните пожалуйста на каком моменте в видео? У вас точно все в AL находится?

@killme.l Жыл бұрын

@@Chyrkov у мен такая же проблема, на 6:49 минуте, у меня нет resizing, хотя все находится в auto layout

@Chyrkov Жыл бұрын

@@killme.l в мае 2022 в фигме были обновления и теперь интерфейс отличается. посмотрите мой обзор обновления здесь kzfaq.info/get/bejne/btuHlJmZ0N3dlZ8.html

@user-yi5lp3vb9z 2 жыл бұрын

Спасибо, хороший урок. Но у меня он так не работает- когда пытаюсь ctrl+D- у меня не хочет дублироваться вниз- а сбоку пропадает меню лаут...когда выделяю текст, например 29- тоже пропадает меню. И вишенка на торте- когда вставляю один лаут в другой- у меня он почти наползает на текст внизу....

@Chyrkov 2 жыл бұрын

Спасибо за комментарий! Сложно понять не видя макет. Дублируется вниз скорее всего потому что у вас ориентация AL стоит горизонтальная. Меню пропадает потому что сам текст не может быть AL, он может быть только внутри AL. По вставке, тут сложно понять, скорее всего у вас не стоит spacing между объектами и они поэтому не выстраиваются в ряд…