Как сделать пункты в фигме

Создание пунктов в Figma — важный навык для точного позиционирования объектов, выравнивания элементов интерфейса и построения сеток. Пункты (или направляющие) помогают дизайнерам соблюдать единые отступы, масштабировать макеты и ускорять процесс работы. Они особенно полезны при создании адаптивных макетов, карточек, форм и сложных компонентов.

Основные виды пунктов в Figma

В Figma существует два основных типа направляющих: локальные и глобальные. Локальные пункты работают только внутри одного фрейма, а глобальные — во всём файле, охватывая все страницы и холсты. Выбор типа зависит от задачи: если вы проектируете отдельный компонент, достаточно локальных; если строите систему дизайна — подойдут глобальные.

Глобальные пункты создаются из линеек, расположенных по краям холста. Их можно использовать для задания общей сетки макета: например, 12-колоночной системы с отступами 24px. Локальные — привязаны к конкретному фрейму и часто применяются для внутренней структуры, например, чтобы выровнять заголовок, текст и кнопку внутри карточки.

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

Когда использовать каждый тип

• Глобальные пункты — для создания единой системы отступов, ширины контента (например, 1440px) и вертикальной ритмики по всему проекту.
• Локальные пункты — для детальной разметки внутри компонентов, модальных окон, форм или каруселей.
• Сетки (Layout Grids) — для построения колоночных макетов, мобильных интерфейсов и автоматизации позиционирования через автолейаут.

Как создать пункты: пошаговая инструкция

Процесс создания пунктов прост, но требует понимания контекста. Ниже — подробная последовательность действий для разных случаев.

Создание глобальных пунктов

1. Убедитесь, что включены линейки: View → Show Rulers (Ctrl+R / Cmd+R).
2. Нажмите и удерживайте клавишу Ctrl (Windows) или Cmd (Mac).
3. Кликните на горизонтальную или вертикальную линейку и потяните в сторону рабочей области.
4. Отпустите мышь, когда направляющая окажется в нужном месте.
5. Повторите для дополнительных пунктов.

После создания пункты можно перемещать, привязывая к краям объектов. Figma автоматически показывает отступы в пикселях, если включена опция «Smart Selection».

Создание локальных пунктов

1. Выделите фрейм, внутри которого нужно создать направляющие.
2. Кликните правой кнопкой мыши по фрейму и выберите Add guide.
3. Или перетащите из линейки, как в случае с глобальными, но только внутри границ фрейма.
4. Локальные пункты появятся только при активации этого фрейма.

Быстрые сочетания клавиш

• Ctrl+R / Cmd+R — показать/скрыть линейки.
• Shift + перетаскивание пункта — ограничить движение по одной оси.
• Alt + клик по пункту — быстро скопировать его с тем же отступом.
• Ctrl+G / Cmd+G — сгруппировать выделенные объекты (не относится к пунктам, но полезно при работе с макетом).

Настройка и управление направляющими

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

Блокировка и разблокировка

По умолчанию пункты можно случайно сдвинуть. Чтобы этого избежать:

• Кликните правой кнопкой по направляющей.
• Выберите Lock Guide.
• Заблокированный пункт станет полупрозрачным и не будет двигаться при взаимодействии.

Разблокировать можно тем же способом. Рекомендуется блокировать ключевые направляющие — например, край контентной области или центральный акцент.

Скрытие и отображение

Если направляющие мешают визуальному восприятию:

• Перейдите в меню View → Guides → Hide Guides (Ctrl+; / Cmd+;).
• Чтобы снова показать — используйте ту же комбинацию.
• Также можно временно скрыть только локальные или только глобальные через подменю.

Удаление и редактирование

• Чтобы удалить один пункт — кликните по нему и нажмите Delete.
• Для массового удаления: выделите несколько (Shift+клики), затем Delete.
• Чтобы изменить положение — просто перетащите.

Практические примеры использования пунктов

Пункты — не просто вспомогательный инструмент, а основа профессионального дизайна. Рассмотрим три реальных кейса.

Создание 12-колоночной сетки

• Откройте новый фрейм шириной 1440px.
• Включите линейки и перетащите вертикальные направляющие, чтобы разделить ширину на 12 равных колонок (по 80px каждая) с отступами 24px между ними.
• Добавьте внешние отступы (gutters) по 24px слева и справа.
• Сохраните как глобальные пункты — они будут доступны на всех страницах.

Выравнивание элементов в карточке продукта

• Создайте фрейм 300x400px.
• Добавьте внутрь изображение, название, цену и кнопку.
• Проведите локальные направляющие: вертикальные — на расстоянии 16px от краёв, горизонтальные — с шагом 8px для отступов между элементами.
• Привяжите каждый элемент к направляющим, чтобы обеспечить единообразие.

Построение вертикальной ритмики

• Задайте базовый отступ — например, 8px.
• Создайте горизонтальные направляющие с шагом 8px по всей высоте экрана.
• Используйте их для выравнивания заголовков, абзацев, кнопок и других элементов.
• Это создаёт визуальную гармонию и улучшает читаемость.

Распространённые ошибки и как их избежать

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

Ошибка 1: Путаница между локальными и глобальными пунктами

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

• Решение: Перед созданием пункта убедитесь, что выделен нужный фрейм (для локальных) или ничего не выделено (для глобальных).
• Проверка: Локальные пункты исчезают за пределами фрейма, глобальные — видны везде.

Ошибка 2: Избыток направляющих

Слишком много пунктов затрудняет работу и визуально перегружает интерфейс.

• Решение: Удаляйте неиспользуемые направляющие. Оставляйте только те, что действительно нужны: края сетки, центр, ключевые отступы.
• Совет: Используйте цветовые метки (через плагины) или комментарии, чтобы структурировать важные направляющие.

Ошибка 3: Отсутствие блокировки

Случайное смещение направляющей может испортить весь макет.

• Решение: Блокируйте все основные направляющие сразу после создания.
• Автоматизация: Настройте плагин, который автоматически блокирует новые пункты.

Ошибка 4: Игнорирование привязки

Многие не используют привязку к направляющим, полагаясь на глазомер.

• Решение: Включите опцию Snap to guides в настройках View.
• Проверка: При перемещении объекта он должен «цепляться» за направляющие с характерным щелчком.

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

Анна также отмечает, что современные практики, такие как дизайн-системы и токены, не отменяют необходимости в направляющих. Напротив, они дополняют друг друга: токены задают значения, а пункты — визуальное воплощение этих значений на холсте.

Вопросы и ответы

Заключение

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

• Используйте глобальные пункты для общей сетки проекта, локальные — для компонентов.
• Всегда блокируйте важные направляющие, чтобы избежать случайных изменений.
• Включайте привязку (Snap to guides) для точного позиционирования.
• Следите за чистотой макета — удаляйте неиспользуемые пункты.
• Комбинируйте направляющие с layout grids для максимального контроля.