Создание таблиц в дизайн системе Figma и реализация в Storybook

В предыдущей статье на тему дизайна таблиц в Фигме мы выяснили, что базовый элемент создания любого data grid - это компонент ячейки, внутри которого спрятано все необходимое для того, чтобы оставаться в одном экземпляре и строить таблицы ячейка-за-ячейкой. Теперь поговорим о её структуре: какие элементы вложены, случаи использования, рассмотрим темификацию таблиц через токены-цвета. И напоследок расскажу о передаче спецификаций разработчикам и интеграцию таблиц в React/Angular фреймворки прямиком из Figma дизайн-системы. Пока руками, ибо будущее всё еще где-то рядом.

Поехали! Начну с демонстрации бесполезных, но прикольных эффектов кастомизации всей таблицы через главную мастер-ячейку:

Построение таблиц с помощью именно компонентов - алгоритм, который врядли требует каждый проект, если это не серьезная дизайн-система, которую используют и дизайнеры и разработчики внутри организации. Но раз уж Фигма дает компоненты, значит их нужно использовать по-максимуму. Состав ячейки формируется из вложенных слоев, часть которых спрятана. Чтобы создать универсальную ячейку на все случаи жизни, нужно знать о data grids всё и намного больше. Состав определяется исходя из того, насколько разнообразные мы хотим получать экземпляры ячеек.

Структура ячейки-компонента:

Давайте рассмотрим более детально каждый из пунктов.

Чтобы получить ячейку в состоянии сортировки, рекомендуется активировать слой Icon-L. Таким образом отсоединять экземпляр не требуется, достаточно переключать содержимое самой иконки, чтобы показать порядок сортировки по убыванию, или возрастанию. Считается, что в вашей дизайн-системе уже интегрирована любая библиотека пиктограмм и тогда направление стрелки быстро переключается через меню Instance. Сместить текст из-под иконки можно простым приемом, нажав несколько раз по пробелу и это не криминал:

Активация Icon-R пригодится в том случае, когда в ячейке необходимо показать возможность дополнительного действия. Например, многоточие для меню, или иконка карандаша, если ячейку можно редактировать:

Вкладывание независимых разделителей по четырем сторонам ячейки, увы, от безысходности вынужденный лайфхак. Мы все прекрасно понимаем, что дизайн-компонент по своим возможностям должен стремиться к компоненту в коде, а значит независимость бордеров должна задаваться на уровне свойств, а не костылями. К сожалению в Фигме это до сих пор нереализовано, а Axure, например, давно умеет. Бордеры особенно необходимы, чтобы управлять разделением контента вообще во всей таблице. Цвет, толщина, да хоть пунктиром. Таблицы творите как захотите:

С этим элементом всё просто: текстовый элемент растянут практически по всей области ячейки, но с небольшими внутренними отступами, чтобы выравнивание чисел по правому краю смотрелось попорционально. Проставив констрейны Left & Right / Top & Bottom мы получаем неограниченное масштабирование по высоте и ширине с возможностью направлять текст как угодно без потери визуального качества.

Для каждой ячейки я предпочитаю дополнительно иметь фоновый слой, с помощью которого можно скруглять углы. К сожалениию в экземпляре до сих пор нельзя указывать скругление углам независимо в Фигме. Как и выше в случае с бордерами. Можно менять состояние ячейки или целого ряда, например, окрасив в синий. Получается стиль Selected:

Эта статья не была бы полноценной без примеров реальных таблиц, которые были собраны по изложенным выше спецификациям (сейчас модно говорить дизайн-токен). Сейчас мы готовим all-in-one фреймворк в Figma / React / Angular для быстрого старта веб-приложений любой сложности. В этой системе будет собрано множество компонентов для решения любых задач прототипирования и разработки; и таблицы - это одна из необходимых секций, к которой мы отнеслись с повышенным вниманием. Итк, data grid таблицы доступны в четырех вариациях:

Доступно 4 стиля:

Как видно из GIFки выше уделено внимание и состояниям: onHover, onClick, а также сортировка. Такая детализация стала возможным благодаря использованию дизайн-токенов из Figma, которые были переданы разработчикам в понятном виде. Оставалось только перехватить нужные оттенки из системы цветов в Setproduct Design System и прикрутить в готовый React фреймворк, чтобы получить такие data-grid, которые бы нас устраивали полностью. Таким образом, будущим пользователям нашей системы станет доступно много вариантов, которые основаны на одном и том же компоненте таблицы, но стилизованы разнообразно посредством SCSS.

Честно говоря, описание нашего подхода к системе цветов требует отдельной статьи. Но не раньше, чем появится возможность захватить и хранение токенов и для темной темы в одной дизайн-системе. В этом fig файле в качестве демонстрации видно, что вся палитра цветов помимо объявления в глобальных стилях еще и сконвертирована в компоненты. Таким образом разработчики получают привязку цветовой системы к таблицам за минимум кликов в Фигме:

Storybook позволяет вам быстро организовать предпросмотр всех стилей таблицы в в любом цвете. Очень годный сервис, помим функционала помогает отлавливать баги в стилях. Похожую концепцию “четырех стилей” мы проецируем вообще на все компоненты в нашей системе. Как-нибудь расскажу и об этом…

Вот и всё, что хотелось сказать об дизайне таблиц через компонент. Спасибо, что прочитали. В ближайшее время я планирую серию постов по упомянотому продукту - Setproduct Design System. Подписывайтесь на мой канал , если вам интересна тема универсальных инструментов для дизайна и веб-разработки. Там будут все анонсы!

В данной статье использованы материалы и идеи из моих дизайн-продуктов для Фигмы. Если вы ищите быстрый старт для Ваших проектов - это то, что Вам нужно.

Я везде — Dribbble, Behance, YouTube, Uplabs, Twitter, Reddit, Telegram, Instagram.