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

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

Чтобы сделать это Легко для вас, я подготовил пример макета, в котором используются все компоненты, которые нам нужны для этого урока.

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

Чтобы упростить содержание этого руководства, давайте предположим, что цвета, шрифты и эффекты уже существуют как стили в проекте Figma, который вы используете. вот-вот начнется. С точки зрения атомарного замысла, это атомы . (Чтобы узнать больше, ребята из littleBits написали отличную статью по этой теме.)

Целевая аудитория этого учебника – дизайнеры (UX, UI), которые либо уже внедрили Figma в свои рабочие процессы, либо планируют попробовать Figma в своих следующих дизайнерских проектах, но не знают, с чего начать.

Итак, без лишних слов, давайте углубимся!

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

Введение

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

Итак, начнем с ячейки. У него три свойства:

1. Background
2. Border
3. Content

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

Фон

Фон будет отдельным компонентом в Figma. Размер на самом деле не имеет значения, поскольку мы можем растянуть компонент по мере необходимости, но давайте начнем с установки размера 100 × 36 пикселей.

В этом компоненте добавьте прямоугольник того же размера. как сам компонент. Это будет единственный объект внутри компонента. Нам нужно прикрепить границы прямоугольника к границам компонента с помощью ограничений (установите ограничения на «Слева и справа» и «Сверху и снизу» на правой панели в разделе Ограничения ), чтобы прямоугольник автоматически растягивается до размера компонента.

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

Цвет заливки прямоугольника будет определять цвет фона ячейки. Выберем для него белый цвет. Я рекомендую выбрать этот цвет из цветовых стилей, настроенных в начале проекта.

Border

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

Свойства границы:

• Линия границы (левая, правая, верхняя, нижняя или отсутствие любой из них)
• Ширина линии
• Цвет линии
• Стиль линии

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

Давайте создадим компонент размером 100 × 36 пикселей (так же, как мы делали раньше. ). Внутри компонента нам нужно добавить 4 строки для каждой границы. Теперь обратите внимание на то, как мы собираемся это сделать.

1. Добавьте линию для нижней границы с длиной ширины компонента;
2. Установите его положение на нижнюю границу и ограничения, чтобы растянуть их по горизонтали и придерживаться нижней границы;
3. Для верхней границы , продублируйте линию для нижней границы, поверните ее на 180 градусов и придерживайтесь верхней части компонента. (Не забудьте изменить его ограничения, чтобы они оставались наверху и растягивались по горизонтали.);
4. Затем для левой границы просто поверните на -90 градусов и установите его положение и ограничения так, чтобы они находились слева, придерживаясь левой границы и растягиваясь по вертикали;
5. И последнее, но не менее важное: вы можете создать правую границу повернув его на 90 градусов и задав его положение и ограничения. Установите цвет и ширину штриха для каждой линии на серый (выберите из цветовых стилей) и 1 пиксель соответственно.

Примечание : Вы можете спросить себя, почему мы повернули линию для нижней границы. Что ж, когда вы измените ширину штриха для линии в Фигме, она будет расти. Таким образом, нам пришлось установить это направление «подъема» в центр компонента. Изменение ширины обводки линии (в нашем случае это размер границы) не будет расширяться за пределы компонента (ячейки).

Теперь мы можно скрыть или настроить стили отдельно для каждой границы в ячейке.

Если в вашем проекте есть несколько стилей для границ таблицы (несколько примеров границ показаны ниже), вам следует создать отдельный компонент для каждого стиля. Просто создайте новый главный компонент, как мы делали раньше, и настройте его так, как вам нужно.

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

Content

Это самый сложный компонент из всех.

Нам нужно создать все возможное варианты содержимого таблицы в проекте: обычный текст, текст со значком (слева или справа, разное выравнивание), флажки, переключатели и любое другое содержимое, которое может содержать ячейка. Чтобы упростить это руководство, проверьте компоненты в файле макета. Как создавать и организовывать компоненты в Figma – тема другой статьи.

Однако есть несколько требований к компонентам контента:

• Компоненты должен легко растягиваться как по вертикали, так и по горизонтали, чтобы поместиться внутри ячейки;
• Минимальный размер компонента должен быть меньше, чем размер ячейки по умолчанию (особенно высота, учитывая возможные отступы ячеек);
• Избегайте каких-либо полей, чтобы компоненты могли правильно выровняться внутри ячейки;
• Избегайте ненужного фона, потому что он уже есть в самой ячейке.

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

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

Создание компонента ячейки

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

Установите компонент фона в качестве нижнего слоя и растяните его до размера всей ячейки (установите ограничения «Слева и справа» и «Сверху и снизу»).

Добавьте компонент границы с теми же ограничениями, что и компонент фона.

Теперь перейдем к самой сложной части – content content .

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

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

Примечание : В качестве исправления вы можете создать столбцы с пустыми ячейками ( без содержимого и шириной 16 пикселей, например) слева и справа от столбца, где требуется дополнительное поле. Или, если конструкция вашей таблицы позволяет, вы можете добавить горизонтальные отступы внутри компонента ячейки. Например, ячейки в Google Material Design по умолчанию имеют отступы 16 пикселей.

Не забудьте удалить параметр « Обрезать содержимое » для ячейка и рамка (это можно сделать на правой панели в разделе «Свойства»). Содержимое ячейки может выходить за ее пределы; например, когда раскрывающийся список находится внутри вашей ячейки, и вы хотите показать его состояние во всплывающем окне.

Примечание : Мы будем используя этот стиль ячеек в качестве основного. Не беспокойтесь, если в вашей таблице есть дополнительные стили – мы рассмотрим это в разделах “Состояния таблицы” и “Компоненты, а не переопределения”.

Параметры ячеек для стандартной таблицы

Этот шаг может быть необязательным, но если вашей таблице нужны состояния, вы не сможете обойтись без него. И тем более, если в таблице несколько стилей границы.

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

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

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

Несколько примеров:

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

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

Теперь мы готовы создавать таблицы (с точки зрения Атомный дизайн – организмы) из различных клеточных компонентов (молекул), которые мы создали.

Настройка таблицы

Изменение высоты строки во всей таблице относительно просто: выделите таблицу, измените высоту элемента (в данном случае высоту ячейки, H на правой панели в разделе «Свойства»), а затем измените вертикальное поле с элемента на 0. Вот и все: для изменения высоты строки потребовалось два щелчка мышки!

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

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

Цвет фона, тип обводки и данные содержимого можно изменить в соответствующий компонент или в одном из восьми основных компонентов ячеек (ячеек с разными стилями обводки). Единственный параметр, который нельзя изменить сразу, – это поля ячейки, например заполнение содержимого . Остальное легко настроить.

Компоненты, а не переопределения

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

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

Примечание : * Я не рекомендую изменять цвет фона и обводку в экземплярах компонентов. Меняйте их только в мастере . При этом экземпляры с переопределениями не будут обновлены. Это означает, что вам придется делать это вручную, и этого мы стараемся избежать. Так что давайте придерживаться основных компонентов. *

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

Состояния таблиц

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

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

Вам понадобится чтобы добавить все восемь ячеек с разными вариантами обводки для каждого из состояний (может быть, меньше, зависит от стиля обводки). И да, нам понадобятся отдельные компоненты для цвета фона и обводки для состояний.

В конечном итоге это будет выглядеть примерно так:

Вот где немного возникает проблема. К сожалению, если мы сделаем все, как описано выше (при изменении состояния компонента с одного на другое), есть риск потерять содержимое ячейки. Придется обновить его, кроме случая, когда тип содержимого такой же, как в основной ячейке. На данный момент мы ничего не можем с этим поделать.

Я добавил таблицы в файл макета, которые были созданы несколькими различными способами:

• Используя это руководство (отдельные компоненты для стили ячеек);
• Использование компонента ячейки (компоненты для границ, фона и содержимого);
• Использование компонента ячейки, который объединяет все (только с компонентами содержимого в дополнение).

Попробуйте поиграть и изменить стили ячейки.

Заключение

Если вы используете одну и ту же библиотеку компонентов в нескольких проектах и ​​у вас есть разумное количество таблиц в каждом из них, вы можете создать локальную копию компонентов (компоненты ячеек со стилями обводки и, при необходимости, компоненты ячеек с разными состояниями), настроить их и использовать в проекте. Содержимое ячейки может быть установлено на основе локальных компонентов.

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

Вопросы, отзывы, мысли? Оставьте комментарий ниже, и я сделаю все возможное, чтобы вам помочь!

Загрузить макет таблицы Figma

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

Дополнительная литература

• «Атомарный дизайн», Брэд Фрост.
• «Как спроектировать сложную веб-таблицу, »Слава Шестопалов, Smashing Magazine.
• « Создание атомарных компонентов в Figma », команда разработчиков и разработчиков, littleBits.
• « Таблицы Figma: проектирование сетки данных с помощью одной ячейки ». Компонент », Роман Камушкен, Setproduct

Полезные ресурсы

• Канал Figma на YouTube
  официальный канал Figma на YouTube – это первое, что стоит посмотреть, если вы новичок в Figma.
• Google Sheets Sync
  Плагин Figma, который помогает вы получаете данные из Google Таблиц в свой файл Figma. Это должно хорошо работать с методами из этого руководства, но вам нужно потратить некоторое время на переименование всех текстовых слоев, чтобы это работало правильно.

Получите его бесплатно

Получите бесплатно