Использование динамических данных с помощью Flex Layout в Sketch
Наш канал в

Использование динамических данных с помощью Flex Layout в Sketch

Дизайн с живым контентом очень неустойчивый, если нужно урезать или добавить больше пары полей. А что насчет дизайна новостной ленты с самыми свежими новостями? Это трудоемкий и времязатратный процесс. Сообщество дизайнеров в курсе этой проблемы, и в последнее время выходит довольно большое количество плагинов вроде Craft от InVision LABS. Я попробовал использовать Craft и был действительно впечатлен – пара кликов и нужные данные на месте – и никакого кода вручную! Если вы еще не попробовали, обязательно попробуйте. Хотя, проблема заключается в том, что нам по-прежнему приходится использовать статический дизайн-инструмент для динамического мира.

Напряг в разработке гибкого, динамического контента с помощью статического инструмента выливается в вопросы вроде “Должны ли дизайнеры писать код?”. Этот пост не будет отвечать на данный вопрос, он больше прояснит, как код может помочь дизайнерам.

Сопутствующие дисциплины

Для создания стрима новостей я использовал плагины Data Populator от Precious Design Studio и Lukas Ondrej и Flex Layout от Matej Hrescak.

Я использую Data Populator вместо Craft, потому что я слишком ленив, чтобы нажимать на каждый элемент, который я хочу наполнить динамическими данными. Data Populator позволяет вам загружать данные, используя плейсхолдеры для наполнения данными из файла JSON.

Flex Layout основан на JavaScript-реализации Flexbox из проекта React Native от Facebook. Мне нравится, как Матей вывел таблицу стилей “css” на новый уровень, превратив ее в визуальные переменные. Это поясняет, о чем идет речь, когда необходимо подготовить спецификации дизайнов для разработчиков. Благодаря наличию спецификаций и дизайна бок о бок каждый разработчик понимает, как должен выглядеть конечный результат.

Начните с пустого места

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

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

Сборка в одно целое

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

Вот видео-пример того, что можно сделать с помощью обоих плагинов:

Использование Data Populator и Flex Layout plugins

Когда этот подход не работает?

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

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

Это и есть будущее наших дизайн-инструментов?

Sketch – это инструмент для статического дизайна, но так как мы добавляем новые инструменты и плагины, мы движем мир из статики в сторону динамики. Только потому, что мы можем это сделать, имеет ли перспективы такой подход? Тут я немного растерян, так как некоторые вещи, такие как CSS-стилизация проще реализуется в коде (например, Sass).

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

Подпишитесь на рассылку

Раз в неделю мы будем присылать на почту дайджест с лучшими материалами

Похожие записи

Полное руководство по дизайну iOS 9 в Sketch

iOS сильно выросла в течение последних лет. С ее iOS 9 апгрейдом, Apple представил новый системный шрифт под названием San Francisco, 3D Touch и многозадачность на iPad. В Xcode вы найдете Stack Views, фантастический инструмент для более адаптивных макетов, гораздо проще Auto Layout.

Самое подробное руководство по дизайну в Sketch

Работая со Sketch последние три года, я освоил ряд ключевых техник, которые значительно улучшили мой рабочий процесс. Так как я, помимо рисования, также обожаю прототипировать и кодить, мне нужен инструмент для быстрого выполнения дизайн-проектов и легкой генерации исходников. Sketch вместе с его плагинами и другие инструменты для прототипирования полностью справляются с этой задачей. Часть 1 Часть 3 Часть 4

Серия уроков Sketch (часть1 из 5): Настройка Sketch

Первое что нам следует изучить, это настройка Sketch. Если вы только начали создавать дизайны для веб и являетесь новичком в Sketch или Photoshop, или вы просто разработчик, желающий включить UI-дизайн в свой репертуар, эти простые уроки по настройке идеально подойдут для быстрого ознакомления с работой Sketch. Часть 2 Часть 3 Часть 4 Часть 5