Figma как сделать таблицу

В Figma нет встроенной функции для создания таблиц как в Excel или Google Sheets, но вы можете эффективно моделировать табличные структуры с помощью фигур, текста и компонентов. Главное — использовать фреймы с Auto Layout, чтобы обеспечить гибкость, масштабируемость и единообразие оформления.

Основы работы с таблицами в Figma

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

Таблицы в Figma чаще всего нужны дизайнерам UX/UI при создании дашбордов, административных панелей, отчётов или CRM-систем. Они могут быть простыми (например, список пользователей) или сложными — с фильтрами, сортировкой, чекбоксами и действиями в строках. Понимание того, что таблица — это не функциональный элемент, а визуальный макет, помогает быстрее освоить процесс.

Важно помнить: таблица в Figma — это набор вложенных фреймов. Каждая строка — фрейм, каждая ячейка внутри строки — тоже фрейм. Такая структура позволяет легко управлять отступами, выравниванием и порядком элементов. Кроме того, использование Auto Layout делает таблицу адаптивной: при изменении содержимого колонки автоматически расширяются или сужаются.

Как создать таблицу по шагам

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

1. Создайте основной фрейм — он будет контейнером всей таблицы. Установите нужную ширину, например 800 px, и оставьте высоту автоматической.
2. Добавьте шапку таблицы. Создайте фрейм для первой строки (заголовков). Внутри разместите текстовые блоки для каждого столбца: «Имя», «Email», «Статус» и т.д.
3. Настройте выравнивание. Выделите все текстовые элементы в шапке и примените Auto Layout горизонтально. Установите одинаковые внутренние отступы (padding) между ячейками.
4. Создайте строку данных. Скопируйте шапку или сделайте новую строку аналогичной структуры, но с реальными данными. Используйте те же размеры и отступы для согласованности.
5. Продублируйте строки. Через копирование (Ctrl+C / Ctrl+V) добавьте нужное количество строк. Убедитесь, что все они находятся в одном вертикальном фрейме с Auto Layout.
6. Настройте зебру-эффект (чередование). Для удобочитаемости сделайте чётные строки светлее. Выделите каждую вторую строку и измените заливку на #f9f9f9.

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

Работа с Auto Layout: ключ к адаптивности

Auto Layout — одна из самых мощных функций Figma, особенно при работе с таблицами. Он позволяет фреймам автоматически изменять размер в зависимости от содержимого, выравнивать элементы и управлять отступами без ручной корректировки.

Представьте, что вы добавляете длинное имя в ячейку. Без Auto Layout вам пришлось бы вручную увеличивать ширину ячейки и сдвигать соседние. С Auto Layout достаточно изменить текст — и фрейм сам расширится, если установлено правильное поведение.

Для каждой строки таблицы включите горизонтальный Auto Layout. Установите:

• Direction: Horizontal
• Padding: 16 px слева и справа (или по вашему усмотрению)
• Gap: 0 — если хотите контролировать отступы через padding, или задайте значение (например, 8 px), чтобы разделить ячейки
• Primary axis resizing: Hug contents — чтобы строка подстраивалась под самый высокий элемент

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

Компоненты и повторяемость: экономия времени

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

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

Процесс прост:

• Выделите строку с данными
• Нажмите правой кнопкой → Create Component
• Назовите его, например, «Table Row / Active»
• Используйте Instances в других местах макета

Когда вы обновляете мастер-компонент (например, меняете цвет текста), все экземпляры автоматически синхронизируются. Это особенно полезно при согласовании с командой или при A/B-тестировании разных стилей таблиц.

Также можно создавать варианты компонентов (variants): например, строка в состоянии «выбрана», «ошибка», «неактивна». Это упрощает прототипирование и демонстрацию поведения интерфейса.

Форматирование и стили: внешний вид таблицы

Хорошая таблица не только функциональна, но и легко читается. Цвет, типографика, границы и контраст играют ключевую роль в восприятии данных.

Начните со шрифта. Используйте системные или веб-безопасные шрифты: Inter, Roboto, SF Pro. Размер текста в ячейках — 14–16 px, в шапке — 16 px с жирным начертанием. Цвет текста — #1A1A1A для основного, #666666 для второстепенного.

Цвет фона:

• Шапка: #F0F0F0 или брендовый цвет
• Чётные строки: #FFFFFF
• Нечётные строки: #FAFAFA
• Выделенная строка: #E6F7FF

Границы — спорный вопрос. Некоторые дизайнеры используют тонкие линии (#DDDDDD) между строками или колонками, другие предпочитают отступы и зебру-эффект. Решение зависит от плотности данных. Чем больше информации, тем больше нужна визуальная разбивка.

Интерактивные таблицы и прототипирование

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

Вы можете добавить кликабельные элементы:

• Переход по клику на строку (например, к карточке пользователя)
• Фильтрация по заголовкам колонок
• Контекстное меню при клике на иконку «три точки»
• Модальное окно при удалении записи

Для этого используйте связи в Prototyping. Выделите ячейку или строку, перейдите на вкладку Prototype и создайте связь с другим фреймом. Укажите тип взаимодействия — On Click, Hover или Drag.

Также можно использовать плагины, например, Data Populator или Anima, чтобы автоматически заполнять таблицы реальными данными. Это экономит время и делает макет более убедительным.

Ошибки, которых нужно избегать

Новички в Figma часто допускают типичные ошибки при создании таблиц. Вот основные из них:

• Отсутствие Auto Layout — приводит к ручному выравниванию, которое легко ломается при изменениях.
• Разная ширина колонок — нарушает читаемость. Все ячейки одного столбца должны быть одной ширины.
• Избыток границ — слишком много линий делает таблицу «тяжёлой» и трудной для восприятия.
• Несогласованные отступы — например, 12 px слева и 16 px справа. Используйте сетку и стили.
• Жёсткая привязка к размеру — если ширина фрейма фиксирована, таблица не адаптируется под разные экраны.

Также не забывайте про доступность. Убедитесь, что контраст текста и фона соответствует стандартам WCAG (минимум 4.5:1). Используйте плагины типа Stark для проверки.

Проверочный чек-лист перед презентацией таблицы

• Все строки используют Auto Layout?
• Ширина колонок согласована?
• Есть чередование фона строк?
• Текст читаем (размер, цвет, шрифт)?
• Есть интерактивные связи (если нужно)?
• Компоненты стандартизированы?

Экспертное мнение

Иван Морозов, Senior UI Designer, 10 лет опыта

Главные принципы: используйте Auto Layout для адаптивности, компоненты для повторяемости, и продумывайте визуальную иерархию. Таблица должна быть не просто красивой, но и удобной для восприятия данных.

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