В этом уроке разберем инструмент «Сетка» в фигме (Figma). Вы узнаете как её включить, убрать и настраивать для дизайна сайтов. Также я поделюсь с вами готовыми шаблонами с сетками, которые вы можете использовать в своих проектах.
Как сделать сетку в фигме
Чтобы сделать сетку в фигме выберите фрейм и в правой панели напротив надписи «Layout grid» нажмите на иконку плюса. Появится сетка в виде клеток размерами 10 на 10 пикселей.
Как настроить сетку в фигме
Чтобы настроить сетку в фигме нажмите в правой панели на иконку сетки. В появившемся окне вы сможете изменять размеры, цвет и прозрачность сетки. Также делать сетку в виде горизонтальных или вертикальных колонок.
Чтобы задать колоночную сетку, вместо значения «Grid» (сетка), выберите надпись «Columns» (колонки или столбцы).
Если хотите чтобы колонки были вертикальными, то следует задать значение «Rows» (что переводится как строки, ряды).
Как сделать сетку из 12 колонок в Figma
Чтобы сделать сетку из 12 колонов в Figma, выберите фрейм. Справа нажмите на иконку сетки, затем в значении «Count» выберите цифру «12» из списка. Таким образом вы зададите 12 колонок.
Сетку можно размещать по центру, если внизу надписи «Type» поставить «Center». По умолчанию стоит «Stretch». В этом случае сетка будет растягиваться на всю ширину.
Если хотите сделать сетку справа, то выберите из списка «Right».
Если хотите, чтобы сетка быра размещена в левом краю, то установите значение «Left».
Чтобы изменить ширину колонок, задайте значение в пикселях внизу надписи «Width» (ширина). Например я ставлю 80 пикселей. В этом случае сетка из 12 колонок будет иметь ширину 1180 px. Ширина фрейма 1920 px для настольных компьютеров.
Если хотите добавить новую сетку поверх первой, то снова нажмите на плюс в правой панели, напротив надписи «Layout grid».
Как удалить сетку в фигме
Чтобы удалить не нужную сетку в фигме, нажмите на иконку минуса, напротив той сетки, которую хотите удалить.
Как создать стиль сетки в фигме, чтобы использовать её повторно
Для создания стиля сетки, выберите фрейм, где есть сетка и справа, напротив надписи «Layout grid» нажмите на иконку с четырьмя точками. Появится всплывающее окно. Задайте имя стиля (например 12 колонок).
Чтобы использовать сетку повторно, выберите новый фрейм, затем нажмите на иконку с четырьмя точками в правой панели, напротив надписи «layout grid» и выберите созданный ранее стиль.
Как влючить и отключить сетку в фигме
Чтобы включить или отключить сетку в фигме нажмите на комбинацию горячих 3 клавиш «Ctrl + Shift + 4» для Windows и «Ctrl + G», если у вас операционная система Mac Os.
Шаблоны сеток в 12, 9, 6, 3 колонки для Figma.
Какие сетки использую лично я в своей работе? Специально для этой статьи я сделал шаблоны сеток. Вы можете дублировать этот файл по ссылке, чтобы посмотреть какие сетки и размеры фреймов я использую при создании дизайна сайтов (Landing Page).
Какие размеры фреймов с сетками я использую в фигме?
Хочу поделиться размерами своих сеток, которые использую. Мне удобно с ними работать и адаптировать дизайн для мобильных устройств с их помощью. Можете использовать другие сетки, но мой вариант тоже рабочий. Берите на вооружение.
Сетка в фигме в 12 колонок для компьютера (десктопа)
Ширина фрейма для компьютера (десктопа) — 1920 px. Я использую сетку в 12 колонок. Размеры столбцов 80 px. Расстояние между колонками — 20 px. Размер 12 колонок получается 1180 px.
Сетка 9 колонок для планшетов и мобильных устройств.
Далее идет фрейм с 9 колонками для планшетов и мобильных устройств. Таким образом удобно перестраивать элементы дизайна, которые у меня в 12 колоночной сетке. Здесь ширина фрейма — 1180 px. Аналогично ширине 12 колоночной сетки. 9 колонок. Ширина колонки также 80 px. Разрыв между колонками 20 px. Ширина сетки и рабочая область, где размещаю контент 880 px.
Сетка 6 колонок для мобильных устройств
Размеры фрейма для сетки с 6 колонками — 880 px. Количество столбцов 6. Ширина столбца 80 px, разрыв между столбцами 20 px. Ширина сетки из 6 колонок составляет 580 px.
Сетки из 3 колонок для мобильных устройств
Ширина фрейма — 446 px. Ширина одной колонки 80 px. Расстояние между колонками 20 px. Ширина 3 колонок для мобильных устройств — 280 px.
Заключение
Итак, в этом видео вы узнали про инструмент «Сетка» в фигме (Figma).
P.S. Если хотите получить бонусные материалы по быстрому созданию дизайна сайтов в Figma, то переходите по этой ссылке.
Автор статьи: Владимир Чернышов
P.P.S. Проект и автор не связан с компанией Figma (Not affiliated with Figma).
#Руководства
- 16 июл 2021
-
0
Рассказываем, как её настроить и использовать сразу в нескольких макетах.
Иллюстрация: Meery Mary для Skillbox
Редактор. Пишет про дизайн, редактирует книги, шутит шутки, смотрит аниме.
Сетка помогает выровнять макет, и в Figma ей пользоваться очень удобно. Читайте, как включить модульную сетку, определиться с её форматом и выбрать подходящие свойства.
Модульную сетку можно включить только у фрейма. Если ваш макет свёрстан в группе, её можно быстро превратить в фрейм:
- Выделите свою группу на панели слоёв.
- Нажмите на неё правой кнопкой мыши и выберите Frame Selection или нажмите Alt + Ctrl (⌘) + G на клавиатуре. Теперь на макет можно наложить модульную сетку.
Чтобы включить сетку, выделите фрейм и на панели настроек нажмите на плюсик в блоке Layout Grid.
Grid — простая пиксельная сетка в клетку. По умолчанию Figma включает именно её с шагом в десять пикселей:
Columns — колонки. Делит макет вертикально:
Rows — строки. Делит макет горизонтально:
Rows почти никогда не используют для вёрстки сайтов, так как добиться одинаковой высоты строки для разных экранов устройств невозможно:
Чтобы изменить формат сетки, нажмите на иконку .svg)
в блоке Layout Grid и в верхнем углу появившегося меню укажите нужный формат.
Сетки можно комбинировать между собой. Чтобы это сделать, выделите ваш фрейм с макетом и нажмите несколько раз на плюсик напротив слов Layout Grid:
Каждую сетку можно отдельно настроить:
Color — цвет и непрозрачность сетки. По умолчанию Figma делает её красной, но, если этот цвет недостаточно контрастирует с макетом, его можно изменить.
Size — размер пиксельной сетки. Работает только в формате Grid.
Count — количество колонок или строк.
Gutter — отступы между колонками или строками.
Margin — отступ от сетки до края фрейма.
Type — тип сетки. Можно настроить только у Columns и Rows:
- Stretch ― сетка будет автоматически подстраиваться под ширину фрейма. Этот тип используют чаще всего, так как работать с ним проще.
- Center ― сетка выравнивается по центру. С этим свойством у сетки активируется параметр Width (ширина).
- Left и Right ― сетка выравнивается по левому или правому краю. Активируется параметр Width (ширина) и Offset (смещение относительно края).
Из сетки можно сделать шаблон стиля и использовать в других макетах. Это поможет выдержать единообразие всех страниц сайта или экранов приложений:
- Создайте сетку под ваш макет — настройте шаг в пиксельной сетке, укажите количество колонок и отступы между ними.
- Нажмите на иконку , а в появившемся меню — на плюс. Назовите свою сетку и нажмите Save.
- Чтобы использовать стиль, выберите любой фрейм, нажмите на иконку и в появившемся меню выберите свою сетку.
.svg)
, а в появившемся меню — на плюс. Назовите свою сетку и нажмите Save.
Они помогут выровнять макет, если вам не хочется создавать для него модульную сетку. Как пользоваться направляющими:
- Нажмите на иконку , перейдите в пункт View и нажмите Rulers.
- Чтобы добавить направляющую, поставьте курсор над появившейся линейкой слева или сверху, зажмите правую кнопку и тяните её туда, где она должна встать.
- Чтобы поменять положение линейки, поставьте курсор над ней, зажмите правую кнопку мыши и тяните её туда, где она должна встать.
, перейдите в пункт View и нажмите Rulers.
У направляющих есть интересная особенность — если они оказались внутри фрейма, то за его границы они выходить не будут. Это помогает держать макет опрятным и понятным:
Самоучитель по Figma
Самые полные и полезные инструкции, которые помогут вам освоить все функции графического редактора.
Научитесь: Профессия Графический дизайнер
Узнать больше
← Назад в «Блог»
Иногда фигма не показывает сетку. Давайте разбираться, что мы можем сделать.
1. Возможно, у вас не включен режим показа сетки, надо сначала проверить это. Сетка включается с помощью Ctrl+Shift+4.
2. Часто это бывает просто баг приложения, надо сделать перезагрузку страницы. Кликаем правой кнопкой по вкладке и нажимаем Reload Tab.
3. Перезапустить приложение.
Что если это не помогает
Недавно я делал проект с А4 форматом. Я выбрал А4 формат, но потом понял, что вертикальный не подходит мне для решения задачи. Я просто повернул его на 90% градусов и продолжил работу.
Потом в процессе работы мне понадобилась сетка, я включил её, а она не отобразилась. Перезагружал фигму, перезагружал вкладку, снова фигму и снова вкладку.
Решил проверить на другом фрейме — нам нём всё работает. Потом я заметил разницу — на неработающем фрейме есть угол наклона.
Проблема: не показывается сетка, хотя перезагружал вкладку и фигму.
Решение: проверь показ сетки и угол наклона у фрейма.
Поделиться
Отправить
Линкануть
Вотсапнуть
Подпишись на крутой канал о фрилансе
Я делюсь там фишками о фрилансе: деньги, клиенты, автоматизация, фриланс. Раньше это был закрытый материал с платным доступом. Сейчас он открыт. Иногда подписчикам будет открываться платные материалы.
Подписаться
Ссылки, отобранные для вас вручную ❤
← Назад в «Блог»
Вам также может быть полезно:
Как включить линейки в Figma
Auto Layout в Figma
В Figma можно добавить несколько видов разметки:
- Grid — сетка
- Columns — колонки/столбцы
- Rows — строки
Разметку можно добавить только к фрейму (не пытайтесь добавить разметку к группе).
Как добавить сетку или другую разметку
- Выделите фрейм
- В правом сайдбаре найдите Layout Grid
- Нажмите плюс
Настройки сетки
Вид сетки можно выбрать в выпадающем окне настроек сетки сверху.
Настройка Grid:
Size — расстояние между линиями
Color — цвет и прозрачность
Настройка Columns:
Count — количество столбцов
Type — выбор форматирования. Можно указать привязку к стороне, либо Stretch, и тогда сетка растянется по ширине
Width — ширина колонки
Margin (для типа Stretch) — отступы слева и справа в пикселях
Offset — смещение от стороны привязки (тот же Margin, но с одной стороны)
Gutter — расстояние между столбцами
Настройка Rows совпадает с настройкой Columns, но в вертикальных координатах.
Помогла ли вам эта статья?
Вы уже голосовали