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

💡 Усі статті, обговорення, новини про дизайн — в одному місці. Приєднуйтесь до Design спільноти!

Усім привіт. Мене звати Олена Шевченко і я 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.