Новые Auto Layout и умные таблицы в Figma
HTML-код
- Опубликовано: 5 авг 2024
- #figma #autolayout
Auto Layout и таблицы в Figma. В этом видео вгрызаемся в тему новых аликов. Сделаем карточку магазина и таблицу.
🎞 ОГЛАВЛЕНИЕ
00:00 Начало
00:50 Auto Layout - Основное
04:31 Магазинная карточка
09:13 Таблицы Auto Layout
ВАЖНОЕ:
Моя фигма-страница
figma.com/@vandesign
Figma-чат
t.me/figmachat
Figma Help
figma.help
🧰 Уроки Figma на русском.
Фигма - это бесплатная онлайн программа для дизайна web и UI. Приложения для Windows, Mac OS, Android (Material design) и iOS. Программу можно скачать на сайте (www.figma.com/).
• Как сделать в Фигме свой первый сайт.
• Как использовать сетки и направляющие в вашем проекте.
• Что такое компоненты и фреймы в Фигме.
• Самые интересные плагины (plugins) Фигмы.
• Горячие клавиши для Windows и Mac OS.
• Анимация, шрифты (Google Fonts) и иконки.
• Как создать свои UI Kit и шаблоны (templates).
• Сравнение с Sketch и Adobe XD.
Потихоньку всё сложится в курс по дизайну в Figma.
---
👍 Поддержать канал: / zendesigner
![Уроки Figma Auto Layout. Полное руководство по автолейаут. [Фигма уроки]](http://i.ytimg.com/vi/R4Wq-YVWEvc/mqdefault.jpg)
![Уроки Figma Auto Layout. Полное руководство по автолейаут. [Фигма уроки]](/img/tr.png)
Огонь Виктор! 🔥 Спасибо
Долгожданное видео! 👏🏻👏🏻👏🏻
Виктор, ну ты конечно редкая жемчужина. Отлично объясняешь, очень четко, понятно и успокаивающе! Талант! Учитель!
Огонь 🔥
Виктор, рад что ты теперь в большой команде!
Корпорации, сметают всех.
У ozon сильная команда, пересекались в Британке 🇬🇧 ✌️
А я то как рад! )
Класс, идея с таблицами через отступы в АЛ это прям вообще огонь, спасибо большое!
А то уже были и дивайдеры-палки, и прямоугольники, и тени без размытия, и чего только не)
Благодарю, Виктор. Как всегда полезно и понятно!👍
Спасибо огромное, 3 дня не мог решить проблему с таблицами, у Вас единственное видео где все рассказано последовательно и понятно
Как обычно супер! Спасибо!
Крутой туториал! Спасибо!
Спасибо за полезные знания и поздравляю с новым местом! :)
Это просто магия!
Спасибо огромное.
Я немного завис с таблицами.
Но - осилю:)
БОмба!
Спасибо. Коротко и ясно
Виктор, выражаю Вам огромную благодарность за это полезнейшее видео!)
Добрый день, очень рада увидеть ваше видео. Информацию преподносите всегда по делу и четко.
Спасибо!
Виктор, спасибо! по AL в целом было понятно, а вот таблицы - очень круто!
Очень круто! Спасибо:)
Виктор, феерично)👍
Поздравления с назначением. Долгожданное видео. Спасибо.
поздравляю))молодец так держать)
любые трудности всегда на пользу идут)
Как всегда очень круто!
Виктор, как всегда огонь!!!😵💖💖
Как всегда по делу.
С возвращением и с новым местом работы! Видео как всегда - концентрат пользы. А где же пилюлька? )
Не хватило времени на пилюльку (
Всем привет! Простите за русский язык в виджете с хоткеями ) Поздно заметил.
Виктор, с возвращением!
Новый автолайаут испортил работу плагина Google Sheets Sync.
Раньше, если я задавал в ячейке пустое значение для текстового блока, то после синхронизации скрывался не только сам текстовый блок, но и компонент, в котором он находится. Теперь остается покалеченный компонент, не смотря на то, что его размер должен сжиматься под содержимое (а содержимого нет).
@@Vadissimus Не тестировал. Пиши разработчику плагина - авось починит.
@@zen-designer , Спасибо за видео!
Ещё вопрос возник. Как сделать резиновый компонент полей ввода, снизу которого пишется текст с иконкой. У меня получилось резинить само поле. Но при этом иконка начинает деформироваться...
@@vadimdmitriev1991 что-то совсем не правильно. Само поле - текст в автолейаут, подпись и иконка - второй автолейаут. Потом объединяем поле с автолейаутом с иконной и текстом в третий автолейаут. Если не понятно - найди меня в телеге
@@zen-designer , а по какому аккаунту искать? zendesigner?
Я просто 3 алика создал, но не тянутся
с новым годом наступившим!!
И тебя!
Виктор, ты классный! Спасибо за видео! И огромной удачи в новой команде с Сашей!
Спасибо!
Крууутяяяк
хорошо!
Заждались
Я и сам заждался )
я ждэл этого!!!!
Виктор мега круть 🔥✊✊✊
thx!:))
🙏🏻
🙌
я помню по такой же схеме таблички делались в Microsoft Frontpage ;))
осталось сайты начать делать в фигме через таблички ;)))
😬😂
Здравствуй, Виктор.
Было бы очень интересно увидеть, как ты устраиваешь свой рабочий процесс в фигме. Например, в работе с продуктом или на примере интернет магазина.
Теперь я работаю в продуктовой команде внутреннх проектов Ozon. И это накладывает определённые ограничения. Да и свободного времени не так много. Но какие-то лучшие практики буду вытаскивать на свет божий 😁
Спасибо за контент, прекрасно объясняете, видео супер. Только бы поменять эти манашеские баранчик на фоне, я от них уже третье видео подряд засыпать начинаю)))
Спасибо за урок!)) Подскажите пожалуйста почему у меня когда я хочу добавить иконки в карточку мастер компонента, у меня иконки не добавляются в группу этой карточки? Т.е. физически они на карточке а в слоях не добавляются, только если компонент разрушить только тогда?
Сложно так сказать. Стукнись в телеграмм мне t.me/vandesign
Здравствуйте. Скажите пожалуйста, можно ли в коммерческих проектах ( к примеру визитке / сертификате / гайде и тп) менять межбуквенное и межстрочное расстояние у шрифтов от гугла (OFL и Apache лицензия)????
Хм. Никогда не задавался этим вопросом. Попробуйте вот в этом чате спросить t.me/ne_znal_talk
@@zen-designer меня нет в телеграмме
@@user-cf2gn2ex9k так за чем дело стало? Там можно решить много вопросов.
Поставил лайк и подписался
Всё правильно сделал! )
Круто придумано с разделителями. Но все ровно это кастыли если в таблице 20 ячеек у каждой будет разная ширина в зависимости от контента и разные выравнивания по краю. К тому же нельзя сразу продумать таблицу, туда же может не только текст помещаться и иконки, могут добавлять какой-нибудь тек с бэкраундом своим. Проще просто сделать хедер компонентом , в него закинуть уже лейблы необходимы и уже через tidy up регулировать отсупы. По мне так это быстрее, а то потом если поддерживать дизайн систему будет тяжело с такими кастылями
Каждый выбирает удобный для себя способ
Можно сделать фреймами с 2 лайнами привязанными к верх и низу
я новичок и только разбираюсь в отступах и сетках, и заметила, как вы так ловко меняете отступы и размеры контейнеров, что они везде остаются кратными 8ми... это магия какая-то? у меня то и дело где-то что-то не состыковывается >
В меню есть настройки и там пункт Nuge Amount. Вот там можно поставить 4 или 8
А как сделать так, чтобы использовать Главный Компонента Строка, но при этом контент ячеек не копировался в инстансы? То есть, отвязать свойство копирования текста, но оставить копирование поведения?
Спасибо, Чикатило
Хм, пожалуйста
Я бы за такое бан влепил, потому что хамство.
@@slashdesigner не плачь братишка это юмор
@@goblin4089 Брейк! Не будем раздувать из мухи слона
@@zen-designer согл
Всё вроде хорошо, но как использовать такой компонент строки, если в интерфейсе тонна реестровых таблиц с разным количеством столбцов? Под каждую таблицу свой компонент как-то не комильфо получается. И как в этом варианте сделать объединённые строки или столбцы? Давно ищу нормальную компонентную работу с таблицами в Фигме и не нахожу.
Ячейка - библиотечный компонент. Строка и шапка - сценарный. По горизонтали можно объединить, по вертикали сложнее
@@zen-designer в общем, чуда всё ещё не дунуть. Не хватает Фигме (да и не только ей, но и Эксдишке тоже) нативной работы с таблицами. Плагин табличный - тоже не совсем то, что нужно. Будет неплохо, если вы покажете ваш вариант объединения ячеек в отдельном видео.
ох и костыли с таблицей...Но ничего к сожалению лучше на данный момент нет
а что делать, если надо изменять количество ячеек в строке?
добавить в компонент строки
Круто, жаль я это неделю назад изучил по иностранным видео от фигмы
Ничего не жаль! Ещё и язык прокачал )
почему то нет свойства fill container
Видимо нет внешнего контейнера, который можно заполнять.
Что такое "Алик"?
Auto layout