Лабораторная работа №3 Создание прототипа сайта в Figma

1. 
   Design - показывает все свойства того или иного объекта. На ней мы можем узнать размеры объекта, скругление углов, используемый цвет палитры, позиционирование элемента и многое другое.
   
2. 
   Prototype - здесь осуществляется прототипирование макетов и объектов. Это требуется для наглядной демонстрации проекта и взаимосвязей между элементами.
   
3. 
   Inspect - отображает общую информацию по элементу, а также важный пункт - CSS код, примененный к элементу.
   

2.2.2 В левом верхнем углу располагается панель инструментов. При нажатии на кнопку инструмента в правой части экрана во вкладке «DESIGN» высвечиваются параметры данного инструмента. Их можно менять в зависимости от поставленной задачи.

Кнопка MOVE TOOL отвечает за перемещение объектов в пространстве.

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

Если выделить созданный фрейм, панель свойств отобразит его свойства, где можно изменить размер или цвет фона фрейма:

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

Разместим его на фрейме:

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

2.2.4 Пример создания простой кнопки. Превратим добавленную фигуру в кнопку с надписью.

Можно настроить свойства надписи через панель свойств:

Теперь свяжем надпись и фигуру. Для этого выделяем элементы в панели слоев, нажимаем ПКМ по элементу и выбираем «Group selection» для добавления слоев в одну группу:

Теперь надпись и фигура находятся в одной группе:

И можно перетаскивать кнопку вместе с текстом:

2.3 Прототипирование

• 
  Клик или тап (On Click/On Tap) - наступает, когда пользователь кликает по элементу курсором мышки или, в случае с сенсорными экранами, нажимает (однократно) пальцем.
  
• 
  Перетаскивание (On Drag) - наступает, когда пользователь перетаскивает элемент с помощью зажатой кнопки мыши или пальцем (на сенсорный экранах).
  
• 
  При наведении (While Hovering) - используется для изменения состояния при наведении (аналог hover в CSS) и демонстрации подсказок. Если убрать курсор с объекта, элемент будет возвращен в исходное состояние.
  
• 
  Клавиатура или геймпад (Keyboard and Gamepad Shortcuts) - используется для считывания нажатия клавиатуры, в том числе сочетаний.
  
• 
  Мышь в области (Mouse enter) - показывает фрейм назначения, если мышь наведена в специальную область
  
• 
  Когда мышь покидает область (Mouse Leave) - показывает целевой кадр, когда курсор покидает специальную область. Может использоваться, например, для демонстрации подсказок, когда пользователь покинул поле, не заполнив его.
  
• 
  Начало касания (Mouse Down (Touch Down)) - событие, когда мышь только была нажата (начало клика), либо, для сенсорных экранов, когда палец только коснулся элемента.
  
• 
  Конец касания (Mouse Up (Touch Up)) - событие, когда мышь больше не нажата, либо, в случае с сенсорным экраном, палец больше не касается точки на экране.
  
• 
  Задержка (After Delay) - позволяет запускать событие после паузы. Указывается в миллисекундах.
  

2.3.2 Взаимодействия

• 
  Нет (None) – ничего не происходит.
  
• 
  Навигация (Navigate to) - осуществляет переход от одного фрейма к другому.
  
• 
  Изменить на (Change to) -
  
• 
  Наложить поверх текущего фрейма (Open overlay) - открывает целевой фрейм над (поверх) исходного. Может использоваться для отображения всплывающих окон.
  
• 
  Замена (Swap overlay) - заменяет один фрейм другим. При этом, в отличие от перехода «Навигация», в данном случае пользователь не сможет вернуться на предыдущую страницу с помощью команды «назад».
  
• 
  Закрыть наложения (Close overlay) - закрывает окно, наложенное поверх фрейма.
  
• 
  Назад (Back) – переход назад.
  
• 
  Пролистать до (Scroll to) - пролистывает текущую страницу до вложенного элемента или фрейма. Может использоваться для создания меню с якорными ссылками. (Обновление от 8/12/20)
  
• 
  Переход по ссылке (Open link) - открывает страницу по ссылке URL за пределами прототипа.
  

2.3.3 Оживим кнопку с помощью триггеров и взаимодействий.

После этого выбираем кнопку и переходим раздел Interaction во вкладке Prototype панели свойств:

Для запуска наглядной демонстрации работы нажимаем на кнопку «Present» нажимаем:

2.4 Работа с изображениями

Переходим в Figma и выбираем нужный фрейм, в который будет вписано изображение:

2.5 Дружественный пользовательский интерфейс

2. Предсказуемость

3. 
   Задание
   

4. 
   Контрольные вопросы
   

1. 
   Какое предназначение у Figma?
   
2. 
   Назовите преимущества и недостатки Figma.
   
3. 
   Из каких областей состоит рабочее окно Figma?
   
4. 
   Какие кнопки содержит панель инструментов рабочего окна?
   
5. 
   Какие базовые свойства имеет слой любого типа?