Обучение Framer путем создания прототипа мобильного приложения

Время статических пользовательских интерфейсов давно прошло. Разработка интерактивных прототипов — лучший способ выразить свои идеи и объяснить их клиентам и заинтересованным сторонам. Или, как выразился Джерри Као из UXPin: «Ничто так не приближает вас к функциональности конечного продукта, как прототипирование. Именно прототип воплощает в жизнь пользовательский опыт » .

Прототипирование — важная часть современного процесса проектирования UX. Я перепробовал множество инструментов и считаю, что Framer Studio (работает на платформе Framer Library) — один из лучших, когда дело доходит до создания прототипов пользовательского интерфейса. Итак, в следующем уроке я хотел бы научить вас основам Framer.

Чему вы научитесь? Если вы знаете, что такое Framer, и хотели бы узнать больше о том, как его использовать, или если вы не знаете, что такое Framer, но хотели бы узнать немного больше о продвинутых методах прототипирования, я считаю, что это руководство для вас! К концу руководства вы сможете создать прототип мобильного приложения, а также изучите код CoffeeScript. Я проведу вас по пути и предоставлю вам файлы, которые помогут вам легче начать работу.

Примечание о Framer Studio, библиотеке Framer, платформах и ярлыках

Прежде чем мы продолжим, важное примечание : это руководство посвящено Framer Studio, приложению только для Mac. Framer Studio поддерживается библиотекой Framer, которая является бесплатной и с открытым исходным кодом. Саму библиотеку Framer можно использовать во всех операционных системах (Mac, Windows и Linux). Пока нет версии Framer Studio для Windows; однако есть способ заставить Framer Library работать в ОС Windows с помощью Atom. (Если вас интересует часть Windows, прочитайте «Как запустить Framer JS в Windows» или «Использование Framer в Windows с Atom».) Также обратите внимание, что, поскольку я использую Framer Studio на Mac, в моем руководстве Я буду использовать обозначение Mac для ярлыков.

Что такое Фреймер?

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

Изучение кода

Во Framer код — это ваша главная дизайнерская суперсила. Означает ли это, что вам нужно научиться программировать? да. Должны ли дизайнеры кодировать? Этой теме много лет, и есть несколько хороших моментов как для «да», так и для «нет»; здесь я хотел бы представить вам несколько иной взгляд на вопрос.

В недавней статье Шон Хикман сказал:

«Существуют постоянные споры о том, должны ли дизайнеры учиться кодировать. Хотя я рад подробно поговорить об этом, я думаю, что полезно посмотреть на это с другой точки зрения. Чего вы пытаетесь достичь? В моем случае , я хотел отправить товар."

А также:

«Framer — замечательный инструмент для дизайнеров, позволяющий научиться кодировать. Возможность видеть результаты своего кода вживую помогла мне понять, что происходит на самом деле. Framer научил меня базовым вещам, таким как переменные, циклы for и функции. , но совершенно необходимо».

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

Что такое кофескрипт?

Во Framer используется язык CoffeeScript. Отличные новости для начинающих: это упрощенная версия JavaScript, поэтому кривая обучения не слишком крутая.

Согласно официальному сайту:

CoffeeScript — это язык, который компилируется в JavaScript. Это попытка показать достоинства JavaScript простым способом.

Есть еще одно большое преимущество использования CoffeeScript: это, по сути, веб-технология, поэтому все, что вы создаете во Framer, позже работает как JavaScript! Чтобы следовать этому руководству, вам нужно немного знать программирование.

Полезные ресурсы

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

• «Код», Фреймер
  Руководство по программированию от Framer.
• «Курс фреймов», Грег Рог
  Мой видеоурок по CoffeeScript.
• «Введение в CoffeeScript», Джеффри Байлз, SitePoint
• «Краткое введение в CoffeeScript», JumpstartLab
• «Введение в Framer», Мэн То
  Настоятельно рекомендуемый ресурс для изучения нескольких основных вещей о Framer.

Примечание о версиях Framer

Учебник работает (и был протестирован) на Framer версии 111 . Если вы еще не обновились до 111, я настоятельно рекомендую вам скачать его и обновить. Что касается будущих обновлений Framer, вполне вероятно, что будущая версия Framer представит больше новых функций и может повлиять на код этого руководства.

Почему прототипирование важно?

Сравните эти подходы к представлению одной и той же идеи. Вы можете использовать каркас, например:

Или ту же идею можно представить с помощью простого, но мощного прототипа:

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

Объяснение идеи с помощью интерактивного прототипа поможет им лучше понять ваше видение. Иногда даже низкокачественный прототип говорит тысячу слов. (Ту же идею разделял Пол Боаг: «Люди часто не могут представить себе, как лучше выглядит. Прототип позволяет им это увидеть. Он может продать потенциал намного лучше, чем любое количество документов или презентаций».)

Если картинка стоит 1000 слов, прототип стоит 1000 встреч.

— Даниэль Бурка, #aeadenver 2017

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

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

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

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

Ваш первый дизайн, созданный с помощью Framer

Начнем с пользовательского интерфейса Framer.

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

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

Работа в представлении «Дизайн»

Когда вы впервые открываете Framer Studio, он открывается в режиме конструктора. Вы обнаружите, что большинство сочетаний клавиш, которые вы знаете из других инструментов дизайна (таких как Sketch), работают и здесь. Нажмите A (или F ), чтобы переключиться на инструмент «Рамка», и выберите предопределенный пресет iPhone 8 на панели свойств справа.

Примечание. В последнем обновлении Framer монтажные области были переименованы в «фреймы», и вся концепция изменилась. Что такое фреймы? Фреймы — это смарт-контейнеры макетов, которые можно использовать как экраны, так и элементы интерфейса. Фреймы также можно использовать как фрагменты для быстрого экспорта значков определенных размеров. Если вы немного знакомы с HTML, вы можете думать о фреймах как о элементах div , а также можете вкладывать фреймы друг в друга, чтобы определять элементы макета, такие как панели навигации, панели вкладок, карточки, кнопки и т. д. Далее в руководстве , иногда я буду называть кадры «экранами» (чтобы дать вам общее представление о том, что это отдельный экран нашего приложения) — но технически экраны — это просто кадры.

Подробнее о фреймах можно прочитать на странице справки «Фреймы и фигуры».

Примечание о единицах измерения

Во Framer мы измеряем вещи в единицах, называемых точками . Каждая точка может представлять различное количество пикселей, в зависимости от плотности пикселей физического устройства, на котором вы будете тестировать. Поскольку все, что вы проектируете во Framer, создается в виде вектора, вам не о чем беспокоиться. Кроме того, лучше всего использовать векторные файлы SVG, которые поддерживает Framer; если вам нужно импортировать файлы PNG или JPG, убедитесь, что они имеют достаточно высокое разрешение.

Я подготовил логотип Smashing Magazine таким образом. Чтобы импортировать его во Framer, я просто перетаскиваю его на холст.

Последний элемент в этом фрейме — простая кнопка, сделанная с помощью другого вложенного фрейма (нажмите F или A ), с текстовым фреймом внутри. Нажмите T для инструмента «Текст» и нарисуйте текстовое поле слева направо, выровняв текст по центру поля на панели свойств и добавив немного текста.

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

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

Основным элементом на этом экране будет список из шести кнопок высотой 115 пунктов каждая. Итого наши кадры должны быть 6 × 115 = 690 points в высоту. Поскольку он немного выше самого устройства, позже он будет автоматически прокручиваться в предварительном просмотре. Я использовал значок гамбургера из панели значков:

Я также добавил несколько текстовых полей, а также градиенты в качестве заливки. Вот как это выглядит:

Давайте выделим все кнопки и нажмем Command + Return , чтобы объединить их в новый фрейм — новый контейнер для этих элементов (которые я назвал «элементы»). Теперь добавьте верхнюю и нижнюю рамки (которые будут использоваться для верхнего и нижнего колонтитула), а затем поместите их поверх элементов списка.

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

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

Прежде чем мы продолжим, я хотел бы, чтобы вы кое-что проверили:

• Третий экран с меню должен быть той же высоты, что и самый высокий (вы можете легко продублировать предыдущий кадр, нажав Command + D ).
• Соглашение об именовании элементов на панели слоев имеет решающее значение. Пожалуйста, оставьте это как есть в моем файле дизайна или обратите внимание на то, как я привожу их имена.

Переход от дизайна к коду

Чтобы привести вещи в движение, вам потребуется доступ к представлению кода. Вы можете переключаться между представлениями, нажимая Command + 1 и Command + 2 . Прежде чем приступить к программированию взаимодействий, вам необходимо включить фреймы из представления «Дизайн», чтобы они были доступны в представлении кода (по умолчанию они не включены). Чтобы включить фрейм для работы в представлении кода, щелкните значок цели рядом с его именем на панели слоев.

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

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

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

Важное обновление. Начиная с обновления Framer от 20 декабря 2017 г. ( версия 108 ), вы можете ориентироваться в коде только на фреймы и текстовые объекты; но в более позднем обновлении ( версия 109 , выпущенная 23 января 2018 г.) команда Framer добавила возможность также нацеливать формы и пути. Хотя в моем руководстве используются только фреймы и текстовые объекты, полезно также знать, что фигуры и контуры теперь можно использовать и в коде. Вы также заметите, что (как уже упоминалось) инструмент «Монтажная область» был заменен инструментом «Рамка», поэтому боковая панель инструментов может выглядеть немного иначе, чем на скриншотах; это связано с тем, что основная часть статьи была подготовлена ​​до обновления Framer от 20 декабря 2017 года.

Добавление интерактивности во Framer

Я не собираюсь учить вас CoffeeScript в этой статье, но я постараюсь изо всех сил объяснить код, который я использовал в этом примере. Надеюсь, вы сможете понять это даже без предварительного опыта работы с CoffeeScript. При этом, если вы новичок в CoffeeScript или JavaScript, я настоятельно рекомендую вам сначала просмотреть справочное руководство.

Теперь давайте создадим нашу первую анимацию. Мы рассмотрим простые переходы, создав вступительную анимацию для первого экрана. То, что мы настроили в представлении дизайна, — это то, как наше приложение должно выглядеть после анимации элементов. Для нашего первого экрана мы хотим анимировать свойства scale и rotation логотипа. Сначала мы устанавливаем свойство масштаба на 0 (что сделает логотип невидимым), а затем устанавливаем его поворот на -360 :

 logo.scale = 0 logo.rotation = -360
logo.scale = 0 logo.rotation = -360

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

 logo.animate properties: scale: 1 rotation: 0
logo.animate properties: scale: 1 rotation: 0

Имейте в виду отступ . Свойства, которые анимируются, должны располагаться с отступом в новых строках, и мы используем метод animate , чтобы привести их в движение. Теперь вы должны увидеть, как работает ваша первая анимация! Вы можете немного изменить его, создав более естественное движение. Мы сделаем это благодаря easing — концепции, которая позволяет нам изменить движение, чтобы оно выглядело более реалистичным. Добавим еще одну строчку внизу:

 logo.animate properties: scale: 1 rotation: 0 curve: "spring(100,15)"
logo.animate properties: scale: 1 rotation: 0 curve: "spring(100,15)"

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

Теперь анимация должна выглядеть так:

Установим еще несколько начальных свойств:

 bg.backgroundColor = "black" button.scale = 2 button.y = button.y + 200
bg.backgroundColor = "black" button.scale = 2 button.y = button.y + 200

В последней строке задаем положение кнопки так, чтобы она была ниже холста — сначала проверяем текущую позицию с помощью button.y , а затем добавляем еще 200 точек по вертикальной оси, чтобы переместить ее вниз. Следующий шаг — создать анимацию; давайте сначала сделаем это для фона:

 bg.animate backgroundColor: "#FF7744"

И теперь мы хотим дождаться окончания анимации логотипа, а затем запустить анимацию кнопки. Один из подходов — отложить анимацию, например:

 button.animate properties: scale: 1 y: button.y - 200 delay: .5

Это задерживает его на полсекунды. Гораздо более приятным решением было бы дождаться окончания анимации логотипа, а затем запустить код. Этот фрагмент кода вводит события Framer (которые мы рассмотрим чуть подробнее позже в этой статье). Это выглядит так:

 logo.onAnimationEnd -> button.animate scale: 1 y: button.y - 200

Как видите, вы даже можете пропустить properties: строку, когда не используете смягчение; но если вы хотите добавить какое-то классное смягчение, оно должно быть там. Закончим примерно так:

 logo.onAnimationEnd -> button.animate properties: scale: 1 y: button.y - 200 curve: "spring"

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

Хорошо, теперь анимация выглядит так:

Сценарий взаимодействия

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

 flow = new FlowComponent flow.showNext(home)

Первая строка похожа на объявление переменной. Но значение здесь фактически создает новый объект FlowComponent . Теперь мы можем использовать это собственное имя, flow , для доступа к компоненту потока в любое время. Во второй строке используется один из методов, встроенных в компонент потока — showNext , который, как следует из названия, отображает экран, который мы хотим видеть следующим. В этом случае он покажет нам первый экран нашего прототипа. В качестве параметра мы передаем имя первого кадра. Это все, что нужно, чтобы обернуть его в компонент потока и отобразить первый экран.

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

 flow.header = top_bar flow.footer = bottom_bar

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

В объектно-ориентированном программировании эта концепция очень важна. Возьмем в качестве примера автомобильный объект; свойствами будут такие вещи, как цвет, марка, мощность и так далее. Методы будут готовыми функциями, которые вы можете запускать при необходимости (например, startTheEngine() ). Вы можете распознать метод по скобкам, и иногда вам может понадобиться передать некоторые параметры этой конкретной функции (например, startTheEngine(gear1) ). Мы уже использовали метод showNext() в этом контексте; теперь мы используем свойства header и footer и устанавливаем их на соответствующих слоях.

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

 flow.header.visible = false flow.footer.visible = false

Здесь мы используем свойство visible в верхнем и нижнем колонтитулах компонента потока. CoffeeScript должен быть максимально интуитивным и близким к простому английскому языку; так что вместо false вы даже можете сказать no , чтобы скрыть это, и yes , чтобы показать это (вместо true ).

Совет. Попробуйте выделить любые строки кода и нажать Command + / , чтобы закомментировать их, чтобы они не выполнялись.

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

 button_get_started.onTap -> flow.showNext(list) flow.header.visible = true flow.footer.visible = true

То, что мы делаем здесь, является еще одним соглашением: мы можем реагировать на пользовательский ввод и взаимодействовать с так называемыми событиями . На выбор доступны различные события, такие как касание, нажатие, принудительное нажатие, зависание и многое другое. Вы можете перехватывать такие события и выполнять некоторый код, когда пользователь выполняет действие. Мы используем событие onTap и в ответ на это ( -> ) выполняем код, указанный ниже. В компоненте потока мы показываем фрейм списка, а также раскрываем верхний и нижний колонтитулы.

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

 button.onTouchStart -> this.animate properties: scale: 1.1 backgroundColor: "#f1f1f1" curve: "spring"

Здесь я использовал событие onTouchStart , чтобы увидеть анимацию перед переходом на следующий экран, который запускается, когда пользователь отпускает палец ( onTap или onClick ).

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

 flow.backgroundColor = "#555555"

Теперь пришло время показать меню. Убедитесь, что вы включили menu_button для кода, и выполните следующие строки кода:

 menu_button.onTap -> flow.showOverlayLeft(menu)

Мы используем метод showOverlayLeft() и передаем имя фрейма в качестве параметра. В результате экран анимируется с левой стороны, а меню скрывается еще одним тапом и даже скрывается тапом за пределами самого меню. И все это с помощью одной строки кода!

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

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

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

Как вы видели, я закрыл меню, просто щелкнув пустую область справа (демонстрируя магию компонента потока). Теперь взгляните на документацию компонента потока и попытайтесь выяснить, как выполнить следующую задачу: Мы хотим, чтобы кнопка «x» закрывала меню и показывала предыдущий экран. Прежде чем идти дальше, попробуйте выяснить, как это сделать правильно, и напишите строки кода самостоятельно.

Если на данный момент это все еще не ясно, не волнуйтесь! К концу урока это станет легче понять. Здесь мы будем использовать CoffeeScript (после включения элемента close_button для представления кода):

 close_button.onTap -> flow.showPrevious()

Здесь showPrevious() — это просто метод компонента потока, который позволит вам перейти к последнему экрану. Теперь попробуйте снова написать код самостоятельно. Вам нужно связать article_list и arrow_button с кодом и сделать так, чтобы article_list показывал соответствующий экран, а также заставить arrow_button переходить к предыдущему. Кроме того, нам нужно будет скрыть и показать верхний и нижний колонтитулы, где это необходимо.

Поздравляем, если вам это удалось! Вот код, который я использовал:

 article_list.onTap -> flow.showNext(detail) flow.header.visible = false flow.footer.visible = false arrow_button.onTap -> flow.showPrevious() flow.header.visible = true flow.footer.visible = true

Получение данных для нашего прототипа

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

Этот подход аналогичен тому, который используется при работе с переменными и наборами данных в Adobe Photoshop. Если вам интересно, прочитайте больше: «Создание графики, управляемой данными, в Photoshop».

На самом деле, сначала я хотел бы познакомить вас с более простым решением, но все же тем, которое даст вам контроль над вашим текстом из кода! Вернитесь в режим конструктора и поместите текст в поля в фигурных скобках, например: {item_1} {item_2} ...

Убедитесь, что текстовые поля включены для представления кода, а в представлении кода вы можете поместить все предопределенные строки в массив . (Если вы хотите узнать больше о массивах, я рекомендую прочитать «Шпаргалку Framer: Loops & Arrays».)

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

 categories = ["Graphic Design", "Mobile Apps", "Web Design", "User Experience", "Front-End Dev", "User Research"]

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

 print "Hello World"

Консоль можно обновить, нажав Command + R. Доступ к данным так же прост, как это:

 print categories

Эта строка кода отобразит все данные в массиве categories . С помощью массивов вы можете легко получить доступ к отдельным элементам, проиндексированным в массиве, поместив номер в скобки, например:

 print categories[2]

Это вернет третий элемент в коллекции, потому что мы начинаем считать с нуля. Теперь воспользуемся функцией шаблона TextLayer Framer для обновления первых двух строк:

 item1_txt.template = categories[0] item2_txt.template = categories[1]

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

Куда пойти отсюда

Отличная работа! На этом этапе вы должны уметь ориентироваться во Framer и создавать несколько простых прототипов.

Примечание: я рекомендую вам попробовать мой собственный видеокурс по Framer — вы можете посмотреть некоторые уроки бесплатно. Кроме того, книга Теса Мата по Framer — отличный ресурс для изучения и понимания Framer и CoffeeScript. Книга платная, но вы можете прочитать из нее образец главы (прежде чем решить, хотите ли вы ее купить).

Я надеюсь, что вы нашли эту часть статьи полезной. До этого момента мы следовали простым способам заставить наш прототип работать. Но Framer — это гораздо больше! Вот почему я написал дополнительный бонусный раздел с более продвинутыми методами. Если вы готовы принять вызов, переходите к следующей части: JSON!

Доступ к данным из JSON (раздел дополнительного руководства)

В качестве мощной альтернативы предыдущему решению вы можете использовать внешний API и подключаться к нему напрямую. Хотя для этого конкретного примера это немного излишне, более продвинутые пользователи выиграют от этой идеи. Сначала закомментируйте код, отвечающий за заполнение текстовых полей (выделите код и нажмите Command + / ). Самый простой способ — получить файл локально и загрузить его во Framer. Желательно, чтобы это был файл JSON, и получить его можно разными способами, например:

• используйте мой пример файла JSON,
• создайте его с нуля, используя такой инструмент, как Dummi или JSON Editor Online,
• использовать некоторые фиктивные данные из списков,
• получить соответствующий файл от разработчика, с которым вы работаете.

Но подождите, что такое JSON?

JSON (нотация объектов JavaScript) — это облегченный формат обмена данными. Людям легко читать и писать. Машины легко анализируют и генерируют. JSON — это текстовый формат, который полностью не зависит от языка, но использует соглашения, знакомые программистам языков семейства C, включая C, C++, C#, Java, JavaScript, Perl, Python и многие другие. Эти свойства делают JSON идеальным языком обмена данными.

Вы можете использовать реальные данные для всего процесса проектирования! Если вы используете Sketch, это можно сделать с помощью расширения InVision Craft. Он может загружать локальный или удаленный файл JSON и извлекать данные для использования в макете. Чтобы узнать больше, ознакомьтесь с подробной статьей Кристиана Краммера «Плагин Craft for Sketch: проектирование с использованием реальных данных». Также прочитайте руководство Wojciech Dobry по Framer «Прототипирование с использованием реальных данных».

Теперь давайте поместим этот файл в папку проекта. Каждый раз, когда вы сохраняете новый проект Framer, создается папка с именем вашего проекта. Откройте его в Finder и поместите файл JSON рядом с файлом .coffee в этой структуре.

Файл JSON, с которым я работаю, выглядит так:

Мы собираемся использовать данные категорий во Framer и заменить фиктивный контент, который у нас есть в кнопках на экране списка. Просто убедитесь, что вы дали правильные имена полям (в моем случае item1-txt , item2-txt и т. д.) и что вы включили их для просмотра кода с целевым значком.

Давайте загрузим фид во Framer:

 data = JSON.parse Utils.domLoadDataSync "feed.json"

Мы используем JSON.parse , а также класс Utils — пара, которая выполнит всю тяжелую работу по переводу JSON на человеческий язык и помещению всего этого в data (имя, которое мы использовали). Чтобы отобразить данные из верхней части нашего файла .json , мы можем распечатать их:

 print data.categories

Из объекта данных мы можем извлечь определенные элементы, как в предыдущем примере.

 print data.categories[2]

Давайте создадим массив со всеми текстовыми полями:

 textfields = [item1_txt, item2_txt, item3_txt, item4_txt, item5_txt, item6_txt]

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

 for i in [0...6] textfields[i].text = data.categories[i]

Циклы позволяют многократно запускать один и тот же код. It starts with for , and then we define a variable, which I've called i . This variable will hold whatever information we pass and then will increment with each loop. In this case, we pass numbers from 0 to 5 — [0...6] is just a way of saying this. You can check out the values of i in the loop by doing the following:

 print i

We need it to loop exactly six times (0,1,2,3,4,5), so that we can address each fild on one iteration. Putting i at the end of textfields will return textfields[0] , textfields[1] , and so on; this way, we can address all of the text fields in the array. Again, if you want to double-check, print it! Put more simply, what we've done here is just an easier way of saying this:

 item1_txt.text = data.categories[0] item1_txt.text = data.categories[1] item1_txt.text = data.categories[2] ...

It's easier to grasp, but code-wise, this solution is not elegant at all. That is why we were using a loop here.

The result of our work is that all of the data is populated in the text fields:

Let's add some links to these items so that we can go to the detail screen. Doing it in the loop is a smart move because we can again add it all at once. Here is the next part of the for in loop (remember to keep the indentation).

 textfields[i].onTap -> flow.showNext(detail) flow.header.visible = false

If you want to be more elegant, you can make the items tappable, not only the text. Remember, however, that you have to add them to an array first; so, just before the loop, you can put this:

 items = [item1, item2, item3, item4, item5, item6]

Then, in the loop, change textfields[i] to items[i] . This whole code block will now look like this:

 textfields = [item1_txt, item2_txt, item3_txt, item4_txt, item5_txt, item6_txt] items = [item1, item2, item3, item4, item5, item6] for i in [0...data.categories.length] textfields[i].text = data.categories[i] items[i].onTap -> flow.showNext(detail) flow.header.visible = false

If you want to take this to the next level and display different data depending on the button clicked, my hint is to use this in the event, or get the information from the event by putting (e) next to onTap . I do not recommend doing that now, though: Going crazy with the data is not necessary here. Our main goal is to create a prototype, not a real complex application. Keep that in mind. This JSON example was merely to demonstrate that it is possible to use real data in a Framer prototype.

You probably noticed that we're hiding the header here. That is because we've created a separate header for the detail view. There is a simple arrow icon that we want to link back to the previous screen. This is the block of code we'll use:

 arrow_button.onTap -> flow.showPrevious() flow.header.visible = true flow.footer.visible = true

Again, showPrevious() is a ready-made method of the flow component, and I just looked it up in the docs!

Our simple prototype is ready, and it looks like this:

You can download the complete Framer file. Surely, you can tweak it with extra animations, screens and even more data (loaded from a JSON file). I did not want to make it more complex because I wanted to keep the tutorial concise. But trust me, you have enough information to finish this prototype yourself. Just start experimenting with it and you'll see: It's so much fun. Удачного кодирования!