10 возможностей Avocode, о которых вы, возможно, не знаете

3 сентября 2018

С программным обеспечением Avocode вы можете быстро, качественно и продуктивно работать над созданием прекрасного дизайнерского проекта в любом масштабе. Знание полезных "фишек" существенно облегчит и ускорит рабочий процесс, расширит ваши возможности.

1. Основные возможности.

Для оперативной и комфортной работы вы можете использовать следующие функции:

• экспортировать любой слой без «Создания экспортных позиций» (да, здесь есть встроенный экспорт пакетных данных)

• добавить варианты и изменить формат, разрешение изображения;

• выбрать слой или группу слоев и нажать «Экспорт». Когда работаете с отдельными слоями, также можно дважды щелкнуть по ним - все автоматически экспортируется;

• не нужно устанавливать слои как экспортируемые в эскиз, переименовывать их в Photoshop или маркировать их для экспорта в XD;

• не бойтесь добавлять столько вариантов экспортируемого изображения, сколько вам требуется;

• выбирайте разный масштаб (до 4-кратного увеличения или уменьшения или введите свой вариант конкретного разрешения) для каждого рабочего поля;

• выбирайте любой формат сохранения данных (JPG, PNG, SVG, WebP);

• переименовывайте слои и сразу экспортируйте сразу несколько вариантов изображения;

• удерживая клавишу SHIFT, вы можете выбрать сразу несколько слоев;

• при необходимости снимите флажок «Объединить слои»;

• вы можете переименовывать каждый объект изображения, изменять его разрешение или формат.

2. Настройка рабочих компонентов режима Symbol с первичными установками.

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

Если вам нужно получить доступ к главному символу, просто нажмите кнопку «Открыть символ», и основная версия откроется на новой вкладке. «Настройка Символа» регулирует работу с изображениями, которые импортируются непосредственно в Avocode или с плагином Avocode Sketch v. 50.0.0 и выше.

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

3. Регуляция вывода экспортированного кода (на 10 языках).

Во время проверки дизайна нажмите на символ шестеренки под панелью кодировки. Выберите любой из 10 поддерживаемых языков программирования и нажмите «Настройки кода».

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

Используйте дополнительные параметры для разных типов действий:

• изменяйте цветовой формат или программные единицы (CSS, CSS в JS, React Native);

• выберите тип селектора - класс, идентификатор, элемент (CSS);

• заменяйте библиотеки миксов для Less (Less Hat), Sass (Compas, Bourbon), Stylus (Nib) и SCSS (Compas, Bourbon), стилей обертывания в элементе формы или элементе элемента (Android).

Чтобы получить доступ к этим настройкам из любого раздела, нажмите CMD / CTRL +, ярлык или щелкните аватар в верхнем правом углу окна Avocode и выберите «Настройки приложения», переключитесь на вторую вкладку «Код».

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

4. Гибкие настройки проекта и параметры дизайна.

Мы стараемся предоставить вам интерфейс, максимально гибкий в работе, насколько вам это требуется.

Изменение настроек проекта:

• когда вы создаете новый проект, вы можете настроить параметры в самом начале работы, но вы всегда можете отредактировать их позже;

• переименуйте проект в любое время;

• меняйте единицы измерения интерфейса, цветной формат и язык экспорта кода;

• измените язык кода по умолчанию для всех «дочерних» конструкций;

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

• переименовывайте файл вашего проекта в любой момент;

• настраивайте единицы измерения, цветной формат, язык экспорта кода по умолчанию (даже на уровне монтажных панелей внутри файла дизайна).

5. Перемещение проектов между проектами и внутренними папками.

Выберите один или несколько файлов проекта, нажмите «Переместить в» и выберите проект или подпапку. Вы также можете создать новый проект при перемещении изображения.

Обратите внимание, что вы можете перемещать только целые файлы проекта (но не отдельные графические элементы Sketch, Adobe XD или рамки Figma, эти действия могут вызвать конфликты при синхронизации новых версий).

6. Установка схемы экспорта в настольном приложении программы.

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

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

7. Увеличение и уменьшение: масштабирование проекта.

Удерживайте клавиши CMD (macOS) или CTRL (Windows, Linux) и прокрутите вверх / вниз, чтобы увеличить / уменьшить масштаб. Вы можете масштабировать данные плавно на один процент одним движением в диапазоне 20%-1000%. Вы также можете ввести конкретное значение для масштаба: например, 76%, используя функцию зума в нижнем правом углу панели.

Совет: удерживайте при масштабировании клавишу SPACE или используйте ручной инструмент для панорамирования холста.

8. Поиск рабочих файлов и папок на всех уровнях проекта.

Независимо от того, находитесь ли вы в диспетчере проектов, режиме «Просмотр» или «Комментарий», вы всегда можете нажать комбинацию клавиш CMD + F (macOS) или CTRL + F (Windows, Linux) и ввести наименование искомого файла. Переключайтесь между открытым проектом или всеми остальными проектами.

9. Прямой путь к файлу проекта с разных уровней.

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

Откройте проект со стороны боковой панели «Действия». Откройте проект, чтобы увидеть панель «Действия». Если вы щелкнете по области определенного уведомления, вы попадете в место расположения файла (в случае с файлами Sketch и XD вы также увидите монтажные области). Если вы нажмете прямо на предварительный просмотр монтажа, в режиме проверки откроется монтажная область.

Откройте дизайн из уведомления Slack. Убедитесь, что вы подключили проект Avocode или всю вашу рабочую команду к каналу Slack. Всегда, когда создается новая версия дизайна или новый комментарий, синхронизированный с Avocode, все участники проекта будут проинформированы об изменениях по данному каналу. Нажмите на уведомление Slack, и вы попадете в открытый файл рабочего дизайна в менеджере проектов Avocode.

10. Предварительный просмотр проектов перед их открытием.

Предварительный просмотр позволяет просматривать проекты, не открывая их. Для этого выберите эскиз дизайна в Avocode Manager и нажмите SPACEkey.

Чтобы выполнить переключение между полным предварительным просмотром, используйте параметры «По размеру экрана» или предварительный просмотр «Оригинальный размер». Используйте стрелки, чтобы перемещаться между файлами.