Как использовать пиксельную сетку в Figma для выравнивания объектов?

Чтобы использовать пиксельную сетку (Grid) в Figma для выравнивания объектов, нужно выполнить следующие шаги: skillbox.ru

1. Включить сетку у фрейма. skillbox.ru Если макет свёрстан в группе, нужно превратить её во фрейм: skillbox.ru

• Выделить группу на панели слоёв. skillbox.ru
• Нажать на неё правой кнопкой мыши и выбрать Frame Selection или нажать Alt + Ctrl (⌘) + G на клавиатуре. skillbox.ru

1. Включить сетку. skillbox.ru Для этого нужно выделить фрейм и на панели настроек нажать на плюсик в блоке Layout Grid. skillbox.ru По умолчанию Figma включает сетку с шагом в 10 пикселей. skillbox.ru
2. Изменить формат сетки. skillbox.ru Для этого нужно нажать на иконку в блоке Layout Grid и в верхнем углу появившегося меню указать нужный формат. skillbox.ru

Некоторые свойства пиксельной сетки, которые можно настроить:

• Color — цвет и непрозрачность сетки. skillbox.ru По умолчанию Figma делает её красной, но если этот цвет недостаточно контрастирует с макетом, его можно изменить. skillbox.ru
• Size — размер пиксельной сетки. skillbox.ru Работает только в формате Grid. skillbox.ru
• Count — количество колонок или строк. skillbox.ru
• Gutter — отступы между колонками или строками. skillbox.ru
• Margin — отступ от сетки до края фрейма. skillbox.ru

Для работы с пиксельной сеткой также можно использовать плагин Pixel perfect, который позволяет мгновенно выравнивать объекты по сетке одним щелчком мыши. www.figma.com