Больше статей читайте в нашем блоге

Дизайн таблицы в Фигме. Используем готовые блоки

Figma является практичным, функциональным приложением, которое используется web-разработчиками дизайнерами для разработки сайтов. С ее помощью можно конструировать прототипы электронных страничек, элементы векторной графики и иллюстрации, а также осуществлять компоновку разных элементов. Достоинства - возможность создавать дизайн таблиц. Рано или поздно перед каждым web-дизайнером возникает такая необходимость. Как онлайн приложение, так и десктопная версия позволяет это делать, предлагая гибкие настройки.

Особенности и назначение таблицы в Figma

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

Важно добавить, что начинающие web-дизайнеры чаще всего создают таблицы при помощи фреймов и copy-paste, однако это значительно ограничивает функциональность. Лучше всего изначально переключить свой workflow на компонентный уровень, что сразу открывает расширенные возможности для творчества. Для получения элементов data grid с гибкой архитектурой активно задействуются row-, cell- или column составляющие. Любая из них имеет особенности и специфику.

Что значит компонентный уровень

В фигме у нас имеются так называемые "компоненты". Это блоки, которые мы можем единожды создать. И впоследствии переиспользовать готовые блоки, составляя из них более сложные объекты. Так вот, создание таблицы из готовых, одинаковых компонентов и является "компонентным" подходом к созданию таблицы.

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

Row-компонент

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

• Удобная регулировка высоты row ячеек.
• Широкие возможности, что делает их наиболее подходящими для Dashboard-проектов.

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

Column-компонент

Здесь задается то число колонок, которое требуется с учетом содержимого. Удобство, функциональность заключается в том, что при помощи данных компонентов легко собирают таблицу, в которой заранее определяют число N-рядов. При помощи опции Clip Content все лишние части легко срезаются. К плюсам такой модели относят:

• Улучшенную гибкость.
• Возможность построения таблиц, которые имеют разную ширину колонок.

Для разрешения вопроса с плотностью здесь можно использовать компоненты S-32px / M-48px / XL-64px, которые дают разный шаг по плотности ячеек. Такая функция является особенно полезной при разработке как десктопных, так и мобильных темплейтов, причем в рамках единого проекта.

Cell-компонент

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

• Легкость управления сеткой при помощи всего одного компонента.
• Удобная регулировка разделительных элементов.
• Работа со вложенными иконками.

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

Главные составляющие таблицы

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

Фон

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

Border

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

• Цвет линии.
• Конечную линию разграничения.
• Стиль линии.
• Ширину линии.

Примечательно, что каждая строчка в ячейке может иметь конкретный стиль, цвет и ширину, что дает возможность гибко задавать настройки. В целом работать с Border несложно, поэтому каждый web-дизайнер может легко его освоить. Для лучшего понимания дадим пошаговый план, как это сделать:

• 1.
  Добавляем нижнюю границу с конкретной шириной компонента.
• 2.
  Устанавливаем ограничения, чтобы растянуть их по горизонтали и придерживаться выбранной границы.
• 3.
  Дублируем линию для нижней границы, поворачивая ее на угол в 180°.
• 4.
  Задаем ограничения для левой и правой границы, вводя требуемые параметры в зависимости от конкретной задачи проекта.

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

Content

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

• Возможность легкого растягивания не только по вертикали, но и горизонтали с целью умещения в ячейке.
• Установка минимального размера компонента не больше, нежели размер ячейки имеющейся по умолчанию.
• Отказ от дополнительного фона, если он уже имеется внутри ячейки.
• Аккуратное и правильное выравнивание текста внутри ячейки.

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

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

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

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

Выводы

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