Figma

Содержание
Что это?
Зачем это все было нужно?
Почему именно Figma?
Демонстрация интерфейса и разбор кейсов

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

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

Типы прототипов

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

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

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

Когда в интерфейсе появляются нестандартные объекты и элементы или нужно протестировать скорость работы пользователя с продуктом, создаётся дополнительная версия прототипа — она выглядит реалистично, но абсолютно лишена каких-либо алгоритмов и, как следствие, не показывает реальных данных. Есть возможность осуществить такой вариант прототипа не только в различных средах разработки, в которых есть визуальные инструменты создания интерфейсов, но и в редакторах изображений – обычно, это реализуется гораздо быстрее. Формируются рабочие экраны для последующего тестирования. Псевдореальная версия соответствует стадии низкоуровневого проектирования ПИ, однако она может использоваться на стадии высокоуровневой разработки.
Псевдореальная версия прототипа

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

Классификация подходов к созданию прототипа

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

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

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

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

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

Для создания прототипа дизайнеру нужно выбрать инструмент. Схемы можно как рисовать от руки, так и использовать программы:
Графические редакторы. Для прототипирования можно использовать те рабочие программы, в которых непосредственно создается дизайн сайта - Sketch, Figma, инструменты Adobe, Corel и прочее. Сюда же можно отнести стандартные редакторы Microsoft Office.
Специальные программы и онлайн-ресурсы. Есть как платные, так и бесплатные приложения, созданные специально для разработки прототипов. Это может быть как лицензированное ПО, устанавливаемое на компьютер, так и онлайн-сервис, работающее через браузер.

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

Зачем это все
Раньше

Зачем это все
Конфликт «дизайнер-разработчик»
Макет отличается от сверстанного
Слабое взаимодействие в ходе проекта
Поддержание актуальных макетов
Много времени на подготовку макета и внесение правок
Требовательные ресурсы

Зачем это все
Сейчас

Почему именно Figma?
1. Кроссбраузерность и доступность

Почему именно Figma?
2. Организация и хранение файлов

Почему именно Figma?
3. Командная работа

Почему именно Figma?
4. Работа с макетами для фронтенда

Почему именно Figma?
5. Комментарии

Почему именно Figma?
6. Контроль версий

Почему именно Figma?
7. Сетка, layout и «резина»

Почему именно Figma?
8. Компоненты

Почему именно Figma?
9. Прототипирование

Почему именно Figma?
Еще плюсы
Режим просмотра
Режим презентации
Панель Сode
Интеграция
Библиотека компонентов
Условная бесплатность
Google Fonts
Figma API
Минусы
Зависимость от интернета
Нет округления полупикселей
Нет плагинов
Роскомнадзор

Демонстрация интерфейса
и принципы организации макета
Слои (Layers) –>
Группы (Groups) –>
Фреймы (Frames) –>
Страницы (Pages)

Вместо выводов
Макеты будут предлагаться по ссылке (редко jpeg)
Хотим сделать удобнее себе и разработчикам
Возрастет оперативность внесения правок
Чувствуем, что находимся в тренде