Линейки и направляющие в Figma: как включить, скрыть или удалить
Чтобы включить линейку в Figma, нужно нажать сочетание клавиш Shift + R . Или выбрать в меню cоответствующий пункт (Main menu → View → Rulers). Появятся линейки сверху и слева. Отключить их можно аналогичным образом.
Как скрывать/показать направляющие в Figma
При наведении мышки на линейку кликаете и перетаскиваете направляющую в нужно место. Позже, при необходимости, ее можно нвыставить ее на другое место. Для этого нужно кликнуть на направляющей и не отпуская ее сместить на нужное значение. В области линеек отображается отображается значение смещения.
Они отображаются в виде тонких красных линий, и их можно перетаскивать. Чтобы удалить направляющие, просто выделите их и нажмите «Удалить». Направляющие также исчезнут, если вы скроете линейки.
Чтобы включить/выключить направляющие в Figma, нужно нажать то же сочетание клавиш Shift + R . При этом скрываются/отображаются и линейки и направляющие.
Теперь у Figma есть направляющие
Привет, народ! Меня зовут Ширли, я из новых летних стажеров в Figma. Мой первый проект здесь был занятным – команда поставила мне задачу создать направляющие (вместе с моим другом – инженером Кенриком Райли). С самого начала Figma наши пользователи просили нас об этой функции. Просьбы подавались утром, днем и вечером – 100 запросов только за последние шесть месяцев из самых разных мест, даже из Лагоса (Нигерия) и Буэнос-Айрес (Аргентина). Мы услышали вас, вот почему Figma поручили мне это дело, как только я начала свою стажировку. Для тех, кто не в курсе, направляющие – это горизонтальные и вертикальные линии, которые вы можете использовать для регулирования положения своих проектов. В отличие от слоев сеток, направляющие немного быстрее создавать и манипулировать ими. Чтобы увидеть направляющие, включите отображение линейки (главное меню → вид → показать линейки). Когда вы наводите курсор на вертикальные или горизонтальные линейки (которые закреплены сверху и сбоку холста), появится число смещения, и вы можете щелкнуть по нему, чтобы создать направляющую. Они отображаются в виде тонких красных линий и их можно перетащить на разные смещения – вы также можете щелкнуть несколько смещений на линейке, чтобы сразу задать несколько направляющих. Чтобы удалить направляющие, просто выделите их и нажмите “Удалить”, или перетащите их за пределы экрана. Направляющие также исчезнут, если вы отключите отображение линейки. Одна интересная функция: если вы перетащите направляющую во фрейм, она станет направляющей уровня фрейма. Это позволяет держать вашу рабочую область немного чище для тех из вас, кто собирается злоупотреблять направляющими. Направляющие работают только с фреймами верхнего уровня, поэтому, если вы перетащите фрейм с направляющими в другой фрейм, направляющие исчезнут. Если вы случайно измените положение направляющей на рабочей области, вы можете отменить это изменение с помощью сочетания клавиш command+z. Вы также можете подталкивать направляющую по пикселям клавишами со стрелками. Как вам направляющие в Figma? Нам бы хотелось услышать ваши мысли об этой функции, поэтому пишите нам на support@figma.com или оставляйте комментарии. И, если вам, как и мне, интересна стажировка в Figma или работа на полную ставку — ознакомьтесь с нашей страницей вакансий! Перевод статьи Shirley Miao
Топ коментарі (0)
Підписатися
Для подальших дій ви можете розглянути можливість блокування цієї людини та/або поскаржитися
Читати далі
Оновлення Figma: Dev Mode, змінні, просунутий auto layout, покращені прототипи та інше
Dinozavrix — Черв 22
Руйнуємо 4 міфи про дизайн-системи
Alex Bohitsoy — Квіт 19
Редизайн цифрових продуктів — головне, що потрібно знати
Наталія Самбір — Берез 29
Линейка и направляющие в Figma: как настроить и использовать
Это статья — инструкция о том, как пользоваться линейкой в фигме, выравнивать элементы относительно друг друга или других объектов с помощью направляющих.
- Как включить линейку
- Настраиваем линейку в Figma
- Когда используем линейку + пример
Как включить линейки?
Чтобы включить линейку в Figma, нужно нажать сочетание клавиш ⌨️ Shift + R или выбрать в меню cоответствующий пункт (Main menu → View → Rulers). Или включить их в панели быстрого доступа в правом верхнем углу.
Вариант 1
Нажимаем кнопку в левом верхнем углу на значок Figma и перейти в View и затем выбрать Rulers.
Вариант 2
Нажав в правом верхнем углу на цифры масштаба и выбрать Rulers.
Настраиваем линейки
Давайте разберемся, как пользоваться линейкой. Чтобы настроить направляющие, необходимо нажать на линейку и, не отпуская кнопку мыши, потянуть вправо (если линейка находится слева), или потянуть вниз (если линейка находится сверху). Далее можно выравнивать по линейке объекты.
Это достаточно удобно, так как объекты “прилипают” к линейке, и не нужно сильно целиться, чтобы выровнять их. (На видео показано, как настраивать линейки, и как ведут себя объекты).
Когда следует использовать направляющие?
Направляющие следует использовать, когда требуется выровнять элементы относительно друг-друга или какой-то линии/объекта. Но если вы еще не владеете инструментами Autolayout или Components, или заранее их не настроили, то на помощь придет этот, довольно простой в использовании инструмент — направляющие в линейке Figma.
И это очень важно, ведь если тексты или объекты размещаются на разной высоте и скачут относительно друг друга хотя бы на 1 пиксель, то дизайн смотрится не аккуратно. Часто заказчик не может сказать, что именно ему не нравится в макете, но интуитивно понимает: здесь что-то не так��
Это был обзор инструмента линейка в Figma, который поможет вам навести красоту в макете и упорядочить детали. До новых инструкций!
Правила построения модульной сетки в Фигме
Одним из важнейших инструментов любого web-дизайнера является модульная сетка, которая позволяет грамотно зонировать пространство, затрачивая на этом минимум времени и сил. Многие разработчики для создания сайта пользуется программой Figma, с помощью которой можно легко создавать прототипы сайтов и приложения, использовать иллюстрации и векторную графику. Зная, как правильно пользоваться в Фигме модульными направляющими, можно по максимуму использовать все ее преимущества.
Для чего задействуется модульная сетка в веб-дизайне
Любая модульная сетка определяет внешний вид будущего макета, а также задает места расположения на web-странице разных элементов, включая текст, иллюстрации, заголовки, кнопки, прочие информационные и графические объекты. Сетка в Фигме представляет собой систему непечатаемых горизонтальных, диагональных, а также вертикальных линий, проходящих по странице.
Шаблоны сеток облегчат работу любому web-дизайнеру
Как можно догадаться, модульная сетка представляет собой основу для любого дизайн-макета. Она также может состоять из простых геометрических фигур — модулей определенного размера, которые располагаются в требуемом порядке. С ее помощью можно лучше организовать пространство и подчинить элементы определенной последовательности. Между прочим, при помощи данного инструмента можно сделать пространство более объемным, что гарантированно улучшает восприятие сайта со стороны посетителей.
Особенности модульной сетки в Figma
В отличие от других программ, Фигма имеет дополнительные функциональные возможности. Благодаря этому обеспечивается гибкая настройка. Это открывает расширенные возможности для web-дизайнера, который может свободно настраивать ее под себя. Примечательно, что при желании здесь применяют не одну, а несколько направляющих, причем к разным фреймам, задавая видимость и глубину линий.
Панель настроек Layout Grid
Многоуровневость – весомый плюс сетки в Фигме, поскольку ее можно уверено применять к фреймам верхнего уровня, а также к фреймам, расположенным внутри компонентов. Используя разные типы модулей, в одном фрейме можно детально проработать дизайн и гармонично распределить разные элементы согласно выбранной схеме. При этом пользователь может даже задавать внешний вид, контролируя свет и уровень прозрачности, дифференцируя его под себя и свои предпочтения.
Основные типы модульных сеток в Фигме
Для лучшего понимания особенностей, рассмотрим их основные виды:
1. Uniform grid. Позволяет создавать серию одинаковых и равномерно распределенных полей по всей поверхности фрейма. Лучшим примером является тетрадный лист в клетку. При этом размер клеток указывает сам веб-дизайнер.
2. Column Grid. Делит макет вертикально, что позволяет получить «газетный» формат, актуальный для новостных сайтов.
Сетку можно задать по краю (левому/правому) или по центру
3. Row Grid. Делит макет горизонтально, причем также с возможностью задавать высоту по конкретному уровню индивидуально.
Сетка имеет гибкий фукнционал, давая возможность сдвига в сторону центра, верхнего или нижнего уровня
С помощью сетки можно контролировать положение и масштабирование текста на странице, выравнивая его наилучшим образом для комфортного восприятия посетителем. Она позволяет быстро и удобно выровнять макет, причем с визуальным контролем, прямо в режиме online.
Базовые сетки
Это обычные направляющие, основанные на базовых строках, с которыми работать очень легко. С их помощью создаются определенные визуальные подсказки в дизайне, что облегчает масштабируемость, позволяя оперативно настраивать шрифт и его высоту. В Фигме по умолчанию используется базовая строка 4pt.
Многие веб-дизайнеры устанавливают большее число строк, что позволяет размещать длинный скролл фреймов. При этом специалист может выделять чередующиеся строки, используя разные комбинации по свойствам высоты или цвета.
Вложенные сетки
Это достаточно интересная функция в Фигме. Она позволяет веб-дизайнеру не ограничиваться единой сеткой на уровне «артборда». Ведь сетку можно применять к любым фреймам, включая те, которые вложены внутри дизайна. Соответственно, создается определенного вида «матрешка».
Данной функцией можно и нужно пользоваться, поскольку она позволяет задавать разные сетки, используя их как визуальные подсказки. При этом пользователь может самостоятельно задавать цвет и прозрачность для каждой из них по отдельности.
Наиболее удобные размеры сеток
Активировать сетку несложно, для чего выделяют фрейм. На панели управления нажимают «+» в блоке Layout Grid. С этой же целью можно использовать горячие клавиши «Ctrl + Shift + 4» (для Windows) или «Ctrl + G» (для Mac OS).
Особенности применения для мобильных устройств
С целью создания удобного дизайна для планшетов и смартфонов обычно используется сетка с 9-ю, 6-ю или 3-я колонками. При этом ширина фреймов здесь составляет 1180 px, 880 px и 446 px соответственно. Модульные сетки также можно задавать с разными стилями, успешно применяя самые разные их вариации.
Выводы
Гибкая система настроек модульной сетки в Фигме дает возможность веб-дизайнеру сконцентрироваться на разработке грамотной структуры сайта. Удобная навигация позволяет легко научиться работать в программе и активно использовать ее для создания web-страниц.