Как сделать адаптивную таблицу в Фигма. Дизайн система таблицы в Figma Community
HTML-код
- Опубликовано: 22 дек 2021
- Ссылка на дизайн систему таблицы в Фигма www.figma.com/community/file/...
👉 Смотрите видео до конца, подписывайтесь на канал, ставьте 👍 и колокольчик 🔔
►Мой гайд в Figma Community: cutt.ly/HWcW3Tm
►Instagram - cutt.ly/jWcQ3Mk
Добавляйтесь в друзья:
★ Facebook - cutt.ly/nWcWecJ
★ Вконтакте - cutt.ly/5WcWu2W
★ Linkedin - cutt.ly/DWcWb5q
Вступайте в сообщества:
★ Полезные публикации о дизайне Вконтакте - cutt.ly/0WcEtXP
★ Telegram канал t.me/joinchat/lr9Dp7eBeY8yOTJi
★ Telegram чат: t.me/joinchat/IbgUWOEfu0Q1OTY6
Мои работы:
★ Dribbble: cutt.ly/1WcEx6E
★ Behance: cutt.ly/UWcEW0I
#figma #webdesign #uxui
Вам приходилось собирать таблицу и делать ее адаптивной? Пишите в комментариях про свой опыт.
Редчайший случай, когда не только полезно, но еще и красиво! Спасибо вам!
Вот такой контент реально крутой, нужно больше продвинутых приёмов, что бы медленно, но верно идти к middle designer!
Приятный голос , информативно без воды)
Класс! Пару месяцев назад как раз искала контент по таблицам. Сделала неадаптивными. Пошла исправлять
Осталось это повторить и закрепить! Круууть! Спасибо 😎☝️
Спасибо огромнейшее за полезную информацию! 🌷
Спасибо большое) Очень круто и полезно!
Отличная работа 👍🏻
Спасибо! Очень полезно.
Спасибо вам, очень полезно!
Супер! Огромное спасибо!
Спасибо огромное, отличное видео 😊
Спасибо за полезное видео! :)
Классное видео, красивая таблица в итоге получилась. Говорят, если выделить родительские компоненты и нажать Enter, то выделяются все дочерние. Это к слову о выделении и замене иконок внутри ячейки.
Большое спасибо❤️🥺
Вы просто супер, спасибо Вам! Те кто смотрит, повторите хотя бы один раз и закрепите 👍
Спасибо 😉
Спасибо за полезные видео! У меня как раз были проблемы с таблицами, а теперь уже не будет)
Очень полезны контент!!! Супер большое спасибо!)
Очень рада, что помогла 👌
Спасибо, ты солнце
Спасибо большое❤
Просто вау
Очень полезное и как раз актуально) Есть ли видео (если нет, то можете записать) как устанавливать плагины?)
Нажимаете кнопку Home в Figma (левый верхний угол), дальше Community (значок глобуса), выбираете Plugins, находите нужный плагин и нажимаете кнопку Install. Далее уже у себя в проекте через меню открываете установленный плагин!
Спасибо большое! А подскажите пожалуйста, как можно добавить еще ниже колонки, если мне нужен длиннее список? Вставляется все в новую колонку про попытке добавить ячейки вниз
А как сделать активную строку другим цветом внутри этой таблицы? Например при выборе строки (с активным чекбоксом) чтоб цвет ее отличался?
Сделала таблицу по примеру в ролике, но возникла проблема, подскажите пожалуйста как решить - не получается добавлять строки. При попытки скопировать ячейку вниз, она копируется рядом в отдельный большой столбик. Т.е. для этой таблицы нужно обязательно знать количество строк и невозможно их потом изменить?
Да, только вот высоту строк не поменять
Расскажите как ваши успехи на новой работе. Когда вы успеваете всё совмещать?
Обязательно сниму об этом видео)
Валерия, подскажите пожалуйста! Есть ли способ сделать состояние ховер строки для такой таблицы? Спасибо)
Если стоит такая задача, то конечно. Это ведь не уверсальная таблица для всех задач, а просто одно из решений
Подскажите как сделать в фигме таблицу, чтобы в html был код для table, а то у меня получается все дивами. Код смотрю через плагин AutoHTML. Может плагин криво работает. Подскажите как вы код смотрите?
Еще появился вопрос... В какой момент ячейки нарисованной таблицы из компонента превратились в cell? В видео это на 18 минуте происходит. Которым мы потом можем автоматически менять style и state? Мне приходится прощелкивать по одной(((
Не очень поняла вопрос, но можно выделить одну ячейку и нажать Command +A, тогда выделятся все. И уже когда все выделены поменять состояние, на то которое нужно.
Добрый день! А зачем нужен режим focused? Когда при наведении мышью подсвечивается чекбокс? Так это вроде hover, как раз) Я немного запуталась. Валерия, помогите, пожалуйста, разобраться с этим вопросом) Прошу прощения, если где-то было объяснение
Добрый! Да, было только в другом видео) Слабовидящие люди для перемещения по сайту используют клавиатуру и когда они с помощью стрелок или таба перемещаются например по меню, элемент на котором они находятся имеет состояние Focused. Поэтому обычно это состояние имеет яркую обводку. Попробуйте перемещаться на каком нибудь сайте с помощью клавиатуры и увидите это состояние.
@@ValeriyaDesire Поняла, спасибо! И за видео спасибо! Вы мой проводник в фигму! Когда не просто слова, а еще и действия описаны) Я повторяю за вами пошагово и запоминаю, приятно, когда получается)) Теперь передо мной "новая задача", связывать свои варианты и ваши, например; в единую систему. Насколько сейчас понимаю, фигма делает это автоматически, но все равно хочется все ее алгоритмы понять)
Как ты выделяешь быстро элементы в столбце таблицы внутри компонента? Какие клавиши?
Если зажать сommand, то проваливаешься через все слои до нужного объекта.
Чтобы выделить несколько объектов - Shift + сommand)
А чтобы выделить все объекты во фрейме сначала выбери один элемент, а потом зажми клавиши Command + A
Как адаптировать подобную таблицу для мобильной версии сайта?
Отличный вопрос, вот в следующем видео это и расскажу 👍
Подскажите, как новичку в дизайне, зачем может быть нужна такая интерактивная таблица? Для чего так заморачиваться?😌
В проекте может быть несколько разных таблиц, и очень удобно, если таблицы можно быстро собрать из компонентов.
Зачем оборачивать изображение в авто-лейаут? То что картинка будет в обычном фрейме никак не повлияет на неё. Авто-лейаут создали же не для того, чтобы его везде добавлять. Можно снять ещё видео где для этой же таблицы сделать адаптацию под другие устройства.
Это привычка, можно использовать и обычный фрейм. Нет ни какой ошибки в том, что я использую автолейаут.
Я уже опубликовала видео где сделала адаптив этой таблицы под мобилку. Так же исходники есть в Figma Community
Привет) Очень круто! Лера, могу тебе в инста написать? Мне нужен совет)
Привет, да можешь мне написать)
Спасибо! Супер полезно!