Меню

Как настроить линейки в фигме

Основы Figma. Часть 3. Фреймы. Сетки. Направляющие. Знакомство с компонентами

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

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

Фреймы. Сравнение с группами

Фреймы в другим программах называются артбордами (artboard). Но в Figma пошли своим путем и придумали уникальное название. И вполне резонно, так как фреймы обладают большими возможностями и гибкостью, чем артборды, например, в Sketch — вы не сможете поместить один артборд внутри другого – это невозможно.

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

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

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

  • Фрейм имеет размер и может иметь заливку цветом. В группах размер задается автоматически, на основе размера всех объектов, которые находятся внутри. Это отличие позволяет экспортировать изображения с отступами по краям, что полезно при сохранении иконок. В настройках фрейма можно найти большой список шаблонов размеров от всевозможных экранов устройств (популярных смартфонов, умных часов и планшетов) и до даже сторис Instagram или поста Facebook;
  • Каждый фрейм имеет свою систему координат. Координаты объектов внутри будут отсчитываться относительно верхнего левого края границы фрейма;
  • Фрейм способен обрезать свое содержимое, которое выходит за его рамки. То есть всё, что находится за границами фрейма будет скрываться, если опция Clip content включена. Такая возможность называется маской;
  • Фрейм может отображать разметку макета, а именно сетку, вертикальные и горизонтальные колонки, а также включать внутри себя направляющие. Эти инструменты предназначены для точного расположения и выравнивания объектов макета;
  • При изменении размеров фрейма можно указать, как себя будут вести объекты. Например, кнопка может прилипнуть к верхней части экрана и растягиваться по ширине. Эта возможность называется ограничиелями (constraints).

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

Создание фрейма. Изменяем размер и заливку

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

Далее самое интересное. В правой панели, подобно прямоугольнику уже будет задан цвет заливки фона (раздел Fill). Вы можете изменять размер фрейма старыми способами, потянув за край или задав точный размер в полях W (Width) и H (Height). Но теперь у нас есть новое выпадающие меню с шаблонами размеров в левом верхнем углу панели свойств – Frame. Просмотрите, какие шаблоны там есть и попробуйте применить хотя бы несколько из них.

Как поместить объекты внутрь фрейма

Есть несколько простых способов:

  • Выделить и перетащить все объекты внутрь границ фрейма;
  • Выделить, вырезать нужные объекты (Command + X на macOs или Ctrl + X на Windows) и вставить (Command + V на macOs или Ctrl + V на Windows) после того, как выделили фрейм.

После этих манипуляций объекты окажутся внутри фрейма, что будет видно по панели слоев, ведь вставленные объекты будут отображаться со смещением (как и в группах). Попробуйте выделить объект внутри фрейма, обратите внимание на значение координат X и Y – они изменились, ведь теперь левый верхний угол фрейма – это новое начало координат.

Простая маска – обрезаем содержимое фрейма

Используя опцию Clip content в панели свойств, можно обрезать содержимое по прямоугольной границе, которая зависит от ширины (параметр W – Width) и высоты фрейма (параметр H – height). Подобный прием называется маской. Таким образом можно скрыть часть объектов используя форму другого объекта, в нашем случае это фрейм и прямоугольная форма. Вот вам аналогия: вырезав квадратное отверстие в бумаге и наложив ее на фотографию вы получите аналог маски в реальном мире.

Добавление сетки

Фреймы позволяют отображать вспомогательные сетки, которые можно гибко настраивать для облегчения выравнивания и позиционирования объектов. Для этого:

  1. Выделяем фрейм;
  2. Кликаем по плюсику + напротив раздела Layout Grid – отобразится сетка со стандартными настройками красного цвета с шагом в 10 пикселей;
  3. Нажимаем на иконку слева от надписи Grid (10px), чтобы настроить сетку. В выпадающем окне можем задать шаг сетки (Size), цвет линий (Color) и прозрачность;
  4. Сетку можно временно скрыть или удалить, нажав на иконку глаза или минус соответственно справа;
  5. Можно добавить несколько сеток разных цветов внутри одного фрейма при надобности.
  6. Чтобы временно скрыть сетки на всех фреймах нажмите Ctrl + G. Повторите комбинацию клавиш, чтобы показать их вновь.

Сетку можно использовать в качестве помощника для отрисовки форм, баннеров, иллюстраций. Ее главная прелесть заключается в том, что при перемещении объектов они как бы «приклеиваются» к линиям сетки, тем самым помогая вам установить объект в нужной позиции. С масштабированием такая же история – границы объекта прилипают к направляющим сетки.

В целом сетки используются достаточно редко. А вот колонки, о которых пойдет речь дальше – постоянно.

Добавление колонок и рядов

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

  1. Выделяем фрейм;
  2. Кликаем по плюсику + напротив раздела Layout Grid – отобразится такая же стандартная сетка;
  3. Нажимаем на иконку слева от надписи Grid (10px). В выпадающем окне нажимаем на Grid в левом верхнем углу;

В выпадающем меню выбираем Columns. Сразу после этого кроме цвета и прозрачности появится ряд новых параметров:

  • Count – количество колонок;
  • Type – тип построения колонок. Можно выбрать одну из опций: Left – колонки размещаются по левому краю, Right – по правому краю, Center – выравниваются по центру, Stretch – растягиваются по всей ширине фрейма;
  • Width – ширина колонки в пикселях. Этот параметр просчитывается автоматически если тип колонок выставлен в Stretch;
  • Offset – отступ слева если тип колонок выставлен в Left. Для типа колонок Right это отступ соответственно справа. Для типа Stretch это отступ с обеих сторон. Этот параметр просчитывается автоматически для типа колонок Center;
  • Gutter – расстояние между колонками.

Давайте настроим одну популярную сетку из фреймворка Bootstrap, которую часто используют разработчики при верстке веб-страниц. Для этого нам понадобится фрейм шириной в 1440 пикселей и высотой в 900 пикселей, что соответствует размерам экрана типичного ноутбука. Сама сетка в ширину составляет 1140 пикселей и состоит из 12 колонок. Ширина каждой колонки – 65 пикселей, а расстояние между ними – 30 пикселей.

Подобно сетке объекты будут прилипать к границам колонки, что очень удобно для быстрого выстраивания примитивов в одну линию и их выравнивания в блоках.

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

Направляющие и линейка

Всевозможные виды сеток прилично облегчают работу дизайнера, но существует еще более полезный инструмент – направляющие. Это вертикальная или горизонтальная линия, которую дизайнер может выставить в произвольном месте. Таких линий может быть много и вы можете воссоздать любую сетку используя лишь направляющие. К этим линиям будут прилипать объекты, как и к сеткам. Чтобы создать направляющую:

  1. Выделяем фрейм, если вам нужна линия именно внутри фрейма;
  2. Включаем линейку с помощью комбинации клавиш Shift + R. Она появляется сверху и слева по краям рабочей области и показывает границы выделенных объектов в пикселях. Запомните, что направляющие отображаются только с включенной линейкой;
  3. Кликаем и зажимаем левую кнопку мыши внутри верхней или левой линейки, чтобы создать горизонтальную или вертикальную направляющую соответственно;
  4. Тянем курсор к центру экрана. Как только вы выйдете за границы линейки на рабочей области появится направляющая. Тяните ее в нужную вам точку;
  5. Отпускаем левую кнопку мыши, чтобы зафиксировать позицию направляющей;
Читайте также:  Как настроить hydra бота в дискорде

Чтобы изменить положение направляющей, перетащите ее в новую позицию.

Чтобы удалить направляющую, нужно ее выделить, кликнув по ней. Выделенная линия закрасится в синий цвет. Далее нажимаем кнопку Delete на клавиатуре. Также можно просто перетащить направляющую на область линейки и она тоже будет удалена.

Чтобы временно скрыть все направляющие скройте линейку с помощью клавиш Shift + R.

А теперь важный момент. Как вы помните из предыдущего урока, предварительно выделив любой объект и зажав кнопку Option в MacOs или Alt в Windows, можно увидеть точное расстояние в пикселях, подведя курсор к другому объекту. Так вот, этот же прием работает и для направляющих, что бывает очень кстати. Давайте посмотрим, как это выглядит на практике (приклеивание объектов к направляющим и подсказки о расстоянии до направляющих):

Примеры использования фреймов

На этом перечень возможностей фреймов не заканчивается, но прежде чем продолжить, давайте посмотрим несколько типичных примеров их использования. Итак, фреймы часто используются, как контейнеры для:

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

Поведение содержания фрейма при изменении размера

Если объект находится внутри фрейма, то вы можете указать, как ему себя вести при изменении размеров фрейма. Эта возможность называется constraint (читается констрэйнт), что переводится, как ограничитель. Он задает, поведение при изменении размера фрейма:

  • Позволяет закрепить позицию объекта по вертикальной или горизонтальной стороне фрейма. В таком случае при растягивании фрейма он сохранит свой размер;
  • Или растянет объект по ширине и/или высоте фрейма.

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

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

Первое знакомство с компонентами

Компоненты – это специальный вид объектов, которые создаются на основе фреймов для построения часто используемых элементов интерфейса. Звучит сложно, но по сути с помощью компонентов создают шаблоны кнопок, выпадающих меню, навигации и прочего. Чтобы в дальнейшем не рисовать каждый раз, к примеру, кнопку, вы копируете компонент кнопки, выставляете нужный размер и цвет, меняете текст – готово! Наборы таких компонентов в терминологии Figma называются библиотекой компонентов. А у дизайнеров они называются UI Kit (читается юай кит).

Зачем же так все усложнять? На самом деле компоненты способны сэкономить десятки часов работы. Представьте себе ситуацию: у вас есть 50 экранов веб-приложения. На каждом из них есть кнопки. Вдруг вам прилетает правка «скруглить все кнопки». Если дизайн создавался с помощью компонентов, то вам будет достаточно изменить лишь родительский компонент (шаблон кнопки), а все остальные изменения произойдут автоматически. Если все делалось без компонентов, то вам прийдется вручную изменить каждую кнопку.

В этом и заключается вся мощь компонентов. А ограничители (Constraints) играют здесь одну из ключевых ролей.

Компонентам у нас будет посвящен отдельный урок, не стоит пугаться их сложности. Более того, у компонентов есть и другие особенности, которые мы будем постепенно затрагивать. Сейчас мы лишь подготавливаем фундамент для дальнейшей работы. А пока, чтобы понять пользу компонентов, посмотрите на пример ниже. Сверху находится компонент-родитель (шаблон), а внизу три компонента-ребенка, которые наследуют его свойства. В самом низу находится кнопка, сделанная на основе обычного фрейма. Изменяя родительский компонент, мы автоматически меняем всех «детей».

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

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

Виды ограничителей (Constraints)

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

  • Top – объект прилипает к верхнему краю фрейма;
  • Center – объект центрируется по высоте фрейма;
  • Bottom – объект прилипает к нижнему краю фрейма.
  • Left – объект прилипает к левому краю фрейма;
  • Center – объект центрируется по ширине фрейма;
  • Right – объект прилипает к правому краю фрейма.

Я создала 9 фреймов (кнопок) со всеми возможными комбинациями вышеописанных ограничителей. Посмотрите, как ведут себя объекты внутри фреймов при масштабировании.

Существует еще несколько видов ограничителей:

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

Подгонка размера фрейма под содержимое

Если нужно обрезать фрейм строго по границам его объектов, то достаточно нажать соответствующую кнопку в панели свойств:

Изменяем ориентацию фрейма

Фрейм можно быстро выставить в портретную или альбомную ориентацию. Другими словами вы можете присвоить высоте фрейма значение ширины или наоборот:

Страницы и файлы

Кроме фреймов в Figma существуют структурные единицы и высшего порядка:

  • Страницы – содержат фреймы внутри себя;
  • Файлы – состоят из страниц;

Все это время мы работали внутри единственной страницы одного файла. Чтобы создать новую страницу:

  • Кликаем на название текущей страницы Page 1 в правом верхнем углу левой панели, чтобы показать список всех страниц;
  • Кликаем на плюсик +, чтобы создать новую страницу;
  • Вводим название новой страницы;
  • Нажимаем Enter, чтобы сохранить название.

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

  • Copy Link to Page – скопировать ссылку на страницу в буфер обмена, чтобы поделиться;
  • Duplicate Page – сделать копию;
  • Delete Page – удалить. Эта команда доступна только если у вас есть хотя бы две страницы;
  • Rename Page – переименовать страницу. Как и со слоями, работает двойной клик.

Посмотрим, как выглядит работа со страницами на практике:

Чтобы создать новый файл, нужно:

    Перейти к списку файлов, нажав на иконку главного меню в верхнем левом углу в браузерной версии Figma, а потом выбрав первый пункт в выпадающем меню Back to Files;

Оказавшись на главном экране слева вы увидите список разделов:

  • Ваше имя – самый первый пункт сверху. Здесь вы можете настроить свой профиль: изменить отображаемое имя, почтовый адрес и пароль. Остальные настройки сейчас неважны;
  • Search – поиск по проектам по названию. Когда у вас будет очень много файлов, этот раздел может оказаться полезным;
  • Recent – недавно открытые файлы. Все упорядочено в хронологическом порядке. Сверху недавно использованные файлы;
  • Community – наработки сообщества: шаблоны, плагины и другие полезности. О них поговорим в следующих уроках, еще слишком рано;
  • Drafts – полный перечень всех файлов, с которыми вы работали.
  • Кликаем по разделу Drafts. Появится список всех файлов;
  • Нажимаем на плюсик + в правом верхнем углу или напротив Drafts. Будет создан новый файл с названием Untitled;
  • Сделайте двойной клик по названию файла сверху по центру, введите новое название и нажмите Enter, чтобы подтвердить;
  • Готово! Вы только что создали новый файл.
  • Читайте также:  Как настроить мышь x7 xl 747h

    Чтобы выбрать другой файл, достаточно назад перейти к списку файлов в раздел Drafts и выбрать интересующий файл в правой панели.

    Организация страниц

    Давайте посмотрим, из чего состоит типичный проект. В самом начале это единственная Page 1, но по мере разрастания появляются страницы с такими названиями:

    • User flow name – название юзер флоу/сценария. То есть каждый отдельный сценарий размещается на отдельной странице. В некоторых случаях можно разместить несколько сценариев на одной странице, если они похожи (например, сценарии регистрации, сброса пароля, входа на сайт);
    • References/Moodboards – референсы от клиента и созданные на их основе мудборды. Также здесь может разместится входящая информация по проекту;
    • Thumbnail – страница с обложкой проекта, которая отображается на превьюшке в разделе Drafts/Recent. Чтобы ее применить нужно создать фрейм размером в 1920х960 пикселей, отрисовать саму обложку и в выпадающем меню по правому клику на фрейме выбрать Use as Thumbnail;
    • Components – страница с используемыми компонентами. Часто приходится импортировать целые библиотеки компонентов, в таком случае пишется название библиотеки и ее версия. Например Ant Design UI Kit (1.2) (ant.design v4 update) (Light Theme);

    У каждого дизайнера свои правила и привычки именования и структурирования страниц, строгих догм здесь нет. Я лишь показала, как это выглядит в некоторых случаях у меня. Другой пример: создают страницу UI с кучей экранов (фреймов) финального дизайна и UX – для всех вайрфреймов.

    Иерархия проекта

    Обычно хватает одного файла, но на больших проектах иногда по отдельным файлам распределяют дизайн по платформам. Например: Web, Mobile, Desktop. Иногда в отдельный файл выносят библиотеку компонентов, но учтите, что в таком случае вам понадобится платная подписка.

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

    Домашнее задание

    1. Выберите сайт на свое усмотрение и отрисуйте его шапку (хедер), подвал (футер) или любую другую его часть с использованием ограничителей (Constraints). Ваша задача настроить содержание фрейма таким образом, чтобы часть элементов прилипала к левой стороне, а другая часть к правой. Например, логотип может использовать ограничители Top и Left. Правильно выполненное задание должно содержать по фрейму для каждой части сайта (отдельный фрейм для хедера, отдельный фрейм для футера и так далее). А уже все эти фреймы должны находиться внутри еще одного фрейма (дизайна сайта);

    Создайте 9 кнопок со всеми возможными комбинациями перечисленных ограничителей: top, center, bottom, left, right. Пример смотрите в разделе Виды ограничителей (Constraints) этого урока. Каждая кнопка должна находиться внутри отдельного фрейма и содержать как минимум заливку и текст;

    Нарисуйте форму обратной связи. Там должны быть поля «Имя», «Email», «Сообщение» и кнопка «Отправить». Поля должны тянуться вместе с формой, когда изменяем ее ширину. Подсказка: пригодится ограничение left & right. Сделайте отдельный фрейм для формы обратной связи.

    Чтобы проверить эту домашку мне понадобится доступ к файлу Figma с возможностью вносить правки, чтобы посмотреть на структуру фреймов и выставленные ограничители. Для этого убедитесь, что вы выбрали опцию can edit напротив Anyone with the link. Далее нажимаем на Copy link и присылаем мне в директ. Пожалуйста в дальнейшем все домашки присылайте с такими настройками. Если забыли, о том, как поделиться файлом писала в этом уроке.

    Выводы

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

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

    Источник

    

    Как в Figma измерить расстояние от объекта до другого объекта

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

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

    Линейку можно включить из меню View > Rulers, либо сочетанием Shift + R.

    Включение линеек из меню

    Чтобы поместить линию на макет, надо перетянуть зажатую мышь с линейки в область макета. А чтобы удалить линию, надо перетянуть ее обратной в область линейки.

    Видео: линейки в Figma

     
    
    Тег video не поддерживается вашим браузером

    Как измерить расстояние между элементами

    Чтобы измерить расстояние, следуйте простым инструкциям:

    1. Выделите первый элементы
    2. Зажмите alt (Windows) / Option (Mac)
    3. Наведите курсор на другие элементы

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

    Видео: расстояния между объектами в Figma

     
    
    Тег video не поддерживается вашим браузером

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

    Расстояние X и Y

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

    В эти поля вы можете вручную вписать значения, но, кроме того, Фигма умеет считать простые математические выражения. Вы можете задать X = 100+500, а Фигма сама посчитает финальное значение 600. Это удобно, если вы располагаете несколько элементов с не «круглыми» значениями длин и высот.

    Источник

    Сетка в фигме: как включить, сделать, убрать, настроить сетку в 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).

    Источник

    Сетка в Figma Направляющие в Фигме

    В Фигме сетка уже вшита в систему и не нужно ничего докачивать, как это было с одной очень известной программой. Тут все под рукой. К тому же сетка у нас не в виде отдельного слоя, который может потеряться, а существует, как отдельная структура сайта.

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

    Сетка в Figma

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

    Кликаешь + и видишь настройки. По умолчанию создается именно сеточка с шагом в 10 пикселей. К слову сказать, любые объекты в Фигма, если ты их будешь двигать стрелочками, двигаются на 1 пиксель, а если будешь зажимать при этом Shift то двигаться они будут на 10 пикселей. Так что, если поменяешь тут значение на какое-то другое ( некоторые любят ставить размеры 8 и в этом есть разумное зерно) то придется изменить и настройки перемещения объекта с шифтом на 8. Делается это вот тут в меню

    Как ты понимаешь, нужно поставить одинаковый шаг сетки и Nudge Amount, чтобы было удобнее перемещать объекты и они всегда были выровнены, как нужно, ну а если ты любишь работать в 10 пиксельной вселенной, то ничего отдельно настраивать не нужно.

    Колонки в Фигме

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

    У нас тут такие настройки:

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

    Width — ширина колонки (при выбранном Type Stretch задать ширину колонки не получится — только межколоночное расстояние)

    Gutter — межколоночный отступ ( он всегда у нас будет неизменным, на то это и колонки)))

    Margin — отступ сетки от правого и левого края макета, в случае колонок, если ты настраиваешь горизонтальную сетку, то Margin будет отодвигать твои строки сверху и снизу. Теперь давай рассмотрим, что же у нас кроется в выпадающем списке Type

    Stretch– тянущаяся или резиновая сетка. Колонки растягиваются на всю ширину фрейма. Можно задать только межколоночное расстояние, ширина такой колонки будет подстраиваться под ширину фрейма. Очень крутая штуковина для создания резиновый макетов и адаптива. Можно задать определенный отступ справа и слева, если говорим о колонках.

    Center–Сетка по центру макета, можно настроить ширину самой колонки, но при этом при изменении ширины фрейма ширина сетки и расстояния между ними будет неизменной.

    Left–тут все и так понятно.

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

    Включить-Выключить сетку на Windows Ctrl+Shift+4. На Mac Cmd+g

    Колонки bootstrap 4 Figma

    Как создавать колонки разобрались, теперь давай создадим модульную систему сеток под бутстрап 4 в Фигме. Делается это очень просто. Создай фрейм, любой, какой тебе нравится. Я создал для примера с шириной 1920. Мы знаем, что ширина рабочей области в bootstrap 4 для десктопа составляет 1140 пикселей, (!)30рх по краям контейнера я не учитываю. Поэтому я просто создам прямоугольник длиной 1140 и центрую его во фрейме.

    Место, где у нас будет сетка выбрали, теперь давай создадим ее, родимую… по номенклатуре ширина колонки бутстрап не указана, зато есть расстояние между ними 30. Создать ручками в режиме Center такую сетку невозможно. Поэтому, создаем модульную сетку bootstrap 4 в figma по средствам Stretch, который примет любую ширину колонки. Просто задаем нужные параметры в настройках и все. Вот и эти параметры: 12 колонок с межколоночным расстоянием в 30 пикселей. Тут все понятно, а вот как быть с марджином? То же проблем никаких нет. Просто меряешь расстояние от краев прямоугольника до краев твоего фрейма и такой выставляй марджин. В моем случает это 390. Если что — посмотреть расстояние прямоугольника до краев фрейма можно при нажатом Alt

    Теперь сеточка становится просто идеально, как нам и нужно. Точно так же можно создать и под другие разрешение, но не беспокойся — я уже все сделал за тебя и скачать модульную сетку bootstrap 4 в figma можешь тут. Пользуйся на здоровье. Там и под десктоп и под планшет, все есть.

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

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

    Линейка в Figma

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

    Странно как-то получается… зачем нужны и модульные сетки из колонок с кучей настроек и направляющие линейки в Фигме? На самом деле ничего странного тут нет. Линейки — это просто линейки по которым ты ровняешь блоки, а Layout grid Figma работают в тесной связке с constraints, что позволяет тебе быстренько создавать адаптивы.

    Подробнее о констрейтс читай тут.

    Система сеток Bootstrap 4 в figma

    Источник