Как сделать адаптивную таблицу в Фигма. Дизайн система таблицы в Figma Community

Ссылка на дизайн систему таблицы в Фигма www.figma.com/...
👉 Смотрите видео до конца, подписывайтесь на канал, ставьте 👍 и колокольчик 🔔
►Мой гайд в 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/...
★ Telegram чат: t.me/joinchat/...
Мои работы:
★ Dribbble: cutt.ly/1WcEx6E
★ Behance: cutt.ly/UWcEW0I
#figma #webdesign #uxui

[@ValeriyaDesire]

Вам приходилось собирать таблицу и делать ее адаптивной? Пишите в комментариях про свой опыт.

[@eugenesamusenko4525]

Редчайший случай, когда не только полезно, но еще и красиво! Спасибо вам!

[@Luiza-yk2um]

Спасибо большое! Очень долго искала видео на русском 🥺❤❤

[@aleksunknow113]

Вот такой контент реально крутой, нужно больше продвинутых приёмов, что бы медленно, но верно идти к middle designer!

[@Man-t7b]

Приятный голос , информативно без воды)

[@АннаФрей-ы7с]

пушка-бомба, лучший контент в тематике

[@anamal1420]

Класс! Пару месяцев назад как раз искала контент по таблицам. Сделала неадаптивными. Пошла исправлять

[@МаржанЖумадилова-в7ф]

Вы просто супер, спасибо Вам! Те кто смотрит, повторите хотя бы один раз и закрепите 👍

[@ValeriyaDesire]

Спасибо 😉

[@rrrrChocor]

Осталось это повторить и закрепить! Круууть! Спасибо 😎☝️

[@helga3542]

Спасибо за полезные видео! У меня как раз были проблемы с таблицами, а теперь уже не будет)

[@YanaDergunova]

Супер! Огромное спасибо!

[@Markeldo]

Классное видео, красивая таблица в итоге получилась. Говорят, если выделить родительские компоненты и нажать Enter, то выделяются все дочерние. Это к слову о выделении и замене иконок внутри ячейки.

[@alinaalekseeva6286]

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

[@ValeriyaDesire]

Очень рада, что помогла 👌

[@СветланаПилипенко-ч4р]

Спасибо огромное, отличное видео 😊

[@yuliyadesigner]

Спасибо огромнейшее за полезную информацию! 🌷

[@UmarAbdulvohid]

Спасибо за полезное видео! :)

[@karine2574]

Спасибо большое) Очень круто и полезно!

[@wavesfeel905]

Отличная работа 👍🏻

[@Annaska.p]

Спасибо большое! А подскажите пожалуйста, как можно добавить еще ниже колонки, если мне нужен длиннее список? Вставляется все в новую колонку про попытке добавить ячейки вниз

[@uwu.304]

Большое спасибо❤️🥺

[@sarrafee]

Просто вау

[@MargoLadygina-o1t]

Сделала таблицу по примеру в ролике, но возникла проблема, подскажите пожалуйста как решить - не получается добавлять строки. При попытки скопировать ячейку вниз, она копируется рядом в отдельный большой столбик. Т.е. для этой таблицы нужно обязательно знать количество строк и невозможно их потом изменить?

[@allanpuninski8738]

Спасибо! Очень полезно.

[@Katrusya18]

Спасибо большое❤

[@elenastavetskaia9817]

Спасибо! Супер полезно!

[@НатальяБелоусова-р7ю]

А как сделать активную строку другим цветом внутри этой таблицы? Например при выборе строки (с активным чекбоксом) чтоб цвет ее отличался?

[@darz56]

Очень полезное и как раз актуально) Есть ли видео (если нет, то можете записать) как устанавливать плагины?)

[@elenastavetskaia9817]

Нажимаете кнопку Home в Figma (левый верхний угол), дальше Community (значок глобуса), выбираете Plugins, находите нужный плагин и нажимаете кнопку Install. Далее уже у себя в проекте через меню открываете установленный плагин!

[@kvasayv5336]

Подскажите как сделать в фигме таблицу, чтобы в html был код для table, а то у меня получается все дивами. Код смотрю через плагин AutoHTML. Может плагин криво работает. Подскажите как вы код смотрите?

[@Артём-т1я8с]

Да, только вот высоту строк не поменять

[@kseniya7811]

Спасибо вам, очень полезно!

[@popolavas]

а где адаптивы? вы сделали одно разрешение для декстопа, а где адаптив для планшета и мобилки?

[@Svetlana_Shaimanova]

Расскажите как ваши успехи на новой работе. Когда вы успеваете всё совмещать?

[@ValeriyaDesire]

Обязательно сниму об этом видео)

[@helenbukina4511]

Валерия, подскажите пожалуйста! Есть ли способ сделать состояние ховер строки для такой таблицы? Спасибо)

[@ValeriyaDesire]

Если стоит такая задача, то конечно. Это ведь не уверсальная таблица для всех задач, а просто одно из решений

[@elizabethyershova2745]

Еще появился вопрос... В какой момент ячейки нарисованной таблицы из компонента превратились в cell? В видео это на 18 минуте происходит. Которым мы потом можем автоматически менять style и state? Мне приходится прощелкивать по одной(((

[@ValeriyaDesire]

Не очень поняла вопрос, но можно выделить одну ячейку и нажать Command +A, тогда выделятся все. И уже когда все выделены поменять состояние, на то которое нужно.

[@elizabethyershova2745]

Добрый день! А зачем нужен режим focused? Когда при наведении мышью подсвечивается чекбокс? Так это вроде hover, как раз) Я немного запуталась. Валерия, помогите, пожалуйста, разобраться с этим вопросом) Прошу прощения, если где-то было объяснение

[@ValeriyaDesire]

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

[@elizabethyershova2745]

@@ValeriyaDesire Поняла, спасибо! И за видео спасибо! Вы мой проводник в фигму! Когда не просто слова, а еще и действия описаны) Я повторяю за вами пошагово и запоминаю, приятно, когда получается)) Теперь передо мной "новая задача", связывать свои варианты и ваши, например; в единую систему. Насколько сейчас понимаю, фигма делает это автоматически, но все равно хочется все ее алгоритмы понять)

[@ЮлияКнязева-г8з]

Как ты выделяешь быстро элементы в столбце таблицы внутри компонента? Какие клавиши?

[@karine2574]

Если зажать сommand, то проваливаешься через все слои до нужного объекта. Чтобы выделить несколько объектов - Shift + сommand)

[@ValeriyaDesire]

А чтобы выделить все объекты во фрейме сначала выбери один элемент, а потом зажми клавиши Command + A

[@darinachu]

Подскажите, как новичку в дизайне, зачем может быть нужна такая интерактивная таблица? Для чего так заморачиваться?😌

[@ValeriyaDesire]

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

[@darz56]

Как адаптировать подобную таблицу для мобильной версии сайта?

[@ValeriyaDesire]

Отличный вопрос, вот в следующем видео это и расскажу 👍

[@ВоваСеменченко-к9б]

Зачем оборачивать изображение в авто-лейаут? То что картинка будет в обычном фрейме никак не повлияет на неё. Авто-лейаут создали же не для того, чтобы его везде добавлять. Можно снять ещё видео где для этой же таблицы сделать адаптацию под другие устройства.

[@ValeriyaDesire]

Это привычка, можно использовать и обычный фрейм. Нет ни какой ошибки в том, что я использую автолейаут. Я уже опубликовала видео где сделала адаптив этой таблицы под мобилку. Так же исходники есть в Figma Community

[@ArmenianArthurBoy]

Привет) Очень круто! Лера, могу тебе в инста написать? Мне нужен совет)

[@ValeriyaDesire]

Привет, да можешь мне написать)