сетка для мобильных приложений в фигма

Как работать с модульной сеткой в Figma

Рассказываем, как её настроить и использовать сразу в нескольких макетах.

Сетка помогает выровнять макет, и в Figma ей пользоваться очень удобно. Читайте, как включить модульную сетку, определиться с её форматом и выбрать подходящие свойства.

Как включить сетку

Модульную сетку можно включить только у фрейма. Если ваш макет свёрстан в группе, её можно быстро превратить в фрейм:

Чтобы включить сетку, выделите фрейм и на панели настроек нажмите на плюсик в блоке Layout Grid.

Редактор. Пишет про дизайн, редактирует книги, шутит шутки, смотрит аниме.

Форматы сеток

Grid — простая пиксельная сетка в клетку. По умолчанию Figma включает именно её с шагом в десять пикселей:

Columns — колонки. Делит макет вертикально:

Rows — строки. Делит макет горизонтально:

Rows почти никогда не используют для вёрстки сайтов, так как добиться одинаковой высоты строки для разных экранов устройств невозможно:

Чтобы изменить формат сетки, нажмите на иконку в блоке Layout Grid и в верхнем углу появившегося меню укажите нужный формат.

Сетки можно комбинировать между собой. Чтобы это сделать, выделите ваш фрейм с макетом и нажмите несколько раз на плюсик напротив слов Layout Grid:

Свойства

Каждую сетку можно отдельно настроить:

Color — цвет и непрозрачность сетки. По умолчанию Figma делает её красной, но, если этот цвет недостаточно контрастирует с макетом, его можно изменить.

Size — размер пиксельной сетки. Работает только в формате Grid.

Count — количество колонок или строк.

Gutter — отступы между колонками или строками.

Margin — отступ от сетки до края фрейма.

Type — тип сетки. Можно настроить только у Columns и Rows:

Стиль из сетки

Из сетки можно сделать шаблон стиля и использовать в других макетах. Это поможет выдержать единообразие всех страниц сайта или экранов приложений:

Направляющие

Они помогут выровнять макет, если вам не хочется создавать для него модульную сетку. Как пользоваться направляющими:

У направляющих есть интересная особенность — если они оказались внутри фрейма, то за его границы они выходить не будут. Это помогает держать макет опрятным и понятным:

Источник

Сетки в Figma. Часть 1

Oct 9, 2018 · 3 min read

Как работать с сеткой в Figma, ее настройки, и что такое Grid Style.

Сетка — один из важных инструментов при создании хорошего дизайна сайта. Она помогает нам дизайнерам, расставить все по местам и облегчает расчеты.

Figma дает нам очень удобный инструмент Layout Grid, которым очень легко пользоваться. Сочетанием горячих клавиш скрывать и отображать сетку (Ctrl+G), а также масштабировать её на разную ширину макета, что незаменимо при создании адаптивного дизайна.

Как создать сетку в Figma

Сетка может быть применима к фреймам или внтури компонентов. Так что в первую очередь нам необходимо создать фрейм и выделить его, кликнув по названию. Фрейм подсветится синей рамкой, в правой боковой панели Design появится пункт Layout Grid.

Добавляем новую сетку “+” и жмем на нее. Появляется окно настроек.

По ум о лчанию Figma создает сетку типа Grid. Она удобна при создании мобильных приложений. Нас, как веб-дизайнеров, интересует вторая вкладка Columns. Выбираем ее и видим следующие настройки.

Настройки

Ну это, я думаю вы и без меня прекрасно поняли.

🔥 Интересная и важная настройка это Type. В выпадающем списке можно выбрать:

💣 Можно создать много сеток в одном фрейме, если нужно!!

Бомба!

А теперь уберите от экранов слабонервных.

Выбираем Stretch сетку с нужными параметрами и начинаем изменить размер фрейма. Это же просто отрыв башки, извините. Сетка тянется вслед за макетом.

Растянули макет, подровняли элементы дизайна по новым размерам, бум, профит, новое разрешение макета готово!

Grid Style

Наверное вы заметили, что при наведении на пункт Layout Grid, рядом с плюсом, появляется еще одна иконка (4 точки). Суть в том что нашу сетку мы можем сохранить как стиль.

Жмем появившуюся иконку (после того как создали сетку или несколько сеток в вашем фрейме), даем название стилю, готово. Теперь при нажатии на иконку из 4х точек, в выпадающем меню появится ваш стиль сетки. Можете применять ее к любому новому фрейму.

Поностальгируем

А давайте вспомни как мы все раньше работали с сетками в Фотошопе.

В лучшем случае это был отдельный слой, который всегда терялся и его приходилось искать в куче других слоев, в худшем — сетка из направляющих, которая мешала выбирать и трансформировать элементы. Сколько проблем, неправда ли?

Figma избавляет нас от этой боли в заднице. Спасибо ей за это! Теперь мы можем больше времени уделять непосредственно дизайну, а не поиску слоя с сеткой.

Источник

Сетки в дизайне мобильных приложений

В этой статье я хотел бы поделиться с вами практическими советами и рекомендациями, которые могут быть полезны для создания сеток при разработке мобильных интерфейсов. Это всего лишь советы, а не нерушимые догмы.

Мы рассмотрим:

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

Оптимальное количество столбцов

«Каково оптимальное количество столбцов в сетке для мобильных устройств?» Я думаю, что это один из самых распространенных вопросов среди дизайнеров, которые начинают проектировать мобильный интерфейс. Наиболее распространенное заблуждение возникает, когда речь идет о небольшом размере экрана, ширина которого часто не превышает нескольких столбцов веб-интерфейса.

Cетка из 12 столбцов является одной из наиболее удобных сеток для мобильных интерфейсов. Она позволит вам разместить в строке как четное, так и нечетное количество элементов.

Недостаток сетки из 12 столбцов для мобильных устройств заключается в том, что ширина одного столбца настолько мала, что вы редко можете создавать элементы шириной в один столбец.

Если вы выбираете сетку из 2, 4 или 8 столбцов, помните о возможных проблемах с размещением нечетного количества элементов в строке.

? Совет

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

Согласованность в сетках поможет вам добиться: равных полей макета, одинаковых или пропорциональных отступов между столбцами и одинакового поведения при изменении размера самих столбцов.

Отступы и поля (Offsets)

Хорошо, мы определились с оптимальным количеством столбцов. Давайте определим отступ и поля сетки.

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

Если вы, как и я, являетесь поклонником сетки 8pt, я рекомендую вам выбрать размер отступов, пропорциональный модулю 8pt. Таким образом, горизонтальный и вертикальный ритм макета будет совпадать.

? Совет

Отступы должны быть пропорциональны полям макета. Это сделает сетку более согласованной, а также позволит вам легко размещать в ней элементы, например, карусели.

Фиксированные и адаптивные сетки

Как и в веб-дизайне, в мобильном дизайне вы можете использовать фиксированную или адаптивную сетку. Экраны смартфонов не так сильно отличаются друг от друга по ширине, поэтому оптимальным решением будет использование гибких сеток и растягивание столбцов по ширине.

Я рекомендую использовать адаптивный размер сетки, потому что такой подход позволит более эффективно использовать все пространство экрана смартфона, которое очень ограничено.

? Совет

Всегда начинайте с меньшего размера экрана в системе или с самого популярного. Например, на данный момент для iOS самый маленький экран – iPhone SE (320sp), а самый популярный – iPhone 8/7/6 (375sp). Далее просто растяните сами столбцы и оставьте одинаковые размеры межколоночных расстояний.

Этот метод подходит для большинства случаев, но, конечно, будут исключения из правил, когда нет необходимости растягивать содержимое столбца.

Точность расчета

В iOS большинство экранов имеют нечетную ширину и поэтому не делятся без остатка. В Android вы также можете найти экраны с подобными размерами.

В этом случае у вас есть несколько вариантов:

Компенсация в 1pt из-за различных размеров полей макета

Преимущества: оставшееся пространство можно разделить на нужное количество столбцов

Недостатки: разработчики должны всегда учитывать разницу в полях макетов, и, например, на iPhone SE (320sp) изменить нечетное поле на четное.

Оставьте точные значения для полей (например, 24pt) и используйте дробные размеры столбцов

Ваш внутренний перфекционист снова будет расстроен. Но на самом деле этот метод не так плох, как может показаться, из-за того, что современные экраны имеют более высокую плотность пикселей. Вряд ли кто-то из пользователей заметит наличие половины пикселей, появившихся в результате дробных значений.

Преимущества: сам алгоритм будет учитывать ширину столбцов, и вам не придется придумывать различные варианты сетки для разной ширины.

Недостатки: на данный момент создание такой точной сетки в графическом редакторе будет проблематичным. Например, Figma отказывается применять для столбцов дробные значения. Решением может быть сетка, созданная из прямоугольников внутри самого фрейма.

Сетка внутри отдельных элементов (модулей)

Как и при больших размерах, в вашем дизайне могут быть отдельные модули. В этом случае отдельный модуль (элемент) может иметь собственную сетку.

Здесь применяется то же правило, что и с дополнительными экранами. Необходимо соблюдать последовательность в сетке внутри модуля.

Строки и вертикальный ритм

Чтобы создать более крупные модули и поддерживать вертикальный ритм, вы должны разместить строки и межколонники между ними, которые соизмеримы с основным модулем (в моем примере пропорционально модулю 8pt)

Вывод

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

«Изучай правила, чтобы знать, как правильно их нарушить»

Какие приемы вы используете при создании сеток для мобильных интерфейсов? Пожалуйста, поделитесь в комментариях.

Подписывайтесь на Twitter автора Andrey Zhulidin

Источник

Создание Bootstrap-сетки в Figma

Всем привет, дорогие друзья! Сегодня мы рассмотрим создание сетки Bootstrap для Figma – одного из популярнейших UI-инструментов в настоящее время.

Сетка Bootstrap уже прочно вошла в стек инструментов для коммерческой разработки – она позволяет эффективно и быстро разрабатывать адаптивные сайты, значительно сокращает и оптимизирует время разработки на этапе Дизайн to Front-end. У нас уже были уроки по созданию сетки Bootstrap для различных графических программ, таких, как Photoshop, Adobe XD, Gimp, Inkscape и т.д. Ознакомиться с сопутствующими уроками и материалами:

Результат этого урока (готовые сетки Figma) вы можете скачать здесь:

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

Итак, для начала создадим новый документ. Обычно я создаю документ для нового проекта с паттерном «Desktop»:

Здесь у нас создается фрейм шириной 1440 пикселей. Это среднее универсальное значение. Конечно-же можно сделать макет шире или наоборот уже, но, в целом, начинать создание дизайна можно именно с такой ширины макета. Как я говорил ранее, сетка в Figma настраивается довольно-таки быстро и просто. Однако, что касается сетки Bootstrap, здесь есть подводные камни. Давайте разберемся подробнее.

На панели справа найдем «Layout grid» и добавим сетку со следующими параметрами:

Обратите внимание в «Type» мы указали «Center» – это значит, что мы без проблем сможем в дальнейшем управлять шириной макета. Например, если макет в результате окажется слишком широким, мы сможем его обрезать. И наоборот, если понадобится увеличить ширину макета, это также можно будет сделать без опасения, что нарисованный в системе сеток контент разъедется и дизайн придется переделывать.

Кроме 12-ти колоночной системы сеток Bootstrap, я также использую и горизонтальную разметку для соблюдения вертикального ритма. Давайте добавим еще одну сетку (Rows) и зададим следующие значения:

Обратите внимание, что «Type» мы можем указать как «Center» или «Top» – это самые популярные параметры горизонтальной сетки для веб-дизайна в Figma. Однако, я рекомендую использовать именно «Top», чтобы в процессе работы, если понадобится сделать макет выше, сетка не съехала и дизайн не пришлось переделывать.

В качестве «Gutter» и «Height» мы указали 10px. Это адекватный вертикальный ритм для большинства проектов, однако вы можете использовать более популярное значение 8px для этих двух параметров. Экспериментируйте.

Внимание! Здесь, стоит добавить, что если вы используете в работе стартер OptimizedHTML 5, то здесь уже определен наиболее оптимальный вертикальный ритм для дефолтного размера текста в 16px (line-height: 1.65). Эти значения являются результатом моего опыта работа над различными сайтами и являются наиболее адекватными для практически любого проекта.
Если вы планируете в дальнейшем использовать стартер OptimizedHTML 5 или общий межстрочный интервал в CSS line-height: 1.65 и дефолтный размер шрифта проекта 16px, то при создании дизайна следует устанавливать значения «Gutter» и «Height» для горизонтальной сетки в 13px:

На панели справа найдем секцию «Frame» в Figma, укажем высоту макета 3500 (H) и перейдем к созданию сетки для следующего разрешения.

При создании Bootstrap-сеток в Figma и других графических редакторах для других разрешений следует учитывать, что если для самого большого разрешения ширина фрейма свободная и может меняться, то на остальных разрешениях, которые меньше, ширина фреймов должна быть привязана к соответствующим значениям из документации Bootstrap (см. Bootstrap Grid options):

Соответственно, общая ширина фрейма для следующего разрешения составит 992px (Large):

Ширина одной Bootstrap-колонки для данного разрешения, при условии, что будет отражено 12 колонок, составит 50px. Остальные параметры Bootstrap-сетки такие-же, как у предыдущего фрейма:

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

Отлично! Переходим к созданию сетки для следующего разрешения. Создаем новый фрейм (по документации Bootstrap ширина 768px). В данном фрейме можно также отобразить 12 колонок. Зачастую, на таком разрешении адаптивный контент еще не «схлопывается», контент максимально вытягивается по высоте. Однако, в зависимости от задач, вы можете указать и другое количество колонок. Ширина одной колонки на таком разрешении составит 30px, если количество колонок указано 12. остальные параметры – как у предыдущих макетов.

Следующий размер фрейма 576px. На таком разрешении целесообразнее отобразить 6 колонок. Ширина одной колонки 60px. Остальные параметры и горизонтальная сетка как у предыдущих макетов.

И последний фрейм сделаем шириной 320px, отобразим 2 колонки, ширина колонки 130px. Остальные параметры как у предыдущих макетов. 320px – это минимальное разрешение в веб-дизайне, так как в настоящее время уже нет устройств, способных отобразить современный веб-контент меньше этого разрешения. Обычно на таком разрешении весь контент вытягивается в длинную ленту, однако иногда бывают случаи, когда необходимо разделить дизайн на колонки и на таком маленьком разрешении. Так как отступы в любом случае одинаковые по краям, можно сделать разлиновку на 2 колонки для того, чтобы в случае необходимости у нас была возможность воспользоваться колоночной системой.

Для того, чтобы воспользоваться созданной в данном уроке системой сеток в Figma, Скачайте архив с документом Figma, распакуйте и перетащите файл в список проектов Figma (Drafts). У вас появится новый документ «Bootstrap-Figma». Откройте его.

Любой из фреймов документа «Bootstrap-Figma» вы можете выделить, скопировать Ctrl + C и вставить Ctrl + V в новый проект и использовать в своей работе.

Источник

Сетка в фигме: как включить, сделать, убрать, настроить сетку в Figma

В этом уроке разберем инструмент «Сетка» в фигме (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).

Источник