Как Dropbox использует Framer X и реальные данные для создания дизайна

Ранее в 2018 году я писал о прототипировании для десктопа и о том, как настройка играет важную роль при проектировании десктопных интерфейсов. Но Desktop Kit не хватало одного важного компонента — реальных данных.

С релизом Framer X наша команда решила перестроить Desktop Kit с нуля, используя реальные данные.

Добавление реальных данных во Framer X

Framer X похож на любой другой инструмент дизайна, но «открыв капот» вы обнаружите, что все построено на React. Это означает, что любой, кто хоть немного знаком с React, может создавать новые компоненты, которые делают практически все, что вы только можете себе представить. Мы рады поделиться несколькими компонентами, которые мы создали в ходе первой недели наших экспериментов.

Проверка локализации с Google Translate API

Хотите иметь возможность быстро перевести свой текст на немецкий, чтобы проверить, оставили ли вы достаточно места для локализации? Мы создали компонент переводчика, который использует Google Translate API для перевода вашего текста на более чем 100 языков.

Проверка локализации с Google Translate API

Динамические обои с Unsplash API

Хотите быстро отобразить свой дизайн в реалистичной среде браузера? Мы создали компонент браузера, который помещает вашу страницу в браузеры Safari или Chrome со случайными обоями из Unsplash API.

Динамические обои с Unsplash API

Реалистичные браузеры

В нашем предыдущем Desktop Kit был только браузер Safari, несмотря на то, что Chrome имеет почти 60% доли рынка. Используя Statvoo API для добавления иконки сайта, мы, наконец, смогли создать реалистичную вкладку Chrome.

Реалистичные браузеры со Statvoo API

Компоненты, созданные сообществом

В публичных API-интерфейсах доступно столько невероятных наборов данных, что мы затронули лишь вершину айсберга. Сообщество уже опубликовало в магазине Framer X некоторые удивительные компоненты, которые позволяют вам использовать такие вещи, как реалистичные аватары, интерактивные карты Google, воспроизводимые YouTube видео и даже проигрыватель Spotify.

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

Создайте что-нибудь с API своей компании

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

«Когда мы не работаем с реальными данными, мы обманываем самих себя»

― Джош Пукетт

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

Добавление Dropbox API во Framer X

Проектирование с использованием фактических данных пользователя — это то, о чем мы давно мечтали, но, что было недосягаемо. Мы создали модуль Framer Studio, который вытащил пользовательские данные из Dropbox API (используя OAuth), но для его настройки потребовалось несколько технических шагов и знание JavaScript. Более крупные компании, имеющие специализированные команды, ориентированные на определенные инструменты дизайна, создали мощные плагины Sketch, которые используют анонимные пользовательские данные, но это пока не наш уровень.

С Framer X мы смогли быстро создать компонент Finder, который извлекает данные точно так же, как и в вашем Dropbox. В приведенном ниже примере я аутентифицировал свой аккаунт Dropbox вместе с компонентом, так что вы видите мои реальные Dropbox-папки.

Выбор между генерируемыми данными или реальными данными из Dropbox API
Выбор между генерируемыми данными или реальными данными из Dropbox API

Код, который соединяет Dropbox API с нашими компонентами дизайна
Код, который соединяет Dropbox API с нашими компонентами дизайна

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

Теперь, когда у нас есть доступ к реальным данным во Framer X, мы можем воплотить в жизнь практически любой проект с реальными структурами данных. В Dropbox Desktop Kit (см. ниже) вы найдете полностью интерактивное окно Finder — попробуйте его!

Воспроизведение опыта Finder с использованием только Framer X. Dropbox Desktop Kit X
Воспроизведение опыта Finder с использованием только Framer X

Dropbox Desktop Kit X

Dropbox Desktop Kit X

Теперь вы можете загрузить Dropbox Desktop Kit в магазине Framer X. Мы перестроили его с нуля с использованием кода и реальных данных, чтобы сделать компоненты более мощными, чем у оригинального Desktop Kit

Dropbox Desktop Kit X Dropbox Desktop Kit X компоненты

Внутри вы найдете более сотни компонентов пользовательского интерфейса MacOS от кнопок и push-уведомлений до рабочих приложений.

Dropbox Desktop Kit X все компоненты

? Скачайте и наслаждайтесь!

Скачайте Desktop Kit в магазине Framer X и поделитесь своим мнением! Вскоре мы планируем добавить компоненты Windows 10.

Скачайте Desktop Kit в магазине Framer X

Огромное спасибоJustin Tranза иллюстрации,Wes OHaireза помощь в создании Desktop Kit иAndrea Drugayза помощь в написании этой статьи.

Хотите больше материалов от команды дизайнеров Dropbox? Подписывайтесь на нашблог,Twitter иDribbble. Хотите творить волшебство с нами?Посмотрите список открытых вакансий!

Нет комментариев
.