5 способов улучшить процесс прототипирования в Figma

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

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

Используйте мастер-компоненты для ускорения соединений прототипа

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

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

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

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

Ссылка на файл Figma

Используйте компоненты для прокрутки контента

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

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

Чтобы увидеть, какой контент изначально виден в прокручиваемом фрейме:

• Превратите свой прокручиваемый контент в компонент.
• Убедитесь, что вы установили ограничения для всех элементов внутри.
• Убедитесь, что на панели свойств установлен флажок «clip content» (по умолчанию этот параметр должен быть включен).
• Перейдите в режим прототипирования и включите нужное направление прокрутки, настроив «overflow Behavior.».
• Поместите экземпляр этого компонента в свои проекты и измените их размер.

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

Ссылка на файл Figma

Используйте временные задержки и наложения для имитации взаимодействия

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

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

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

Ссылка на файл Figma

Стартовый экран

Прототипы в Figma в настоящее время ограничены отдельными страницами. Это позволяет вам иметь отдельные прототипы в одном документе, каждый со своим уникальным URL-адресом, которыми вы можете поделиться с людьми, когда они захотят их просмотреть. Но иногда вы просто хотите поделиться одной ссылкой с людьми, которая позволяет им увидеть несколько вариантов дизайна.

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

Ссылка на файл Figma

Используйте режим наблюдения

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

Режим наблюдения ТАКЖЕ работает с прототипами. Вы можете щелкнуть аватар вашего сотрудника, чтобы узнать, где он находятся в прототипе и что он там делает. Это отлично подходит для удаленных пользовательских тестов, когда вы хотите изучить, как пользователь взаимодействует с вашим дизайном. Это также отличный способ заставить всех следить, когда вы представляете свою работу на собрании.

Совершенствуйтесь и начинайте прототипирование!

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

Перевод статьи Thomas Lowry

10 хитростей Figma, которые я хотел бы знать раньше

• 
  Дизайн
• 3 мин на чтение
• 
  39560

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

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

1. Самое легкое создание кругового прогресса, которое вы когда-либо делали в своей жизни

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

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

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

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

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

Удерживайте клавишу пробела при перетаскивании объекта за пределы фрейма, чтобы он оставался внутри контейнера. Вы также можете отключить функцию «Clip contents» для фрейма, содержащего объект, чтобы вы все еще могли видеть его, когда он находится за пределами контейнера – вы также можете нажать CMD (CTRL) + Y, чтобы отобразить контуры.

4. Приведите сетку в порядок

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

5. Продублируйте последнее действие

Нажмите CMD + D, чтобы продублировать предыдущее действие. CMD + D также будет дублировать объекты, фреймы и все остальное.

6. Предварительно просмотрите цвет с помощью пипетки

При использовании инструмента «Пипетка» (i) удерживайте левую кнопку мыши, чтобы просмотреть как меняется цвет элемента.

7. CMD + / разблокировать все объекты

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

8. Легко вставляйте изображения внутрь фигур-плейсхолдеров

Нажмите CMD + Shift + K, чтобы заменить заливку фигур или фреймов с кучей изображений.

9. Другие приемы с пробелом

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

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

А если этого недостаточно, вы можете удерживать клавишу пробела, чтобы запретить Figma автоматическое вложение объектов внутри фреймов или отключить auto-layout. Клавиша пробела очень удобна!

10. Content Reel + Unsplash

Content Reel и Unsplash были двумя незаменимыми плагинами, экономящими время и позволяющими избежать использования «John Doe» в качестве имени для всех пользователей. С Content Reel вы можете одним кликом мыши вставлять в свой дизайн аватары, lorem ipsum, имена, адреса и многое другое. Unsplash – это бесплатная библиотека высококачественной графики.

11. БОНУС! Исправить высоту строки за секунду

Если у вас нет определенного значения высоты строки просто введите «auto» в поле line-height, и оно автоматически отрегулируется!

Источник: UxPub

• #Figma
• #лайфхаки
• #советы
• #фишки

• 
  
• 
  4
• 
  

Как исправить положение при прокрутке в Figma?

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

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

Один из способов зафиксировать положение элемента — использовать параметр «Фиксированное» в разделе «Макет» на «Панели свойств».

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

Еще один способ сохранить элемент в фиксированном положении — использовать настройку «Закрепить на странице». Это будет удерживать элемент на месте, пока вы не дойдете до конца страницы, после чего он закрепится в нижней части экрана. Это может быть полезно, если вы хотите, чтобы элемент оставался видимым, пока вы не дойдете до конца длинного документа.

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

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

Что такое фиксированное позиционирование и почему оно полезно в веб-дизайне

Существует шесть возможных значений свойства position, а «Фиксированное положение» относится к параметру, при котором элемент позиционируется независимо от размера или формы области просмотра пользователя или окна браузера. Элемент в фиксированном положении остается на месте независимо от того, как прокручивается окно, потому что область просмотра остается статической.

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

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

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

Типы позиционирования

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

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

Абсолют: вещей размещены в своих уникальных местах.

Relative: Элементы размещаются относительно их базовой линии.

Sticky: Элементы, которые прилипают к экрану независимо от поведения пользователя при прокрутке.

Figma: мощный инструмент для проектирования

Доступ к

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

Маки

популярны среди дизайнеров, в то время как ПК с Windows предпочитают разработчики во многих компаниях. Figma полезна для объединения этих сообществ. Кроме того, кроссплатформенный характер Figma устраняет неудобства PNG-pong. Процесс проектирования Figma устраняет необходимость в каких-либо посредниках, чтобы сделать доступ к проектной работе универсальным.

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

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

СОВЕТ ПРОФЕССИОНАЛА: Если у вас возникли проблемы с перемещением элементов во время прокрутки в Figma, есть несколько вещей, которые вы можете попытаться решить. Во-первых, проверьте, обновлен ли ваш браузер. Если это не так, обновите его и повторите попытку прокрутки. Если проблема не устранена, попробуйте очистить кеш и файлы cookie и перезапустить браузер. Если проблема не устранена, обратитесь в службу поддержки Figma за дополнительной помощью.

Заключение

Есть несколько способов удерживать элемент в фиксированном положении при прокрутке в Figma. Параметр «Фиксированный» в разделе «Макет» на «Панели свойств» сохранит элемент на холсте.

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

6 шагов, чтобы добавить горизонтальную и вертикальную прокрутку в Figma

Лаура Анжелика обновлено 2023-03-23 ​​14:48:53

В поисках альтернативы Figma? Попробуйте это!

Wondershare Mockitt Prototype Creator позволяет легко и быстро создавать прототипы для iPhone, Android, веб-сайтов и многого другого. Используйте функцию перетаскивания, чтобы с легкостью создавать прототипы. Попробуйте!

Создайте сейчас!

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

• Часть 1. Как добавить горизонтальную и вертикальную прокрутку в прототипы Figma
• Часть 2: Лучшая альтернатива Figma — [Видеоурок]

Часто задаваемые вопросы по

• : другие полезные советы по Figma

Как добавить горизонтальную и вертикальную прокрутку в прототипах Figma

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

Зачем нужно включать прокрутку в Figma?

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

Источник изображения: Figma

Шаги по добавлению горизонтальной и вертикальной прокрутки в прототипы Figma

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

Шаг 1. Откройте новый проект в Figma и выберите кадр на холсте.

Шаг 2. Создайте свой дизайн, используя шаблоны, перетаскивание и т. д.

Шаг 3. Выберите часть Figma, которую вы хотите прокрутить, а затем нажмите « CTRL+G », чтобы сгруппировать их вместе, что вне кадра .

Шаг 4. Откройте панель дизайна с правой стороны и выберите вариант содержимого клипа, который скроет содержимое за пределами кадра.

Шаг 5. После этого, как только дизайн будет завершен, выберите часть, которую вы хотите прокрутить в Figma.

Шаг 6. Перейдите к панели прототипа с правой стороны и измените поведение переполнения на горизонтальную прокрутку Figma или вертикальную прокрутку.

Лучшая альтернатива Figma — экономичная

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

Посмотрите этот видеоурок для быстрого обучения

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

Зарегистрируйтесь, чтобы попробовать бесплатно прямо сейчас!

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

• Облачный онлайн-инструмент . Работайте в любом месте на любом устройстве без обновлений приложений.
• Простой в использовании интерфейс и функции — Понятный интерфейс с функциями перетаскивания позволяет легко редактировать готовые шаблоны.
• Предлагайте различные шаблоны — богатая библиотека шаблонов и бесчисленное количество мультимедийных материалов для добавления в ваш проект.
• Совместная работа в любое время . Удобная совместная работа и обмен информацией во время работы над проектом в режиме реального времени. Вы также можете делиться фрагментами своей работы, если хотите.
• Экономичный и высокоэффективный — Бесплатная пробная версия для использования без ограничений по времени. Для командной работы вы можете перейти на платную версию, которая также доступна по цене.

Wondershare Mockitt чрезвычайно удобен для начинающих пользователей UX. Виджеты перетаскивания позволяют пользователям легко создавать прототипы, и считается, что с помощью Mokitt новичок может закончить прототип примерно за 10 минут, поскольку это очень простой, но эффективный инструмент. Не только функциональность этого инструмента впечатляет, но и цена делает его неотразимым для пользователей, чтобы выбрать Wondershare Mockitt, поскольку он намного дешевле по сравнению со Sketch или Figma, когда речь идет обо всех приложениях и функциях, которые он предоставляет.