{"id":9132,"title":"\u041f\u043e\u0447\u0435\u043c\u0443 \u043a\u0430\u043d\u0430\u0434\u0441\u043a\u0438\u0435 \u043b\u044e\u0431\u0438\u0442\u0435\u043b\u0438 \u043a\u0432\u0430\u0434\u0440\u043e\u0446\u0438\u043a\u043b\u043e\u0432 \u043f\u043e\u043a\u0443\u043f\u0430\u044e\u0442 \u0437\u0430\u043f\u0447\u0430\u0441\u0442\u0438 \u0432 \u0420\u043e\u0441\u0441\u0438\u0438","url":"\/redirect?component=advertising&id=9132&url=https:\/\/vc.ru\/pochta\/325041-kak-kanadskie-lyubiteli-snegohodov-i-kvadrociklov-otkryli-dlya-sebya-rossiyu&placeBit=1&hash=cd54543b13c8a6083dd50d5669dab69e3e15e40792f9ed69859d5c8934b50d3d","isPaidAndBannersEnabled":false}
Дизайн
Roman Kamushken

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

Продолжение публикаций на тему создания таблиц из компонента а Figma

В предыдущей статье на тему дизайна таблиц в Фигме мы выяснили, что базовый элемент создания любого 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 - окрашена полностью (специфический кейс, например для акцента)

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

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

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

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

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

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

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

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

0
1 комментарий
Популярные
По порядку

Мне как-то гораздо удобнее использовать не один мастер компонент со скрытыми слоями, а например несколько компонентов (типа button / hover и button / active итд) и переключаться между ними. Так можно более гибко, на мой взгляд, работать с выложенными компонентами.

3
Читать все 1 комментарий
Юбилей кешбэка: как в 130 лет выглядеть «на все сто»

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

Факап на 45 млн рублей, выгорание и новый стартап

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

Это я (слева) и Саша (аккаунт менеджер), гуляем по Москве, ждем встречи с партнерами
«Как иронично, что фирме в сфере психического здоровья плевать на психическое здоровье собственных работников» Статьи редакции

Сотрудники Spring Health жалуются на соучредительницу Эйприл Го: она запугивает их, увольняет при всех, вынуждает работать по 70 часов в неделю и не нанимает тех, кто спрашивает про переработки. Го объясняет: «Мы носимся как безголовые цыплята, потому что на кону человеческие жизни».

Эйприл Го — на ноябрь 2021 года самая молодая женщина-директор компании с оценкой более $1 млрд Slush
Кейс «АнтиШколы»: мы впустую потратили два года на разработку своей платформы и выжили в пандемию благодаря Edvibe

После вуза мы с партнером запустили неформальную АнтиШколу по английскому — с кофе, печеньками, играми и атмосферой антикафе. Но столкнулись с проблемой в онлайне: два года разрабатывали приложение для студентов и потратили порядка $40 тысяч в никуда. Рассказываю, как это было.

Так мы занимаемся английским на крыше! Никаких унылых парт

eBay: 64% покупателей не жалеют о своих покупках в Черную пятницу

Черная пятница — одно из главных событий этой недели: тысячи покупателей находятся в поиске лучших скидок. А что происходит после Черной пятницы? eBay опросил около 1000 россиян и выяснил, считают ли они выгодными покупки, совершенные во время самой большой распродажи года.

Как найти перспективное IPO
IKEA начала сдавать в Токио квартиры в 10 м² за $0,86 в месяц, чтобы показать, что в них тоже можно жить Статьи редакции

Внутри есть мини-спальня, рабочая зона, диван, стиральная машина и другое.

«VK Видео» заявил о снижении просмотров роликов из поиска «Яндекса» — в компании объяснили ситуацию борьбой с пиратством Статьи редакции

Эта доля незначительна в общем количестве просмотров, но сервис обеспокоен жалобами пользователей.

Разговор PRO: аналитика рекламы

Эксперты компании Registratura, входящей в iConText Group, вместе со своим клиентом «Олант» приняли участие в спецпроекте AdIndex.ru, где поговорили о рекламной аналитике.
Сергей Ерофеев, генеральный директор Registratura, Андрей Сахаров, руководитель отдела продаж Registratura, и Филипп Иванов, директор по интернет-маркетингу и e-commerce «Олант»…

Время входа

Управляющий активами Дмитрий Космодемьянский — о том, что происходит с рынком облигаций.

null