Дизайн и Графика

Сетка 12 колонок в Figma настраивается через View > Layout grids с установкой типа Columns, количества колонок 12, ширины колонки и промежутков Gutter согласно стандартам Bootstrap или Material Design. Это необходимо для создания адаптивных макетов, соответствующих современным стандартам веб-дизайна и обеспечивающих выравнивание элементов на разных разрешениях экрана.

Зачем нужна 12-колончная сетка в дизайне

• Обеспечение консистентности и выравнивания всех элементов макета по единому стандарту.
• Упрощение адаптации дизайна для мобильных, планшетных и десктопных устройств с разными разрешениями.
• Совместимость с популярными фреймворками Bootstrap и Material Design, использующими 12-колончную систему.
• Облегчение взаимодействия между дизайнерами и разработчиками при передаче макетов в код.
• Ускорение процесса дизайна благодаря предварительно установленным ориентирам для размещения контента.
• Повышение удобства использования сайта или приложения через унифицированное расположение элементов.

Пошаговая инструкция по настройке 12-колончной сетки

1. Откройте проект в Figma через веб-приложение figma.com или десктопный клиент.
2. Выберите фрейм (артборд), к которому нужно применить сетку, щелкнув на него один раз.
3. В правой панели Design найдите раздел Layout grid.
4. Нажмите на значок плюса (+) рядом с Layout grid для добавления новой сетки.
5. В появившемся меню выберите тип сетки Columns (колонки).
6. Установите количество колонок: введите значение 12 в поле Count.
7. Задайте ширину одной колонки в поле Width (например, 60px для мобильного, 80px для десктопа).
8. Установите промежуток между колонками Gutter (например, 20px или 24px согласно Material Design).
9. Задайте внешние отступы Offset (отступы слева и справа от края фрейма, например 16px для мобильного).
10. Проверьте, что сетка отображается на артборде как вертикальные линии, разделяющие пространство на 12 равных колонок.
11. Если нужно создать сетку для разных разрешений экранов, скопируйте текущий фрейм через Ctrl+D (Windows) или Cmd+D (Mac).
12. На скопированном фрейме измените параметры сетки для другого разрешения (например, для планшета или десктопа).
13. Для фрейма мобильной версии установите: ширина колонки 36px, гаттер 16px, отступ 16px.
14. Для фрейма десктопной версии установите: ширина колонки 60px, гаттер 24px, отступ 60px.
15. Включите видимость сетки, нажав на иконку глаза рядом с Layout grid в панели Design.
16. Отключите видимость сетки, щелкнув на ту же иконку, если она мешает работе (горячая клавиша Ctrl+' на Windows или Cmd+' на Mac).
17. Разместите элементы дизайна (текст, кнопки, карточки) согласно линиям сетки для обеспечения выравнивания.
18. Используйте инструмент Align (горячая клавиша A) для выравнивания выделенных элементов относительно сетки и друг друга.
19. Сохраните фрейм с применённой сеткой через File > Save или Ctrl+S.
20. Экспортируйте сетку вместе с дизайном при необходимости передачи макета разработчикам через File > Export или публикацию через Share > Design file.

Часто задаваемые вопросы

Как удалить сетку со слоя в Figma? Выделите фрейм, найдите сетку в панели Design > Layout grid и нажмите на иконку мусорного бака рядом с её названием.

Какие стандартные значения используют дизайнеры для 12-колончной сетки? Bootstrap использует гаттер 15px с каждой стороны (итого 30px между колонками), Material Design рекомендует гаттер 24px для десктопа и 16px для мобильных устройств.

Можно ли применить одну сетку к нескольким фреймам одновременно? Нет, сетка применяется к каждому фрейму отдельно, но вы можете скопировать фрейм с готовой сеткой через Ctrl+D и изменить только контент.