Эта статья посвящена методам, которые я открыл для себя в процессе создания новых продуктов для Buninux.com.
Плагины стали неотъемлемой частью рабочего процесса дизайнера, позволяя устранить многочисленные пробелы, объединяя несколько плагинов в единый рабочий процесс для управления библиотеками и исходниками.
Новые расширения выходят очень часто, поэтому я хотел бы рассмотреть те немногие из них, которые заслуживают внимания и дополнят ваш инструментарий решениями для оригинальных вариантов использования. ?
Массовый импорт символов
Когда вы спешите и хотите сделать прототип очень быстро, было бы неплохо использовать набор элементов пользовательского интерфейса, который вы недавно загрузили.
И всякий раз, когда вы используете набор элементов интерфейса, вы в основном копируете и вставляете множество артбордов из одного активного окна в другое, теряя много драгоценного времени на переключение между ними.
Вместо этого вы можете разово импортировать все необходимые мобильные / веб-артборды и использовать их в качестве символов для сессий прототипирования.
Чтобы сделать это, используйте следующую комбинацию плагинов:
- Откройте файл набора элементов интерфейса. Выберите все артборды, которые вы хотите использовать для прототипа.
- Запустите плагин Rename it, чтобы установить правильную структуру меню для элементов, которые вы хотите импортировать UI KIT / %*
- Используйте плагин Batch Create Symbols, чтобы преобразовать выбранные артборды в символы.
- Сохраните и добавьте этот документ в виде библиотеки.
- Переключитесь на новый файл, например, Prototype.
- Импортируйте преобразованные экраны с помощью меню символов, плагина Runner или просто переопределите символы.
Копирование / вставка символов общих библиотек
Если вы скопируете контент из библиотеки и вставите его в новый файл, вы заметите, что вставленные символы не синхронизируются с основной библиотекой, и на странице символов появятся дублированные символы.
Это может быть очень неприятно, особенно при постоянной работе с несколькими библиотеками. Благодаря плагину Library Symbol Replacer вы можете решить эту проблему и направить все вставленные символы в исходный источник.
- Скопируйте(cmd + c) нужные компоненты из файла библиотеки,
- Откройте новый файл и вставьте их (cmv + v).
- Запустите плагин, чтобы найти файл библиотеки через диалоговое окно выбора.
- Свяжите символы и дайте разрешение на удаление дублированных экземпляров.
В результате двойной клик по любому символу приведет к оригинальному документу
Повторное связывание символов с новой библиотекой
Если вы похожи на меня и предпочитаете хранить символы в отдельной библиотеке для сборки своих проектов, вы можете столкнуться с тем, что новые идеи не всегда приходят с первого раза, и вам нужно постоянно переделывать этот файл.
Поэтому иногда вам может понадобиться продублировать его, внести изменения в конкретный компонент или стиль, а затем связать ваши активные документы с более новой версией вашей библиотеки. Чтобы без проблем сделать это, вам необходимо:
- Продублируйте файл библиотеки.
- Присвойте ему новое имя, напр. New libraryи добавьте файл в виде библиотеки.
- Внесите изменения и сохраните их.
- Откройте документ, который вы хотите повторно привязать, запустите плагин Automate и выберите команду Library/Imported Symbols Link Manage.
- Выберите символы, которые вы хотите связать с новой библиотекой. И нажмите Close.
- Вы увидите уведомление «Доступно обновление» (Update Available), которое проведет вас через все внесенные изменения.
Примечание: Если вы используете одинаковые имена для своих библиотек, это приведет к конфликту ID библиотеки. К счастью, это можно исправить с помощью команды Automate→Library→Fix Library ID Conflict.
Темы дизайн-системы
Хороший дизайн интерфейса – это адаптируемый дизайн. Тот, который вы можете вписать в более широкий спектр брендов и разумно настроить для целевой аудитории.
Поэтому, чтобы иметь возможность быстро создавать несколько вариантов ваших дизайнов, вы можете использовать очень удобный плагин под названием Camilo, он поможет вам быстро переходить от одной цветовой темы к другой.
Лучший способ правильно использовать его – хранить общие стили в отдельной библиотеке, которая будет синхронизирована с остальным набором элементов интерфейса. Тем не менее его можно использовать с любой вашей библиотекой.
- Продублируйте библиотеку стилей, задайте ей новое имя, например, New library.
- Внесите изменения в стили слоя или текста.
- Добавьте дублированный файл в качестве библиотеки и сохраните его.
- Откройте документ, синхронизированный с основной библиотекой, и запустите плагин.
- Выберите нужную библиотеку из списка, и все готово.
Заслуживают упоминания
Этот набор инструментов решает менее сложные задачи, но выделяется среди конкурентов своим пользовательским опытом и поддержкой последних версий Sketch.
Find and Replace Text
Этот плагин позволяет искать / заменять текст по всему документу и его отдельным объектам, таким как страницы, артборды или отдельные слои, и помогает быстро привести все текстовые плейсхолдеры в единый вид.
Скачать:
https://github.com/chriswetterman/sketch-find-and-replace-text
Auto Arrange
Наконец, плагин для сортировки артбордов на основе их позиции на странице по осям X, Y. Это очень полезно при организации большой дизайн-системы или сортировке многочисленных артбордов.
Скачать:
https://github.com/srbsingh3/autoarrange
Connection Flow Arrows
Отличный плагин для создания / удаления соединительных стрелок, чрезвычайно полезный при разработке юзерфлоу или карт сайтов, имеет отличную поддержку и предоставляет настройки для кастомизации стиля стрелок.
Скачать:
https://github.com/faridsabitov/Sketch-Connection-Flow-Arrows
Вывод
В процессе создания идеальной библиотеки вы можете столкнуться с различными препятствиями. Но, помимо других инструментов дизайна Sketch по-прежнему обеспечивает лучший опыт для управления и организации ваших исходников.
Лучший способ понять все тонкости – это хороший пример, сопровождаемый набором правил / решений по дизайну, которые вы можете изменить и использовать для создания лучших продуктов. ?
Откройте для себя удивительные примеры интерфейсов, которые используют тысячи дизайнеров и разработчиков по всему миру, посетите сайт Buninux.com, дайте им шанс.
Напоследок
- Больше новостей и обновлений вTwitterиDribbble.
- Прочтите предыдущую статью, и скачайте новейшие бесплатные ресурсы пользовательского интерфейса.
Полезная коллекция бесплатных интерфейсов Sketch
Перевод статьи Bunin Dmitriy
Топ коментарі (0)