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

Как создать дизайн таблицы в Фигме

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

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

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

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

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

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

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

Row-компонент

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

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

Column-компонент

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

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

Cell-компонент

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

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

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

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

Фон

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

Border

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

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

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

Content

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

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

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

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

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

Выводы

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

An error has occurred. This application may no longer respond until reloaded. Reload 🗙