Линейка и сетка помогают направлять дизайнера при создании точных макетов в Figma. Через горячий доступ к настройкам можно мгновенно активировать эти инструменты и приступить к работе с пиксельной точностью.
Сетка служит основой для выравнивания элементов интерфейса и создания гармоничных композиций. В Figma доступны три типа сеток: квадратная, колоночная и строчная. Каждый тип можно настроить под конкретные задачи проекта.
Нажатие клавиш Shift + R активирует линейку, а Ctrl + G включает сетку. Эти комбинации работают одинаково на Windows и macOS, что упрощает взаимодействие между дизайнерами на разных платформах.
Быстрый доступ к настройкам линейки через горячие клавиши
Клавиша 'r' моментально активирует линейку в Figma. При удержании Shift + r линейка будет направлять движение курсора строго по вертикали или горизонтали. Двойное нажатие 'r' закрепляет линейку в выбранной позиции.
Alt + левый клик по линейке создает дополнительную направляющую линию. Для точной настройки расстояния между направляющими используйте стрелки клавиатуры после активации линейки.
Настройка пользовательских горячих клавиш в Figma позволяет назначить собственные комбинации для работы с линейкой. Это ускоряет процесс создания макетов и помогает поддерживать точность измерений.
Комбинация Ctrl + \ скрывает или показывает все направляющие линии на рабочей области. При работе с множеством элементов эта функция помогает временно убрать вспомогательные линии для оценки общей композиции.
Настройка шага и цвета сетки под ваш проект
Грамотная настройка сетки значительно ускоряет работу над проектом в Figma. Для точной настройки шага выберите меню 'View' → 'Layout Grid Settings'. В открывшемся окне укажите размер ячеек сетки в пикселях - для веб-дизайна оптимален шаг 8px или 10px.
Цветовая схема сетки должна контрастировать с элементами макета. Выберите приглушенные оттенки: голубой (#4A90E2) или фиолетовый (#9013FE) с прозрачностью 10-15%. Такие цвета помогут направлять работу, не отвлекая от дизайна.
Для работы с большими элементами создайте дополнительную сетку с шагом 40px или 50px. Переключаться между сетками можно горячими клавишами: Ctrl + G (Win) / Command + G (Mac). Кнопка r активирует отображение линеек по периметру холста.
Сохраните настроенную сетку как пресет через кнопку 'Save as New Grid Preset' - это позволит быстро применять её в других файлах Figma. При командной работе экспортируйте пресеты через 'Share Grid Preset' для синхронизации настроек между дизайнерами.
Создание пользовательской разметки для разных размеров экранов
Для адаптивного дизайна в Figma создайте отдельные фреймы под каждое разрешение. Нажмите клавишу R для активации инструмента Rectangle и задайте размеры популярных устройств:
| Устройство | Ширина (px) | Высота (px) |
|---|---|---|
| Смартфон | 375 | 812 |
| Планшет | 768 | 1024 |
| Десктоп | 1440 | 900 |
Настройте собственные направляющие для каждого формата. Для мобильных экранов установите отступы по 16px от краёв, для планшетов - 32px, для десктопа - 80px. Используйте горячий розовый (#FF69B4) для пометки критических точек вёрстки.
Создайте компоненты-колонки: 4 для мобильных, 8 для планшетов, 12 для десктопа. Сохраните их как библиотеку для быстрого переиспользования в новых проектах. При масштабировании между брейкпоинтами направляйте элементы по заданной сетке.
Добавьте вертикальный ритм: базовую линию 8px для мобильных и 10px для больших экранов. Зафиксируйте сетку командой Alt + L для сохранения настроек между файлами.
Выравнивание объектов по сетке с магнитными направляющими
Магнитные направляющие в Figma помогают точно размещать элементы дизайна. Включить их можно комбинацией клавиш Shift + R.
- Перетащите направляющую из линейки на рабочую область
- Удерживайте Alt для создания копии направляющей
- Двойной клик по направляющей открывает точную настройку координат
Для максимально быстрой работы с объектами:
- Включите привязку к сетке через горячую клавишу Ctrl + Shift + 4
- Настройте силу магнитного притяжения в меню View > Snap to Grid
- Используйте клавишу Alt при перемещении для временного отключения привязки
Распространенные сценарии использования магнитных направляющих:
- Выравнивание отступов между карточками
- Создание симметричных композиций
- Точное позиционирование текстовых блоков
- Построение модульных сеток интерфейса
При работе с большим количеством направляющих:
- Группируйте их по смыслу через цветовое кодирование
- Сохраняйте часто используемые наборы в отдельном фрейме
- Удаляйте неиспользуемые направляющие командой Ctrl + ;>
Сохранение настроек сетки в команде через Team Library
Team Library в Figma позволяет сохранить единые настройки сетки для всей команды. Публикация шаблона с настроенной сеткой в библиотеку команды занимает 3 простых шага:
1. Создайте файл-шаблон с оптимальными параметрами сетки для вашего проекта.
2. Опубликуйте настройки:
- Выберите кадр с готовой сеткой
- Нажмите кнопку 'Publish' в верхнем меню
- В окне публикации включите опцию 'Include grid settings'
3. Предоставьте доступ команде:
- Откройте настройки доступа
- Выберите команду или отдельных участников
- Установите права 'Can duplicate'
После публикации все участники команды смогут применять сохраненные настройки через горячие клавиши Ctrl+L (Win) или Cmd+L (Mac). Это помогает направлять работу дизайнеров в едином визуальном русле.
При обновлении базовых настроек сетки достаточно опубликовать новую версию шаблона - изменения автоматически отразятся у всех подключенных пользователей.
Экспорт макета с учетом настроенной сетки и линеек
При экспорте макета сетка и линейки могут направлять разработчиков в процессе верстки. Для корректной передачи разметки:
- Сделайте скриншот рабочей области с активной сеткой (Shift + Command/Ctrl + ')'
- Добавьте слой с полупрозрачной сеткой поверх основного макета
- Экспортируйте измерительную линейку отдельным файлом через горячий экспорт (Ctrl + E)
Форматы экспорта с сохранением разметки:
- PDF - сохраняет все направляющие и сетку
- SVG - позволяет перенести векторную r-сетку
- PNG с прозрачностью - для наложения поверх верстки
Рекомендации по подготовке файла:
- Сгруппируйте слои с сеткой в отдельный фрейм
- Укажите размеры колонок в комментариях
- Создайте отдельный артборд с образцами сетки
- Пропишите координаты ключевых точек направляющих
При передаче макета разработчикам приложите файл настроек сетки в формате .fig для точного воспроизведения разметки.
