Как создать гайд в фигме: Гид по Фигме для начинающих веб-дизайнеров

Как сделать UI-kit в Figma

Недавно мы рассказывали, как UI-kit помогает поддерживать порядок в дизайне. Там мы делились советами, которые подойдут для работы в Figma, Sketch, и Adobe XD. Но команда Purrweb работает в Figma, и для этого сервиса у нас собрался целый гайд. Любители Figma, ловите полезности.

Сразу оговоримся. Мы собираем UI-kit через компоненты и автолейаут (АЛ). И если компонентами пользуются почти все дизайнеры, то автолейаутом — не все. А зря. Нам эта функция экономит кучу времени и сил, когда приходят замечания от заказчика и в макетах нужно что-то поменять.

Поэтому сначала небольшое отступление про автолейаут, а затем перейдем к сборке компонентов в Figma.

Функция автолейаут: что это и как ей пользоваться

Автолейаут — это инструмент, который помогает выравнивать отступы, привязывать элементы к сторонам контейнера и выставлять расстояния между элементами. Как это работает, показываем на примере кнопки: 

Меняем текст, но отступы остаются прежними

В итоге элемент правильно выглядит при любых изменениях. Если не использовать АЛ, изменения будут влиять на текст кнопки: он будет растягиваться, съезжать и вести себя не так, как нам нужно. 

АЛ также удобно использовать при отрисовке сложносоставных компонентов: карточек, хедеров, модалок. Благодаря АЛ эти компоненты можно менять, сохраняя исходное расположение элементов.

Перейдем к сборке компонентов.

Инпуты

Инпут собираем с помощью АЛ с фиксированной высотой. Если у инпута есть заголовок, также делаем из текстового контейнера АЛ, а потом заголовок и инпут помещаем в один большой АЛ. Для заголовка и инпута выставляем настройку Fill container. 

Теперь при растягивании и сжатии большого АЛ заголовок и инпут будут растягиваться и сжиматься, как один элемент

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

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

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

Контейнер с настройкой Hug content и без нее

Дропдауны и меню

Их также собираем через АЛ с фиксированной высотой. Если есть заголовок, действуем так же, как с инпутом. И не забываем про Hug content. 

Для дропдауна и меню добавляем настройку Space between. В таком случае текст будет всегда расположен по левой стороне контейнера, а стрелка, открывающая элемент — по правой. 

Добавляем Space between

Раскрытый дропдаун — отдельная история. Создайте АЛ, в котором будет текст и разделительная линия снизу — это будет пункт дропдауна. Из таких контейнеров собирайте АЛ с расстоянием 0 px между элементами. Не забудьте задать всем элементам Fill container, чтобы они растягивались вместе с общим контейнером.  

Иллюстрируем абзац выше

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

Скрываем пункты в слоях

Меню, как обычные, так и модальные, делаем ровно по тем же принципам. У этих элементов интерфейсов одинаковая механика работы.

Кнопки

Кнопку заворачиваем в АЛ с фиксированной высотой. Кнопки с одинаковой высотой — это один вариативный компонент. Можно менять подложку, цвет текста, состояния, растягивать и сжимать, но по сути, это одна и та же кнопка. Если вам нужна кнопка другой высоты — придется создавать отдельный компонент. 

Скрываем пункты в слоях

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

Слева — без настройки Hug Content

Модальные окна 

В прошлой статье мы писали, что каждый элемент, который может повторяться, нужно делать компонентом. Так вот, слишком усердствовать тоже не стоит. Лучше сделать 3-4 модальных окна и менять контент в инстансах.

Инстансы одного окна

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

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

Прогресс-бар, хлебные крошки и пагинация

Прогресс-бар на 5 шагов, на 3 и на 10 — это 3 отдельных мастер-компонента. Каждый нужно собирать по отдельности. Либо можно работать по методике Атомарного дизайнаhttps://medium. com/%D0%B0%D1%82%D0%BE%D0%BC%D0%B0%D1%80%D0%BD%D1%8B%D0%B9-%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD/atomic-design-foreword-4960ad17bc1a: сделать мастер-компонентом 1 шаг и собирать из него нужные элементы в интерфейсе.

Добавляем 4 шаг в прогресс-бар

Хлебные крошки собираем по аналогии с прогресс-баром.

Пагинацию лучше забивать в АЛ, а в макете — растягивать по ширине экрана. Она должна быть единым компонентом со своими паддингами. Тогда элемент точно не будет прыгать и деформироваться. 

Чекбоксы, радиокнопки, тогглы

Собирайте в вариативный компонент, чтобы можно было переключать состояния элементов на экранах. В десктопе у чекбоксов, радиокнопок и тогглов по 8 состояний: Initial — начальное состояние, Hover — при наведении мыши, Focus — при выборе кнопки с клавиши Tab, Disabled — неактивное состояние у включенных и те же — у выключенных. 

Состояния чекбокса, но у радиокнопок и тогглов — такие же

В мобильной версии достаточно состояний вкл/выкл. Если в параметр вариативного компонента забить значения On и Off (True и False) соответственно, Figma позволяет переключать их в боковой менюшке при помощи тоггла. 

 Вот так выглядит переключение

Табы 

Табы также собираем по принципам Атомарного дизайна. Здесь атомы складываются в вариативный компонент с одним табом в разных состояниях (вкл/выкл, нажатие, наведение мыши и т. д.). 

Состояния таба

Можно собрать отдельные компоненты на 3, 5, 10 и т. д. табов. В таком случае оборачиваем табы в общий АЛ с фиксированной высотой, а каждому атому задаем настройку Fill container. Теперь, после добавления новых табов в контейнер, они будут выравниваться по размеру. 

Табы выровнялись сами

Календари

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

Собираем снова по принципам Атомарного дизайна, где атом — это поле с датой и его состояния. Определяем для них АЛ фиксированного размера, скажем 40х40 px, и растягиваем текстовый контейнер по ширине этого квадрата. Из атомов собираем общий АЛ с расстоянием 0 px между элементами. 

Этот календарь мы используем на проектах, собрали его давно

Тултипы

Все так же используем АЛ с привязкой элементов. Чтобы иконка «закрыть» всегда оставалась в верхнем правом углу, а общий контейнер — растягивался в зависимости от объема текста.

Уголок тултипа помещаем в отдельный АЛ и выставляем 0 px между ним и основным контейнером. АЛ, в который мы поместили уголок, делаем шире самого уголка, и теперь можем размещать элемент там, где нам нужно.

Собираем тултип

Хедеры, карточки и другие сложносоставные элементы

Так же, как в случае с модалками, хедеры, карточки и другие сложные элементы делаем в количестве не более 2-3 штук. Главное — делайте такие компоненты максимально универсальными. При любом изменении контента они должны вести себя по заданным правилам.  

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

Все вместе складывается в хедер

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

Создаем прямоугольный вертикальный АЛ со скругленными углами. Иконку шестеренки фиксируем в верхнем правом углу. Изображению задаем Fill container, чтобы тянулось и сжималось вместе с карточкой. То же делаем с заголовком и кнопкой, которая у нас уже обернута в АЛ, поэтому будет правильно тянуться 😊. 

Карточка меняет размер, но ничего не ломается

Совет: В сложносоставных элементах ограничьте количество символов в заголовке, чтобы текст помещался в контейнер. Кроме того, все иконки должны быть добавлены в  UI-kit. 

Цвета и стили

В Figma есть 2 плагина, которые упакуют ваши текстовые и цветовые стили в блоки UI-kit.

Color Styleguide автоматически оформит все ваши цветовые стили в виде блока.

Вот так

А Typography Styleguide сделает то же самое с текстовыми стилями

И вот так

Если знаете другие полезные плагины, поделитесь ими в комментариях.

Горячие клавиши

Важно научиться собирать UI-kit не только правильно, но и быстро. И здесь никуда без горячих клавиш. По ссылке можно найти полный список для Windows и Mac.

Часто пользуемся этими

Что посмотреть

Это не реклама. Мы искренне рекомендуем вам 2 You-Tube канала с видеоуроками по Figma: Алексей Бычков и Виктор Теплов. Авторы — практикующие дизайнеры, которые освещают самые крутые и полезные фишки визуального редактора. 

Для тех, кто все прочитал — ссылка на наш образец UI-kit. Чтобы посмотреть все настройки элементов, сделайте копию файла и сохраните в драфты.

Насколько публикация полезна?

Оцени эту статью!

13 оценок, среднее 5 из 5.

Оценок пока нет. Поставьте оценку первым.

Укажите свою почту и мы вышлем статью туда

Как собрать UI-kit в Figma — Дизайн на vc.ru

Недавно мы рассказывали, как UI-kit помогает поддерживать порядок в дизайне. Там мы делились советами, которые подойдут для работы в Figma, Sketch, и Adobe XD. Но команда Purrweb работает в Figma, и для этого сервиса у нас собрался целый гайд. Любители Figma, ловите полезности.

9297
просмотров

Сразу оговоримся. Мы собираем UI-kit через компоненты и автолейаут (АЛ). И если компонентами пользуются почти все дизайнеры, то автолейаутом — не все. А зря. Нам эта функция экономит кучу времени и сил, когда приходят замечания от заказчика и в макетах нужно что-то поменять.

Поэтому сначала небольшое отступление про автолейаут, а затем перейдем к сборке компонентов в Figma.

Функция автолейаут: что это и как ей пользоваться

Автолейаут — это инструмент, который помогает выравнивать отступы, привязывать элементы к сторонам контейнера и выставлять расстояния между элементами. Как это работает, показываем на примере кнопки:

Меняем текст, но отступы остаются прежними

В итоге элемент правильно выглядит при любых изменениях. Если не использовать АЛ, изменения будут влиять на текст кнопки: он будет растягиваться, съезжать и вести себя не так, как нам нужно.

АЛ также удобно использовать при отрисовке сложносоставных компонентов: карточек, хедеров, модалок. Благодаря АЛ эти компоненты можно менять, сохраняя исходное расположение элементов.

Перейдем к сборке компонентов.

Инпуты

Инпут собираем с помощью АЛ с фиксированной высотой. Если у инпута есть заголовок, также делаем из текстового контейнера АЛ, а потом заголовок и инпут помещаем в один большой АЛ. Для заголовка и инпута выставляем настройку Fill container.

Теперь при растягивании и сжатии большого АЛ заголовок и инпут будут растягиваться и сжиматься, как один элемент

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

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

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

Контейнер с настройкой Hug content и без нее

Дропдауны и меню

Их также собираем через АЛ с фиксированной высотой. Если есть заголовок, действуем так же, как с инпутом. И не забываем про Hug content.

Для дропдауна и меню добавляем настройку Space between. В таком случае текст будет всегда расположен по левой стороне контейнера, а стрелка, открывающая элемент — по правой.

Добавляем Space between

Раскрытый дропдаун — отдельная история. Создайте АЛ, в котором будет текст и разделительная линия снизу — это будет пункт дропдауна. Из таких контейнеров собирайте АЛ с расстоянием 0 px между элементами. Не забудьте задать всем элементам Fill container, чтобы они растягивались вместе с общим контейнером.

Иллюстрируем абзац выше

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

Скрываем пункты в слоях

Меню, как обычные, так и модальные, делаем ровно по тем же принципам. У этих элементов интерфейсов одинаковая механика работы.

Кнопки

Кнопку заворачиваем в АЛ с фиксированной высотой. Кнопки с одинаковой высотой — это один вариативный компонент. Можно менять подложку, цвет текста, состояния, растягивать и сжимать, но по сути, это одна и та же кнопка. Если вам нужна кнопка другой высоты — придется создавать отдельный компонент.

Разница в несколько пикселей имеет значение

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

Слева — без настройки Hug Content

Модальные окна

В прошлой статье мы писали, что каждый элемент, который может повторяться, нужно делать компонентом. Так вот, слишком усердствовать тоже не стоит. Лучше сделать 3-4 модальных окна и менять контент в инстансах.

Инстансы одного окна

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

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

Прогресс-бар, хлебные крошки и пагинация

Прогресс-бар на 5 шагов, на 3 и на 10 — это 3 отдельных мастер-компонента. Каждый нужно собирать по отдельности. Либо можно работать по методике Атомарного дизайна: сделать мастер-компонентом 1 шаг и собирать из него нужные элементы в интерфейсе.

Добавляем 4 шаг в прогресс-бар

Хлебные крошки собираем по аналогии с прогресс-баром.

Пагинацию лучше забивать в АЛ, а в макете — растягивать по ширине экрана. Она должна быть единым компонентом со своими паддингами. Тогда элемент точно не будет прыгать и деформироваться.

Чекбоксы, радиокнопки, тогглы

Собирайте в вариативный компонент, чтобы можно было переключать состояния элементов на экранах. В десктопе у чекбоксов, радиокнопок и тогглов по 8 состояний: Initial — начальное состояние, Hover — при наведении мыши, Focus — при выборе кнопки с клавиши Tab, Disabled — неактивное состояние у включенных и те же — у выключенных.

Состояния чекбокса. У радиокнопок и тогглов — такие же

В мобильной версии достаточно состояний вкл/выкл. Если в параметр вариативного компонента забить значения On и Off (True и False) соответственно, Figma позволяет переключать их в боковой менюшке при помощи тоггла.

Вот так выглядит переключение

Табы

Табы также собираем по принципам Атомарного дизайна. Здесь атомы складываются в вариативный компонент с одним табом в разных состояниях (вкл/выкл, нажатие, наведение мыши и т. д.).

Состояния таба

Можно собрать отдельные компоненты на 3, 5, 10 и т. д. табов. В таком случае оборачиваем табы в общий АЛ с фиксированной высотой, а каждому атому задаем настройку Fill container. Теперь, после добавления новых табов в контейнер они будут выравниваться по размеру.

Табы выровнялись сами

Календари

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

Собираем снова по принципам Атомарного дизайна, где атом — это поле с датой и его состояния. Определяем для них АЛ фиксированного размера, скажем 40х40 px, и растягиваем текстовый контейнер по ширине этого квадрата. Из атомов собираем общий АЛ с расстоянием 0 px между элементами.

Этот календарь мы используем на проектах

Тултипы

Все так же используем АЛ с привязкой элементов. Чтобы иконка «закрыть» всегда оставалась в верхнем правом углу, а общий контейнер — растягивался в зависимости от объема текста.

Уголок тултипа помещаем в отдельный АЛ и выставляем 0 px между ним и основным контейнером. АЛ, в который мы поместили уголок, делаем шире самого уголка, и теперь можем размещать элемент там, где нам нужно.

Собираем тултип

Хедеры, карточки и другие сложносоставные элементы

Так же, как в случае с модалками, хедеры, карточки и другие сложные элементы делаем в количестве не более 2-3 штук. Главное — делайте такие компоненты максимально универсальными. При любом изменении контента они должны вести себя по заданным правилам.

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

Все вместе складывается в хедер

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

Создаем прямоугольный вертикальный АЛ со скругленными углами. Иконку шестеренки фиксируем в верхнем правом углу. Изображению задаем Fill container, чтобы тянулось и сжималось вместе с карточкой. То же делаем с заголовком и кнопкой, которая у нас уже обернута в АЛ, поэтому будет правильно тянуться 😊

Карточка меняет размер, но ничего не ломается

Совет: в сложносоставных элементах ограничьте количество символов в заголовке, чтобы текст помещался в контейнер. Кроме того, все иконки должны быть добавлены в UI-kit.

Цвета и стили

В Figma есть 2 плагина, которые упакуют ваши текстовые и цветовые стили в блоки UI-kit.

Color Styleguide автоматически оформит все ваши цветовые стили в виде блока.

Вот так

А Typography Styleguide сделает то же самое с текстовыми стилями.

И вот так

Если знаете другие полезные плагины, поделитесь ими в комментариях.

Горячие клавиши

Важно научиться собирать UI-kit не только правильно, но и быстро. И здесь никуда без горячих клавиш. По ссылке можно найти полный список для Windows и Mac.

Часто пользуемся этими

Что посмотреть

Это не реклама. Мы искренне рекомендуем вам 2 You-Tube канала с видеоуроками по Figma: Алексей Бычков и Виктор Теплов. Авторы — практикующие дизайнеры, которые освещают крутые и полезные фишки визуального редактора.

Для тех, кто все прочитал — ссылка на наш образец UI-kit. Чтобы посмотреть все настройки элементов, сделайте копию файла и сохраните в драфты.

Хотите больше полезных советов по дизайну? Тогда подписывайтесь на блог Purrweb и читайте наши статьи.

Как показать линейки в Figma?

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

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

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

Что такое Фигма?

Figma — это инструмент для совместного проектирования, который позволяет дизайнерам создавать, управлять и экспортировать проекты. Figma работает в Интернете, поэтому для использования инструмента дизайна не требуется загрузка или плагин. В качестве дополнительного преимущества, если вы используете браузер Chrome, вы можете использовать инструмент проектирования Figma прямо в своем браузере.

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

Что такое линейка в Figma?

Функция линейки в Figma позволяет создавать направляющие вдоль линейки в вашем дизайне.

Но что такое линейки, спросите вы?

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

Линейки также можно использовать для измерения расстояний между элементами в дизайне. И угадай что? Вам даже не нужно показывать линейки в Figma, чтобы эти функции работали. Давайте подробнее рассмотрим, что функция линейки в Figma может сделать для вашего процесса проектирования.

Как показать линейки в Figma

Одна из замечательных особенностей Figma заключается в том, что в ней легко отображать линейки. Все, что вам нужно сделать, это перейти в View > Show Rulers или использовать сочетание клавиш cmd/ctrl + r. Затем просто нажмите и перетащите верхнюю или левую линейку, чтобы создать направляющую.

Вы можете перемещать направляющие, выбирая их и перетаскивая в новое место. Чтобы удалить руководство, просто выберите его и нажмите cmd/ctrl + backspace/delete.

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

Если вам нужен больший контроль над выравниванием, вы можете использовать панель «Выравнивание». Чтобы открыть эту панель, выберите «Окно» > «Выровнять» или используйте сочетание клавиш cmd/ctrl + option/alt + a. Здесь вы можете согласовать свои цели с выделенной областью, монтажной областью или холстом.

Панель «Выравнивание» также позволяет вам контролировать, как Figma распределяет пространство между объектами. Например, если у вас есть три объекта и вы хотите, чтобы они были равномерно распределены, вы можете выбрать все три из них и нажать кнопку «Распределить по горизонтали». Это разместит объекты так, чтобы они находились на одинаковом расстоянии друг от друга.

 

Как оптимизировать рабочий процесс проектирования с помощью линеек

Если вы только начинаете работать с Figma, возможно, вы не полностью осведомлены о преимуществах линеек и функции линейки в Figma. Итак, каковы преимущества функции линейки в Figma?

Что ж, функция линейки в Figma — отличный способ добиться единообразия дизайна. Используя функцию линейки, вы можете убедиться, что все ваши проекты соответствуют единому шаблону проектирования. Линейки в Figma могут помочь вам лучше создавать проекты и управлять ими.

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

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

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

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

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

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

Краткий обзор

Вы можете отобразить линейки в Figma, выбрав «Просмотр» > «Показать линейки» или используя сочетание клавиш cmd/ctrl + r. Чтобы создать направляющую, просто нажмите и перетащите верхнюю или левую линейку. Вы можете перемещать направляющие, выбирая их и перетаскивая в новое место.

СОВЕТ ПРОФЕССИОНАЛА: Если вы не будете осторожны, отображение линеек в Figma может быть опасной операцией. Убедитесь, что у вас есть правильные настройки, прежде чем пытаться отобразить линейки. В противном случае вы можете случайно удалить или изменить важные данные.

Заключение

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

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

Основные настройки проекта в Figma | Figma для начинающих

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

Основные настройки проекта в Figma – оглавление:

  1. Фреймы
  2. Сетка макета
  3. Линейки
  4. Основные настройки проекта в Figma

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

  • нажмите на холст, чтобы создать рамку по умолчанию с размерами 100×100
  • щелкните и перетащите на холсте, чтобы создать рамку с нестандартными размерами
  • используйте раскрывающийся список на правой боковой панели, чтобы выбрать предустановку кадра

После добавления и выбора кадра вы получаете к нему доступ на панели свойств.

а) Положение канвы (X и Y) – здесь можно указать положение рамки в канве по горизонтальной (X) и вертикальной (Y) оси.

б) Размеры объекта (Ширина и высота) – здесь можно изменить размер кадра

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

d) Изменить размер по размеру – эта функция позволяет изменить размер фрейма в соответствии с его содержимым.

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

e) Портрет и Альбом – здесь вы можете изменить ориентацию кадра на вертикальную или горизонтальную

f) Поворот – позволяет настроить угол кадра

g) Угловой радиус – спасибо к этой функции вы можете скруглить угол кадра, чтобы создать более мягкие края.

h) Независимые углы – настройка независимого угла позволяет настроить радиус угла для каждого угла.

i) Содержание ролика — позволяет скрыть любые объекты, выходящие за пределы рамки

j) Auto Layout — позволяет создавать адаптивные рамки

k) Layout Grids — эта функция помогает создать структурированный пользовательский интерфейс

l) Заливка – с помощью этой опции вы сможете заполнить рамку цветом, градиентом или фотографией. Вы также можете использовать расширенные настройки обводки, которые можно найти под значком с многоточием.

n) Эффекты – здесь вы можете добавить тень или размытие к кадру. Щелкните значок настроек эффекта, чтобы настроить параметры тени.

o) Экспорт – здесь вы можете экспортировать вашу рамку в следующие форматы: PNG, JPG, SVG и PDF.

Над каждым кадром на холсте отображается его имя. Чтобы изменить его, нажмите на него дважды. Вы можете копировать кадры вместе с их содержимым и вставлять их на холст сколько угодно раз.

Задача.3.1

Начните работу над проектом с выбора нужного размера рамки.

Полезный совет: Если вы не знаете, какого размера должна быть ваша рамка, хорошим выбором будет использование одного из самых популярных размеров экрана. Перейдите на https://gs.statcounter.com/screen-resolution-stats для получения дополнительной информации.

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

Вместе подготовим 3 проекта

  • экран входа (Вход)
  • домашняя страница (Главная) 
  • Целевая страница продукта

  • (Продукт)

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

Сетка макета

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

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

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

Вы можете добавить сетку макета к активному фрейму на панели свойств. У вас есть 3 варианта: сетка, столбцы, строка. Вы можете выбрать несколько вариантов одновременно.

Вы можете настроить параметры каждой сетки на панели настроек сетки макета. Вы можете включить или отключить видимость сетки в любое время, щелкнув значок «Глаз».

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

Задача 3.2. Установите сетку макета в вашем проекте. Для целей этого проекта мы выбрали Columns и установили следующие значения:

  • Счет 2 (количество столбцов)
  • Поле 20 (расстояние столбцов от края экрана)
  • Желоб 30 (расстояние между колоннами)

Линейки

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

Линейки можно увидеть вверху и слева на холсте. С помощью этой функции вы можете создавать вертикальные и горизонтальные линии (направляющие) — нажмите и удерживайте выбранную линейку, затем переместите курсор в область холста.
Появится тонкая красная линия, которую вы можете перемещать. Вы можете создать столько руководств, сколько захотите.
Вы можете легко удалить ненужные строки — просто выберите строку (выбранная строка станет синей), а затем нажмите Удалить .

Задача 3.3. Поэкспериментируйте с добавлением линеек. Они будут полезны при выравнивании элементов.

Вы только что узнали об основных настройках проекта в Figma. Читайте также: Чат-боты с искусственным интеллектом.

Если вам нравится наш контент, присоединяйтесь к нашему сообществу занятых пчел на Facebook, Twitter, LinkedIn, Instagram, YouTube, Pinterest.