Как делать таблицы в фигме

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

Способ вручную с помощью Auto Layout

Это основной и самый мощный способ, который используют профессионалы. Он позволяет таблице быть адаптивной и легко редактируемой.

Создание строки

1. Возьмите инструмент Текст (T) и напишите текст для первой ячейки (например, "Заголовок 1").
2. Выделите текстовый слой и примените Auto Layout (клавиша Shift + A или кнопка «+» в правой панели).
3. Теперь, удерживая Alt (Option на Mac), перетащите этот текстовый слой внутри Auto Layout. Вы создадите его копию. Сделайте столько копий, сколько у вас столбцов.
4. Измените текст в каждой ячейке.
5. В настройках Auto Layout выставите:

• Direction: Horizontal (чтобы элементы шли в ряд).
• Spacing: задайте расстояние между ячейками (например, 16px).
• Padding: задайте внутренние отступы для всей строки (например, 12px сверху/снизу и 16px слева/справа).

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

1. Выделите свою строку с Auto Layout и снова примените к ней Auto Layout (Shift + A). Теперь у вас будет Auto Layout внутри Auto Layout.
2. Во внешнем Auto Layout выставите:

• Direction: Vertical (чтобы строки шли друг за другом).
• Spacing: задайте расстояние между строками (например, 1px для тонкой линии-разделителя).

После этого, удерживая Alt (Option), перетащите строку внутри внешнего Auto Layout, чтобы создать новые строки. Figma будет автоматически выравнивать их по ширине.

Настройка внешнего вида

• Ширина столбцов: Чтобы изменить ширину конкретного столбца, просто растяните сам текстовый слой-ячейку.
• Заливка: Чтобы сделать шапку таблицы другого цвета, выделите внешний фрейм строки-шапки и залейте его цветом.
• Разделители: Тонкие разделители между строками можно создать с помощью Spacing во внешнем Auto Layout, залив его серым цветом. Для вертикальных разделителей между столбцами можно добавить тонкие линии как отдельные элементы внутри строки или использовать Stroke с настройкой "Inside" для самой ячейки.

Использование компонентов и стилей для сложных таблиц

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

1. Создайте Компонент ячейки: Сделайте одну ячейку с Auto Layout, задайте ей заливку, отступы и стиль текста. Нажмите Ctrl+Alt+K (Cmd+Option+K на Mac), чтобы создать компонент.
2. Создайте Компонент строки: Соберите строку из нескольких экземпляров вашего компонента-ячейки и примените к ней Horizontal Auto Layout. Превратите эту строку в компонент.
3. Соберите таблицу: Используйте экземпляры компонента-строки, размещая их в Vertical Auto Layout.

 

Плюсы: Если вы измените главный компонент ячейки или строки, все таблицы в проекте автоматически обновятся.

 

Рассмотрим структуру компонентов для таблицы. Эта таблица построена из двух главных компонентов: «Ячейка / Cell» и «Строка / Row»:

Компонент	Состав	Свойства для переопределения	Преимущество
Ячейка / Cell	Auto Layout с текстовым блоком	Текст Цвет заливки Стиль текста (Body, Caption)	Централизованное изменение внешнего вида всех ячеек в проекте
Строка / Row	Horizontal Auto Layout с экземплярами "Ячейки"	Количество ячеек (показывать/скрывать) Данные в ячейках	Быстрое создание строк с гарантированно одинаковыми отступами и выравниванием
Таблица (Готовый пример)	Vertical Auto Layout с экземплярами "Строки"	-	Мгновенное обновление дизайна при изменении главных компонентов

 

Способ с помощью плагинов

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

1. Перейдите в меню Plugins - Browse plugins in Figma Community.
2. В поиске введите Table или Table Generator.
3. Установите понравившийся плагин (например, Table Generator, Tables, Material Design Table).

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

Создание простой сетки

Этот способ подходит для очень простых и статичных таблиц. Что нужно сделать:

1. Нарисуйте прямоугольник (R) - это будет ваша таблица.
2. Скопируйте (Ctrl+D) его несколько раз, чтобы создать строки. Выровняйте их.
3. Снова скопируйте первый прямоугольник и поверните его на 90 градусов, чтобы создать вертикальные разделители.
4. Разместите текст поверх этой сетки.

Минусы данного способа состоят в том, что такую таблицу очень неудобно редактировать. Добавление или удаление строки/столбца требует ручной работы.

Ключевые советы

1. Используйте Стили Текста: Для заголовков, основного текста и т.д. Это позволит быстро менять шрифт во всей таблице.
2. Используйте Стили Цветов: Для заливки шапки, чередования строк (зебра) и т.д.
3. Constraint (Ограничения): Настройте для текстовых ячеек ограничения по ширине и высоте, чтобы текст вел себя предсказуемо при изменении размера фрейма таблицы.
4. Auto Layout - ваш лучший друг. Освоив его, вы сможете создавать не только таблицы, но и любые сложные адаптивные интерфейсы.

Вывод

Для разовых задач подойдет плагин. Для полного контроля, профессионального подхода и переиспользования однозначно используйте Auto Layout и Компоненты.