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

Использование динамических данных с помощью 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 поможет некоторым из вас и вдохновит наши инструменты на развитие в ближайшем будущем.

2 Комментариев
Старые
Новые Популярные
Межтекстовые Отзывы
Посмотреть все комментарии
Похожие статьи
Первое впечатление от Sketch Libraries
Подробнее

Первое впечатление от Sketch Libraries

Sketch Libraries дает возможность дизайнерам делиться символами между документами и обновлять их, чтобы они всегда синхронизировались.
Автоматический экспорт исходника Sketch в HTML и CSS код
Подробнее

Автоматический экспорт исходника Sketch в HTML и CSS код

Наш процесс преобразования дизайна Sketch в веб-сайт включает в себя много шагов. В основном, мы конвертируем артборды и слои Sketch в пакет файлов, который включает в себя HTML, CSS, изображения и файлы шрифтов, готовые к развертыванию.

Лучшие статьи, раз в неделю, с доставкой на почту

Total
0
Share