Як створювати таблиці даних у Figma

Підписуйтеся на Telegram-канал «DOU #tech», щоб не пропустити нові технічні статті.

Усім привіт. Мене звати Олена Шевченко і я Senior UI/UX Developer у компанії Svitla Systems. У своїй попередній статті я розповіла, як створювати дизайни за допомогою Auto Layout та Variants у Figma. Сьогодні я би хотіла поділитись досвідом зі створення складних таблиць даних у цій дизайн-системі.

Ідея створення табличного процесора вперше виникла в Гарвардському університеті в 1979. Інженер Даніель Бріклін (Daniel Bricklin) та його друг, програміст Роберт Френкстон (Robert Frankston), проводили фінансові розрахунки, використовуючи електронний редактор таблиць. З його допомогою можна було змінити значення будь-якої клітинки та автоматично перерахувати весь документ. Завдяки цій програмі роботу, на яку раніше витрачалося 20 годин, тепер можна було виконати за 15 хвилин.

Анатомія таблиць даних

Анатомія таблиць даних досить проста. Рядки та стовпці спрощують сканування файла і кожен з них можна поділити на клітинки даних. Рядки мають таку ж кількість клітинок, розташованих у порядку відповідних стовпців. Найпоширенішими прикладами таких таблиць є, звичайно, Microsoft Excel та Google Sheets.

Таблиці даних можна поділити на три основні та три додаткові частини:

Основні частини

  • Рядок заголовка містить заголовки стовпців;
  • Рядок даних поєднує впорядковані клітинки даних, що разом складають об’єкт даних;
  • Клітинка даних — найменший компонент таблиці, який показує фактичні дані.

Додаткові частини

  • Нижній колонтитул зазвичай використовується для узагальнення, підсумків та агрегування інформації у відповідному стовпці;
  • Пагінація — розбивка на сторінки;
  • Таблиці даних можуть містити інтерактивні компоненти, такі як кнопки, меню, іконки та неінтерактивні компоненти, такі як значки або теги; інші інструменти, що допомагають керувати даними, включають фільтри, сортування тощо.

Створення таблиць даних у Figma на базі CSS

Якщо ви розробник, ви інтегруєте дизайн таблиць даних з HTML та CSS. Якщо ви дизайнер, який працює у Figma, ви робите те ж саме, використовуючи значення CSS. Давайте розглянемо основні значення та поговоримо про структуру, яка допомагає користувачеві сканувати інформацію в таблиці.

Значення cellpadding

Cellpadding визначає відстань між межею та вмістом клітинки; я використовую 8-піксельну сітку, тому встановлюю padding-left на 16px, а всі інші — на 8px.

Вирівнювання

Якщо ви використовуєте інтерфейс для мовних сценаріїв справа наліво (right-to-left = RTL), вам доведеться віддзеркалити ваш макет і застосувати RTL напрямок, а також вирівнювання тексту зліва направо (LTR). Заголовки потрібно вирівняти в тому ж самому напрямку, що і вміст у відповідному стовпці. Якщо потрібно додавати числа, вони повинні мати числовий формат та бути вирівняні праворуч. Іконки та значки треба розташувати по центру.

Межі та роздільники

Border (межа) — ще одна властивість, що означає горизонтальний роздільник (divider). Він відокремлює кожен рядок в таблиці даних. Хоча межі можуть бути дуже корисними для розподілу даних, вони необов’язкові.

Пробіл часто використовують замість меж, щоб уникнути перевантаження в дизайні. Все це залежить від кількості даних у таблиці.

Стани

Hover, focused та active (наведення, фокусу та активний) стани змінюють фон та/або колір іконки, коли наводять курсор та/або клацають та/або вибирають елемент/клітинку/рядок/стовпець. Їх можна легко встановити, додавши пару станів до Variants у Figma, щоб виділити частини таблиці даних.

Методи роботи з адаптивними таблицями

Таблиця адаптується, якщо стовпці стискаються горизонтально. Такий прийом зазвичай використовується, якщо в клітинах мало вмісту. Якщо вміст і дотримання точної ширини стовпців є критичними, потрібно буде використовувати горизонтальну прокрутку. Для невеликих екранів кількість рядків та стовпців слід зменшити та згорнути.

Я буду використовувати браузерну версію таблиці Google Contacts («comfortable view») і продублюю її у Figma. Стовпці будуть стиснутими та адаптивними. Крім того, я додам стан за замовчуванням та стан наведення, а також можливість додавати більше стовпців і змінювати розміри екрану коли завгодно.

Для того щоб змінити вміст, буду створювати стільки варіантів, скільки потрібно.

Налаштування клітин таблиці даних

У прикладі нище таблиця має шість стовпців. Кількість рядків може бути будь-якою. Стан наведення відображається з більшою кількістю іконок і замінює аватарку на чекбокс та іконку перетягування.

Потрібно створити:

  • Один компонент із заголовком для клітинки рядка з достатньою кількістю тексту, який буде пов’язаний із вмістом стовпця;
  • Один компонент із заголовком для клітинки рядка з іконкою (6-й стовпець);
  • Одну клітинку таблиці з аватаром та ім’ям;
  • Одну клітинку таблиці з достатньою кількістю текста, яка відповідає заголовку стовпця;
  • Одну клітинку таблиці з лейблом;
  • Один стан за замовчуванням для рядка;
  • Один стан наведення курсора для рядка.

Для того щоб змінити та оновити елементи в компонентах, створю невелику бібліотеку в локальному файлі.

Для аватарів зроблю варіанти з різними фото. Для лейблів будуть варіанти друг, колега та сім’я.

Вміст, що має різні електронні адреси, номери телефонів тощо, може також бути доданий як варіанти. Це допоможе заощадити багато часу.

Спочатку створіть клітинку для заголовка та помістіть у фрейм довкола нього. Потім застосуйте до нього Auto layout з фіксованими значеннями: ширина до 420px та висота до 48px. Заголовок слід відцентрувати, а лівий відступ встановити на 16px.

Якщо ви хочете відокремити рядок заголовка, ви можете скористатися Effects. Я застосувала внутрішню тінь з наступними значеннями: 0px по координаті X та −1px по Y без розмиття, 5% чорного кольору. Скориставшись таким прийомом, ви створите дійсно хороший роздільник.

Тепер давайте продублюємо існуючий компонент, від’єднаємо його та створимо новий з іконкою «dots-vertical». Його слід вирівняти праворуч та встановити заповнення на 8px.

Рухаймось далі і додамо ще 2 компоненти!

Тепер я створю клітинку з аватаром, лейблом та вмістом клітинки, яку створила як варіант раніше. Найшвидший спосіб — скопіювати основний компонент, від’єднати його та оновити за допомогою фактичних даних і зробити новий компонент з шириною 420px та висотою 56px.

Останній компонент буде точною копією першого, але з іншим кольором шрифту; в цьому прикладі він буде темнішим.

У стані наведення іконки замінять текст. Для цього рекомендую використовувати плагін Iconify. Він має найбільшу кількість іконок Material design на будь-який смак.

Залишилось тільки згрупувати клітинки в рядки. Я візьму клітинки і побудую новий компонент, а потім назву його Header.

Не забудьте перевірити параметри для зміни розміру клітинок. Для клітинок встановіть значення Fill container, щоб рядок став повністю адаптивним.

У наведеному прикладі ви скоріш за все помітили, що перший стовпець має найбільшу ширину, а останній найменшу. Для досягнення цього ефекту я встановила фіксовану ширину 1-го стовпця розміром 624px. Я використала Hug contents для останнього стовпця, щоб обгорнути контейнер для іконок та додала стан за замовчуванням та стан наведення.

Оновлення та зміна елементів в компонентах таблиць даних

Для зміни вмісту я використовуватиму локальну бібліотеку компонентів, яку створила раніше. Спочатку я буду вибирати між Header та Content. Потім оновлю аватар, електронну адресу, номер телефону, посаду та лейбл, пов’язаний із конкретною особою.

Для досягнення адаптивного ефекту встановлю значення Fill container для всіх компонентів рядка. Ширину основного компонента таблиці даних зроблю фіксованою.

Ви повинні отримати щось подібне до цього.

А що, якщо я хочу, щоб стовпці в таблиці даних були гнучкими? Наприклад, я хочу використати 6 стовпців і в окремих випадках зменшувати цю кількість до 4 або 3.

Для цього потрібно створити ще 3 варіанти, використовуючи компонент таблиці даних як основу.

Ось як це працює.

Висновок

На сьогоднішній день таблиці даних залишаються одним з найкращих варіантів відображення великого обсягу даних. Проте вони можуть перетворюватися на те, що дуже важко зрозуміти. Покращити читабельність та сприйняття можна за допомогою сіток та горизонтальних ліній, контрастів між шрифтом та фоном, відступів та вирівнювання стовпців.

У попередній статті ми також розглядали, як створювати дизайни за допомогою Auto Layout та Variants у Figma.

👍НравитсяПонравилось7
В избранноеВ избранном6
LinkedIn
Допустимые теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter
Допустимые теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter

Гарна стаття, дякую. Також погоджусь з критичними висловлюваннями на адресу практичного застосування, власне, сервісу Figma. Ті ж «одноразові лендінги» треба якось проєктувати та реалізовувати. Хто працює з WordPress, білдер Elementor дозволяє реалізовувати подібні задачі. І надалі розвивати проєктні задачі в плані додавання елементів чи їх редагуванні. Як-то кажуть: «Write Less Code, Generate More».

Не зрозуміло, навіщо створювати варіанти з різними даними, варіанти — для різної структури і стилів, а дані ж легко вставляти в один і той же варіант плагіном (наприклад нагенерувати аватари телефони за допомогою content reel). Також заголовок некорений — тут звичайні таблиці, а Figma — то не дизайн система 😊
А так — стаття корисна для початківців, дякую що поширюєте знання українською.

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

Дякую за детальну відповідь, подумала, що ще у компоненті можна буде хайдити/відкривати стовпчики, без окремих варіантів таблиці; з автолейаутом і вирівнюванням вліво, видимі стовпці будуть автоматично ресайзитись і заповнювати компонент на всю ширину

Не туди відповіла, нижче 🙈⬇️

Чудова і детальна стаття, дякую. Чи пробували ви замість варіантів таблиць використовувати варіанти колонок по типу данних, з автолейаутом, це б прискорило вмикання і вимикання потрібних/непотрібних колонок, чи виникли (б?) якісь труднощі в реалізації такого варіанту?

Дякую. В статті я поділилася варіантом будови таблиці на основі рядків, але відповідаючи на ваше питання, принцип буде таким самим як с додаванням рядків, тому що в основі табліці є одна клітина. Ця клітина і є, по суті, рядком та стовпчіком. Для того, щоб додавати та видаляти зайві стобчікі, необхідно підготувати і скомбінувати всі варіанти для таких опцій. Тобто один варіант клітини і скільки необхідно варіантів для різного типу даних всередині цієї клітини. Потім, згрупувати кожен тип даних і створити стовбчік, що складається з однієї клітини по осі -Х та скільки необхідно по осі -У. Після чого, необхідно сгруппувати два стовпчікі, потім три і тд, в окремі варіанти. Головне це послідовно вибудовувати варіанти.)

На всяк випадок плагін для пошуку будьчого у фірмі www.figma.com/...​7372119505/Search-&-Focus

Якщо у вас вже є такі навички — то тікати від цього Фігваму якнайдалі. Бійся данайців, дари приносячих.

Вона няшечка для одноразових лендингів. Але якщо вам потрібно щось, що можна назвати своїм — то не про фігму. Вважайте її хостелом або дитячим садочком.

Те, що воно базується в вебі перекриває більшість недоліків. Дизайнери поголовно туди пішли через можливість спільного редагування і єдиного джерела правди (без купи фалів і костильної синхронізації).
По решті питань Фігма справді гамно.
Для тих, кому це потім верстати — не соромтеся пушати ваших дизайнерів експортувати з Фігми в Зеплін. По зручності для девелоперів Зеплін на порядок кращий за Фігму в read-only.

🤡

Мене завжди цікавила мотивація людей, які висловлюють свою авторитетну (ні) експертну думку на теми, в яких в них максимум поверхневі, а скоріше всього нульові знання. А крім того — критикують, не пропонуючи альтернативних рішень проблеми (яку часто самі і вигадали лол). Самоствердження?

@Elena Shevchenko написала непоганий гайд з використання компонентів, досить корисний для джунів і не тільки. Єдине, до чого б я придрався — це відсутність демо-файла з прикладом у відкритому доступі.

А щодо фігми для одноразових лендінгів мені навіть лінь коментувати цей брєд і наводити приклади її безальтернативного застосування, типу для проектування інтерфейсів з сотнями екранів дизайн-командами з десятків людей, з автосинхронізацією, динамічними даними, версійністю та використанням її макетів як частини вихідного коду (там повноцінне апі і купа рішень на його основі).

Короче потрійний фейспалм і іспанський сором, вибачте.

Я б волів обговорювати смак устриць із тими, хто їх їв.

Це типу натяк на те, що я не користувався фігмою чи що? Чувак, іноді краще промовчати.
🤡

Що не користуєся НЕ фігмою

Чувак, походу твоя зачіска не працює як бустер екстрасенсорних здібностей для визначення тулкіта онлайн-співрозмовника. Не цього разу принаймні.
🤡

Подписаться на комментарии