Как создать таблицу в фигме

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

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

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

Выделение нужных слоев в мастер-компоненте ячейки и распространение всех изменений на таблицу
Состав ячейки-компонента

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

Структура слоев находится слева в развороте

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

• Icon-L/R — две скрытые иконки, расставленые по краям ячейки слева и справа соответственно. По умолчанию их можно сделать видимыми, чтобы показать состояние сортировки. Icon-R можно активировать и заменить пиктограмму, например, для усиления действия, или отображения дополнительного функцонала
• Borders — четыре независимые линии прижатые внутри ко всем сторонам ячейки
• Caption — непосредственно текстовый элемент с содержимым
• BG — фоновый компонент, чтобы в будущем получать новые состояния

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

Иконки (Icon-L/R)

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

Создавать ли новый компонент из-за невозможности сдвинуть лейбл, при отключенной иконке, или делать отступ пробелом — решайте сами

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

Вы же помните, что экземпляры в Фигме можно заменять зажав Ctrl/Cmd в момент дропа?
Разделители (Borders)

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

Бордеры организованы в порядке слева-направо по часовой стрелке. Изменяя цвет для них в мастере, мы можем быстро изменять разделители во всех таблицах

Текст ячейки (Caption)

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

Внутренние отступы от текстового поля до границ ячейки — 8dp. Для таблиц повышенной плотности можно использовать 4dp.

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

Если текущая задача требует частого переключения состояний рядов, то рекомендуется выносить в отдельный компонент ячейку с новым стилем

Таблицы в дизайн-системе. Токены
Стилизация и реализация

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

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

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

• Flat — простая data-first материальная таблица, но с небольшой кастомизацией
• Raised — таблица превращается в карточку
• Smooth — приобретает мягкое насыщение цветом
• Filled — окрашена полностью (специфический кейс, например для акцента)

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

Спецификации и цвета
Серый, 4 primary цвета и 4 alternative цвета. Есть и градиенты.

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

Экземпляры со спецификациями специально в shaped-стиле, чтобы глаз быстрее их отличал от компонентов, для которых следует описание

Таблицы в Figma: как создать их быстро и эффективно

Figma часто используют дизайнеры и маркетологи при разработке сайтов. Программа подходит для работы с элементами графики интерфейса, конструирования прототипов будущего проекта, создания иллюстраций и баннеров. Таблицы — удобный и функциональный инструмент визуализации, который прекрасно вписывается в дизайн. Сделать красивую таблицу можно быстро с помощью Figma. В статье расскажем, как создать таблицу с текстом в Фигме — вы можете выбрать стандартный способ или же использовать для этого плагин, который в разы упрощает процесс проектирования.

Инструмент Autolayout в Figma

Autolayout в Фигме помогает делать динамические фреймы и работать над их дизайном — они реагируют и изменяют размер в соответствии с их содержимым. Веб-дизайнеры используют функцию для создания отзывчивых кнопок, которые подстраиваются под размер своих текстовых меток. С помощью инструмента можно индивидуально настроить внутренние отступы для левого, правого, верхнего и нижнего края. Он полезен и для списков, ведь инструмент позволяет добавлять и удалять из них элементы. Для применения нужно выбрать фрейм и нажать Shift+A. Свойства доступны в панели Design. Поменять направление, расстояние, отступы, дизайн и распределение элементов просто в разделе Auto Layout в правой части.

Чтобы понять, как работает функция, рассмотрим пример создания адаптивной кнопки:

1. Напишите текст с помощью инструмента «Текст».
2. На панели слоёв нажмите на текст правой кнопкой мыши и выберите Frame Selection.
3. Выделите получившийся фрейм, в параметрах настроек добавьте ему фон в блоке Fill и щёлкните на + рядом с Auto Layout.
4. Можно выставить одинаковые или разные отступы.
5. Кнопка адаптируется под длину текста, используя параметр Resizing — изменение размера. Если в Resizing указать свойство Fixed, то модуль кнопки будет иметь фиксированный размер.

Создание адаптивной таблицы в Figma

1. Создайте первую ячейку c помощью инструмента «Text», который находится в верхней панели. Добавьте любой текст. При необходимости измените размер шрифта, стиль и высоту строки.

2. Нажмите на правую кнопку мыши и выберите пункт Add Auto Layout. Цвет ячейки и её размер можно регулировать справа. Чтобы изменить ширину и высоту, измените параметры в правой части Auto Layout. Необходимо расположить текст посередине — рядом с настройками отступов есть квадрат, нужно нажать посередине, чтобы текст никуда не уезжал в дальнейшем.

В настройке Auto Layout корректируем отступы по бокам. Поставим, например, значение 40 рх.

3. Теперь нужно скопировать ячейку, нажав комбинацию Ctrl+D. Сделайте столько копий, сколько необходимо. Например, пять. Слева каждая из них отразится по отдельности.

4. Выделите ячейки правой кнопкой мыши и в настройках опять щёлкните на пункт Add Auto Layout.

5. Теперь нужно убрать расстояние между элементами. Для этого значение в пункте Spacing between items в правой части должно быть равно нулю.

6. После объединения мы не можем редактировать каждую новую ячейку по отдельности. Чтобы это изменить, нужно нажать на каждую из них в параметрах слева, а затем поменять параметр, который находится справа — Fixed на Fill container. Это нужно сделать в каждой ячейке.

7. Затем выделите строку из ячеек и нажмите клавиши Ctrl+D. Сделайте необходимое количество копий.

8. Проделайте похожий путь — выделите их все и щёлкните Add Auto Layout. Затем найдите две стрелки под надписью Auto Layout. Сейчас у вас выбрана стрелка вправо, нужно поменять её на стрелку вниз. Это поможет сделать таблицу вертикальной. Убрать пространство между ячейками также просто, достаточно поставить 0 в Spacing between items.

9. Щёлкните на каждую новую ячейку в правой части, в параметрах слева поменяйте Fixed на Fill container.

10. Теперь можно растягивать и уменьшать таблицу, редактировать каждую из больших или маленьких частей и выделять их для добавления контента, если нужно внести одинаковый текст.

Плагины для создания таблиц в Figma

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

В нашем блоге есть другие интересные статьи на похожую тему, которые будут полезны для дизайнеров иллюстраторов, UI/UX:

• Как вырезать объект из фото в Фигме — 3 способа
• Всё об анимации в Figma — создание, редактирование и работа с плагинами
• Дизайн в Figma: учимся пошагово работать со стилями текста и цвета

Есть специальные плагины, которые помогают создавать и настраивать таблицы для UI/UX-дизайна — они нужны и для автоматизации процесса работы с данными и решения задач с инфографикой. Подходящие бесплатные варианты в 2023 году для проектирования таблиц за короткое время:

• Table Generator — генератор таблиц для сайтов и не только, в котором можно указать количество строк и столбцов, длину и ширину, размер шрифта и другие параметры компонентов. Плагин автоматически создаёт набор фреймов и шаблонов, содержащих прямоугольники, макеты и текстовое поле.
• Table Paste — специалисты в дизайне используют его для переноса данных из электронных таблиц. Порядок вставки данных и поиска будет выбран по порядку слоев на боковой панели Figma снизу вверх.
• Data Table v3 (Interactive) — полезный инструмент для разработки сложных составных интерактивных таблиц в приложении с большим количеством данных, который лучше и быстрее остальных справляется с поставленной задачей — создание готовых таблиц в нужном виде.
• Chart — плагин для дизайна с красочными диаграммами, который умеет генерировать случайные стили разных компонентов для сайта. Есть связка с Google Sheets, возможно проводить импорт файла из CSV, JSON.

Хотите стать мастером дизайна и начать зарабатывать на этом или повысить свой скилл в этой сфере? Онлайн-курсы по работе в Figma — это ваш шанс освоить один из самых востребованных инструментов в индустрии дизайна:

• Курс «Figma» — Contented
• Figma — Pentaschool
• Графический дизайнер — Онлайн-институт Vill
• Веб-дизайнер — Eduson Academy

Получите промокод 10 000 ₽ на обучение и курсы стоимостью 20 000 ₽ в подарок!

Нажимая на кнопку «Получить», я соглашаюсь на обработку моих персональных данных.

Спасибо! Мы получили вашу заявку. Скоро с вами свяжемся.

Подводим итоги

Из статьи понятно, что для проектирования таблиц в Figma нужно предварительно ознакомиться с функциональными возможностями программы. Web-дизайнеры и другие специалисты могут использовать Фигму для реализации своих даже самых смелых идей. При работе с библиотекой компонентов в нескольких проектах и достаточным количеством таблиц в каждом из них стоит создать локальную копию.

Таблицы в Figma. Дизайн Data Grid одним компонентом

Строительство таблицы из компонентов — задача, которая рано или поздно возникает перед каждым разработчиком дизайн-систем в Figma.

Существует три подхода к дизайну таблиц, чтобы создать data grid с гибкой архитектурой. В каждом из случаев используется либо row-компонент, либо column-компонент, либо cell-компонент. Каждый из случаев подробно рассмотрим ниже.

Зачем всё это?

Зачем вообще всё запихивать в одну ячейку? Действительно ли среднему по размеру проекту требуется такая гибкость? Нужна ли компонентная архитектура для обычной таблицы?

Внутри большого командного проекта это единственный верный путь создавать новые data grid — через компонент. Это помогает генерировать больше вариантов и быстрее валидировать новые идеи.

Мои наблюдения показывают, что не все Figma-дизайнеры приучают себя работать с компонентами с самых ранних стадий нового проекта. Согласно недавнему опросу в Figma-чате чуть менее половины дизайнеров используют компоненты. Большая часть используют просто фреймы и copy-paste.

Но те, кому удалось переключить свой workflow на компонентный, скорее всего уже никогда не сделают шаг назад, потому что этот подход даёт больше гибкости и востребован среди организаций с собственным штатом дизайнеров. Хотите сохранить интерес к своей вакансии, если метите в крутую организацию, где уже работают в Figma — работайте с компонентами.

Тем не менее дизайнерам-фрилансерам я бы тоже рекомендовал использовать готовую UI-библиотеку. Можно делать дубликат под нового клиента и через мастер-компоненты быстро стилизовать под конкретные задачи.

Кстати, если вы используете Figma, я рекомендую обратить внимания на наши готовые дизайн-системы. Они помогают фрилансерам завершать больше заказов в месяц, программистам позволяют создавать красивые приложения самостоятельно, а тимлиды «пробегают» спринты быстрее, используя готовые дизайн-системы для командной работы.

А усли у вас серьезный проект, то наша команда готова развернуть дизайн-систему внутри организации на базе наших наработок и подогнать под конкретные задачи, используя Figma. Web / desktop, так и любой мобайл. С React / React Native мы тоже знакомы. Пишите в Т: @kamushken

Стили таблицы

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

Классика

Горизонтальные и вертикальные разделители хорошо заметны, заголовки выделены bold’ом и отделены фоном от ячеек с контентом. Эдакий Excel-style:

Контрастный заголовок

Разделители могут отсутствовать, либо могут быть только горизонтальными. Благодаря интенсивным заголовкам, такие data grid быстро разделяются взглядом, если их много на одном дашборде:

Материальная таблица

Data-first подход. Такие таблицы можно встретить в material design. Более интенсивный верхний разделитель и однопиксельные внутренние качественно разделяют данные:

Черезполосица

Эти таблицы прямиком из прошлого, но по сей день использование чередования серых и белых рядов часто встречается в современном UI:

Минимализм

Ничего, кроме данных! Это вполне обосновано на плотных десктопных интерфейсах, где на счету каждый пиксель:

Использование компонентов для создания таблицы

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

Row-компонент

Использование строки с ячейками заранее заданного количества. Таким образом таблица быстро собирается простым клонированием сверху вниз. Далее регулируется ширина каждого ряда.
С бордерами внутри каждой ячейки тоже предстоит поработать, различия присутствуют:

Cons: низкая степень гибкости, ячейки масштабируются всегда пропорционально. Придётся держать в системе много компонентов с различным набором ячеек, а потом для каждого набора дополнительно создавать новые состояния, что может усложнить организацию.

Pros: высоту Row удобно регулировать. Идеально подходит для dashboard-проектов, в которых часто меняются горизонтальные состояния в проекте: onHover, onSelected, onFocus и так далее и специфика разработки требует частого переключения между ними:

Column-компонент

Впервые эта идея пришла мне в голову чуть более года назад и я реализовал её в поздних версиях Material Design System для Фигмы. Таблицу удобно было бы собирать из компонентов-колонок, внутри которой заранее предопределено и размножено N-количество рядов, а все лишние срезались бы за границей фрейма через опцию Clip Content. Тогда было бы достаточно потянуть фрейм вниз за нижнюю границу, чтобы показать больше дополнительных ячеек в колонке:

Cons: внутри компонента не удастся регулировать высоту каждой ячейки (горизонтальный шаг), так как иначе не получится реализовать «срезание лишнего».

Pros: достаточная гибкость, чтобы строить таблицы в дизайн-системе с различной шириной колонок, например, чтобы умещался разный тип данных.

Совет: можно держать три таких компонента с разным шагом: S-32px / M-48px / XL-64px, например, и в какой-то степени решить проблему плотности ячеек. Особенно полезно в случае создания и мобильных и десктопных темплейтов внутри одного проекта / team library.

Cell-компонент

Использование ячейки-компонента даёт максимальную гибкость в стилизации таблицы. Редко какой проект требует использования и Material-стиля, и классического для data grid. Но если вы фрилансер, который регулярно создает новые дашборды своим клиентам из собственной или коммерческой базы компонентов, то вам лучше начинать с ячейки, из которой вы вы будете кирпичик-за-кирпичиком создавать таблицы. Потом будет достаточно вложить четыре линии, прижать их по бокам ячейки, расставить constraints и генерировать новые стили.

Убер-фича: в своей мобильной iOS12 библиотеке для Figma, я могу все перевернуть с ног на голову через компонент 🙂 Кстати, именно на основе макетов из этого продукта и были сделаны материалы к данной статье:

Cons: практически нет, разве что этот подход требует больше времени и навыков

Pros: максимальная гибкость, возможность управлять сеткой с помощью одного компонента, регулировать разделители, background, вложенные иконки и многое другое.

Подробный состав такой супер-ячейки я рассмотрю в следующем выпуске.

Исходник с компонентами доступен тут.

Подписывайтесь на мой канал, там будут все анонсы! Особенно учитывая, что сейчас мы пилим собственную дизайн-систему для решения многих задач по дизайну и веб-разработке одним махом. Это компоненты в Figma-исходников и React/Angular NPM пакетов. С абсолютно идентичным дизайном, немного лучше чем у Google Material 🙂 Я регулярно публикую новые веселые картинки об этом продукте. Трансляцию о разработке ведём практически в прямом эфире.

Сейчас многие организации переводят свои дизайн-отделы на Figma. Возникает вопрос: разбираться самим как с нуля её создать из компонентов с правильной структурой, или взять одну из готовых под iOS, Android, Web или для десктопных приложений. Любую из Figma UI библиотек можно развернуть внутри организации и получить сотни качественных компонентов и темплейтов для создания Ваших будущих продуктов. Узнайте больше на setproduct.com

Кстати, если вы понимаете западные дизайн-тренды, внимательны к сетке, типографике, горизонтальному ритму и вообще к каждому пикселю, то у вас есть отличная возможность присоединиться к небольшой команде Setproduct, чтобы совместно наполнить digital-рынок качественными дизайн темплейтами, которые экономят другим командам целые месяцы разработки. Напишите мне в Telegram.

• Веб-дизайн
• Веб-разработка
• Разработка мобильных приложений
• Интерфейсы
• Usability

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

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

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

Выделение нужных слоев в мастер-компоненте ячейки и распространение всех изменений на таблицу

Состав ячейки-компонента

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

Структура слоев находится слева в развороте

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

• Icon-L/R — две скрытые иконки, расставленые по краям ячейки слева и справа соответственно. По умолчанию их можно сделать видимыми, чтобы показать состояние сортировки. Icon-R можно активировать и заменить пиктограмму, например, для усиления действия, или отображения дополнительного функцонала
• Borders — четыре независимые линии прижатые внутри ко всем сторонам ячейки
• Caption — непосредственно текстовый элемент с содержимым
• BG — фоновый компонент, чтобы в будущем получать новые состояния

Иконки (Icon-L/R)

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

Создавать ли новый компонент из-за невозможности сдвинуть лейбл, при отключенной иконке, или делать отступ пробелом — решайте сами

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

Вы же помните, что экземпляры в Фигме можно заменять зажав Ctrl/Cmd в момент дропа

Разделители (Borders)

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

Таблицы творите как захотите:

Бордеры организованы в порядке слева-направо по часовой стрелке. Изменяя цвет для них в мастере, мы можем быстро изменять разделители во всех таблицах

Текст ячейки (Caption)

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

Внутренние отступы от текстового поля до границ ячейки — 8dp. Для таблиц повышенной плотности можно использовать 4dp.

Фон (BG)

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

Если текущая задача требует частого переключения состояний рядов, то рекомендуется выносить в отдельный компонент ячейку с новым стилем

Таблицы в дизайн-системе. Токены

Стилизация и реализация

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

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

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

• Flat — простая data-first материальная таблица, но с небольшой кастомизацией
• Raised — таблица превращается в карточку
• Smooth — приобретает мягкое насыщение цветом
• Filled — окрашена полностью (специфический кейс, например для акцента)

Спецификации и цвета

Серый, 4 primary цвета и 4 alternative цвета. Есть и градиенты.

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

Экземпляры со спецификациями специально в shaped-стиле, чтобы глаз быстрее их отличал от компонентов, для которых следует описание

Простым переключением опции снизу в Storybook быстро меняем окрас таблицы

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

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

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