Principle программа что это

Principle для профессионалов: самое полное руководство по работе в связке Sketch — Principle

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

Организация – это ключ ко всему

Ключом к приятному опыту работы в Principle является организация. И начинается она с вашего файла Sketch. Если вы не организовались правильно перед синхронизацией Sketch-файла с приложением, ждите кошмара вместо нормальной работы.

Как вы должны это сделать.

О важности организации и модульности файлов дизайна написано немало, так намного быстрее и удобнее работается. Я сам использую организацию, очень похожую на то, как упорядочивают свою работу программисты. Ранее я изучил синтаксис Block Element Modifier (BEM), когда раньше занимался программированием, и этот подход значительно изменил мою работу. Синтаксис BEM (Блок, элемент, модификатор) можно разбить на простые составные части: Название-блока_название-элемента_название модификатора Если по-русски, то это выглядит так: Человек Человек_рука Человек_рука_вправо человек_рука_влево Если вы посмотрите на мои артборды и группы/слои, вы увидите, что они следуют этому синтаксису, например: Название-артборда Название-артборда_модификатор Группы-слои также называются по этому принципу: Название-модуля Название-модуля_название-элемента Название-модуля_название-элемента_название модификатора

SOLID принципы: SRP (Принцип единственной ответственности, Single Responsibility Principle)

Я делаю так по нескольким причинам:

1. Легко найти все, что нужно, и следовать сценарию приложения.
2. Мои дизайны модульно структурированы, что позволяет мне мгновенно каскадировать изменения, экспоненциально увеличивая скорость итераций.
3. Когда дело доходит до передачи дизайна кому-то, файл структурирован так, что его легко понять без лишних манипуляций.

Базовый принцип

Если вы хотите, можете использовать Principle, как использовали бы InVision или любой другой похожий продукт — реализуя однокликовые взаимодействия на основе состояний. Это не лучший способ использования Principle, но если нужно сварганить прототип по-быстрому, это самый удачный вариант.

Достичь этого можно просто экспортируя каждое состояние интерфейса в PNG, и затем добавляя невидимые слои поверх ваших представлений, чтобы они работали как хот-споты. Самый важный момент — вы не переключаете непрозрачность слоя до нуля, вы доводите непрозрачность до нуля в селекторе цветов. Если вы выключите непрозрачность до 0 в настройках, кнопка станет невидимой и некликабельной. После того, как все хот-споты спрятаны, вам нужно всего лишь соединить экраны, и получится кликабельный прототип! СКАЧАТЬ БАЗОВЫЙ PRD-ФАЙЛ PRINCIPLE

Principle для профессионалов

Создание более детального, сложного прототипа в Principle может быть более трудоемким. И тут на помощь приходит правильное расслоение и нейминг. Вы уже наверняка заметили и без меня, что состояния, которые видны в моем файле Sketch, не совпадают с теми, что есть в моем файле Principle. И на это есть своя причина, зарытая в анимации. В Principle анимация основана на состояниях.

Тепловой насос: устройство и принцип работы

То есть группы и слои движутся на основе их состояния на каждом артборде. В примере в слое demo-shape нет радиуса границ, заливка оттенка hex #FA5367 и координаты (70, 500) в State 1 анимации (первый кадр). В State 2 демо-фигура уже идет с радиусом границ 70, заливкой hex #2B96FE и координатами (190, 270) на экране. Между состояниями это будет выглядеть примерно так: Если у вас получаются неказистые анимации, скорее всего, причина в том, что группы и слои не были названы корректно перед импортом.

Principle — это инструмент для прототипирования на основе состояний, которые использует линейное перемещение для передвижения групп и слоев на основе их названий, которые вы задаете, выбранных вами атрибутов для каждого состояния, а также настроек драйвера или анимации для каждого взаимодействия.

При импорте без определения групп/слоев, Principle задаст эти имена за вас. Эта автоматизация ведет к конфликтам названий групп/слоев между состояниями, что и приводит в итоге к корявым анимациям. Чтобы анимации были плавные, нужно привести названия групп/слоев в полное соответствие, а также убедиться, что они доступны на каждом экране, с которым вы взаимодействуете – включая состояния, где эти группы/слои должны быть невидимы. Вот что на самом деле происходит под капотом прототипов Principle, и почему вы увидите столько разных слоев, не вмещающихся в артборд/рабочее окно в моих файлах Principle: Как вы видите, клавиатура доступна для каждого состояния приложения, но показывается в рабочем окне только по необходимости, как и кнопка ‘Log Out’. Если клавиатура и кнопка не были бы доступны на каждом состоянии, программа бы не распознала их переход, и они бы появлялись гораздо быстрее — по ощущениям было бы слишком внезапно или выглядело глюком. СКАЧАТЬ НЕАНИМИРОВАННЫЙ PRD-ФАЙЛ СКАЧАТЬ АНИМИРОВАННЫЙ PRD ФАЙЛ

Principle для экспертов

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

Мультимедиа

Одним из наиболее мощных аспектов Principle является возможность встройки видео, чего до сих пор не позволяют многие другие инструменты прототипирования.Эта опция выведет ваш прототип на новый уровень, особенно если ваш продукт ориентирован на видео-контент. СКАЧАТЬ ИСТОЧНИК

Декоративные переходы

Хотя Principle — это не та программа, в которой обычно создают дизайны, вы можете использовать векторные исходники, созданные в других программах, для создания красивых эффектов с помощью небольшого взлома системы. Этот эффект стал возможен благодаря креативной анимации и наслоению. СКАЧАТЬ ИСТОЧНИК

Нелинейное движение

Ощущение нелинейности в движении достигается за счет креативного наслоения. Нелинейные исходники сами по себе создаются в векторных редакторах, а затем импортируются в Principle для анимирования. Если вы откроете исходник этого файла, вы увидите, что все движение в этом прототипе создано с помощью линейной и вращательной анимации, а иллюзия нелинейности обеспечена креативным наслоением. СКАЧАТЬ ИСХОДНИК

Асинхронная анимация

Как и несколько последних анимаций, эта анимация выглядит намного более сложной, чем является на самом деле. Если вы откроете исходник и поиграетесь с ним, вы увидите, что анимация — это невероятно креативный плод вашего восприятия через комбинацию наслаивания и асинхронных линейных движений. СКАЧАТЬ ИСТОЧНИК

Интерактивное движение

Движение, при котором множество фрагментов движутся с разными скоростями и/или в разных направлениях на основе взаимодействий пользователя с одним слоем/группой обычно называется Драйвер. Драйверы – это немного глубже, чем простая анимация между состояниями, но они не так сложны в сборке, как кажется. Вы можете ознакомиться с драйверами детальнее в документации Principle, а также в отличном видео-уроке. СКАЧАТЬ ИСТОЧНИК

Как далеко может зайти креатив?

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

Для вдохновения посмотрите репозиторий Principle. Спасибо за чтение!

Источник: ux.pub

Анимация прототипов с помощью комбо Principle и Figma

Продуктовый дизайнер (UX/UI), веб-дизайнер и бренд-дизайнер. Опыт проектов в международных компаниях Omega-R (агентство), iSpring Solutions (продуктовая) и со стартапами по всему миру. Преподаватель курсов «UI-дизайн и анимация интерфейсов» и «Веб-дизайн» в Институте программных систем и godesign.school.

Июн 24, 2020 · 3 мин читать

Вы наверняка в курсе, что Principle в паре с Figma помогают творить чудеса в создании интерактивных прототипов, Дак вот, в этой статье мы расскажем все так детально, чтобы вы по итогу просто взяли и попробовали эту пару на деле!

Интеграции Figma и Principle открывает просто безумные возможности по сборке не просто анимашек, а целых интерактивных систем приближенных к реальности (попробуй отличи!), т.е с этим комбо вы можете шлепать продвинутые анимации и воплощать все, что только вам придет в голову (и конечно зайдет юзерам!). А, да. Напомним, что Principle зарелизили в 2015 году, да так, что он сразу ворвался на пьедестал must-have инструментов для ux/ui дизайна. А значит, до интеграции Figma + Principle нужно было просто добраться естественным образом по бэклогу. Такие дела.

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

Что дает интеграция? Если кратко, вы импортируете свои исходники Figma в Principle, а затем накатываете анимацию поверх. Ну не просто анимацию конечно: прорабатываете микровзаимодействия, вытачиваете микро анимации, настраиваете мягкие переходы, в общем доводите прототип до уровня продакшн-реди. Больше никаких листов A4 в прототипах, ну или клик-клик переходов. Только моушн, только плавность, только текучесть, тягучесть, естественностью и непрерывность ux.

Интересуетесь свежими статьями по продуктовому дизайну (UX/UI)?

В этой статье мы постараемся дать самый полный ответ на вопрос: “Почему же поклонникам Principle ну просто крышу сносит!”. Кто-то говорит, что в нем идеальный баланс сочетания простой + функциональный + мощный. А кто-то считает, что в нем все, что только нужно для создания реалистичных прототипов и кодить не нужно. Сейчас все и посмотрим.

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

Дэниэл Хупер, создатель Principle

«А еще при переключении на инженрное мышление, у вас просто отключается визуальный аппрарат решения задачи. Вытачивать детали и творить чувственно-целое — это разные фазы решения задачи и разные стили мышления».

Дэниэл Хупер, создатель Principle

В Principle простой UI и здесь вам уже все будет знакомо. Интеграция работает крайне просто: открываете Principle и через функцию import вытягиваете нужный дизайн из аккаунта Figma.

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

Ребята в Figma говорят, что интеграция надежно вертится на Figma API, основатель Principle связывался с ними и серьезно попыхтел над докой, чтобы заточить все с инженерой точностью. В общем и API Explorer пригодился и дока, не зря делали!

В общем нам в Figma Principle зашел — это очень удобный инструмент для UI-анимации и моушн-дизайна в интерфейсов, даже для начинающих. Вот держите файлик и попробуйте его в деле. Principle скачать можно вот здесь. А если вы не знакомы с Figma, то рекомендую подобрать курс по Figma и стартовать. Спасибо, что были на связи!

Источник: ux-journal.ru

Principle

Есть много вещей, которые вы, возможно, захотите спроектировать: короткая анимация, гладкое взаимодействие или обширное многоэкранное приложение. Principle идеально подойдёт для выполнения этих задач.

Timeline упрощает процесс, чтобы проиллюстрировать идеальный отскок, наплыв и проявление.

Хотите создать совершенно новое взаимодействие? Principle дает вам свободу экспериментировать, не ограничивая вас заранее определенными переходами.

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

С помощью артбордов, волшебных анимаций и timeline, используя Principle, вы получите Déjà vu.

Выберите предустановку устройства или введите пользовательский размер Artboard для создания вашей любимой платформы. События Hover и прокрутка колесика мыши облегчают создание прототипов веб-сайтов и настольных ПК, которые выглядят как настоящие.Principle Mirror для iOS позволяет просматривать ваши проекты на личном устройстве.

При проектировании, вы можете подключить свое устройство к компьютеру, или экспортировать автономное приложение Mac для просмотра.

Источник: appstorrent.ru

Principle программа что это

Я часто сталкиваюсь с ситуациями, когда люди пытаются сложно заанимировать простые вещи. При этом они тратят на это кучу драгоценного времени, но взамен получают только головную боль. Я много об этом думал и даже провел вполне успешный мастер-класс по анимации в Principle в Прожекторе, на котором протестировал нижеприведенные идеи.

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

Кратко о том, как работает Principle

В первую очередь, я хочу объяснить, как работает самый простой путь анимации в Principle (о drivers говорить не буду, да и эту часть можно пропустить, если вы знаете, что и как):

1. у вас есть два арт-борда;
2. они как-то отличаются друг от друга;
3. Principle творит магию и превращает один экран в другой со стандартной скоростью и кривой анимации, которые вы можете изменять.

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

Например, чтобы превратить круг в квадрат, нам нужно:

1. сделать два арт-борда: на одном нарисовать круг (квадрат со скругленными краями), а на другом — простой квадрат, и удостовериться, что имена объектов совпадают;
2. объединить эти арт-борды, например, автоматическими переходами туда и обратно;
3. ну вот – ваш круг трансформируется в квадрат и обратно. Теперь у вас есть возможность настроить скорость и кривую анимации на специальной панели.

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

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

Экран, в котором меняются различные настройки.

И еще одна важная вещь: чтобы гладко что-то анимировать, нужно подготовить движение на предыдущем экране. Опять же, объект должен присутствовать на обоих экранах (даже если он невидим на одном из них), а разница между ними будет анимирована. Позже я приведу пример.

Принцип 1: не использовать «импорт из Sketch»

Итак, вспомним все вышесказанное. Что нам нужно сделать, чтобы, например, анимировать открытие компактного плеера Apple Music при нажатии на трек?

Как минимум, какой-нибудь симпатичный бесплатный UI-кит iOS для Sketch. Я предпочитаю этот.

Арт-борд с компактным плеером Apple Music из UI-кита.

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

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

Хаос из слоев после импорта из Sketch.

Я предлагаю не использовать импорт из Sketch. По крайней мере, пока вы не знаете точно, зачем он вам нужен или не знакомы с документацией Principle по части импорта.

Как по мне, более простым способом будет распланировать свою анимацию и экспортировать из Sketch только необходимые группы как *.png. Даже если сделать это неправильно, их всегда можно заменить или обновить.

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

Чтобы анимировать открытие плеера Apple Music, нам не нужны все составляющие экрана. Нам нужны только следующие png-шки:

• навигационная панель с табами (за которой мы спрячем плеер);
• весь остальной экран со списком песен, но без таббара и плеера;
• плеер.

Всего три импортированных png-шки.

Может, этот плеер не самый удачный и слишком простой пример, но моя задача — продемонстрировать подход. К тому же, я хочу, чтобы у каждого была возможность попробовать, поэтому привожу пример на базе бесплатного и доступного ui-кита, скорее всего известного пользователям Мака ОС iOS 10.

Для того, чтобы все это заанимировать, надо:

1. создать арт-борд с треклистом, таббаром и плеером в том положении, в котором они должны быть;
2. сделать дубликат арт-борда;
3. спрятать плеер на первом арт-борде за таббаром (чтобы подготовить его появление, как мы говорили раньше. Иначе, если бы плеера просто не было на первом арт-борде, на анимации он появлялся бы мгновенно, и мы бы не могли на это повлиять).

Условия, которые нам надо соблюсти:

• одинаковые имена одинаковых слоев на разных арт-бордах;
• правильный порядок слоев — плеер должен быть между таббаром и фоном. И порядок не должен меняться, иначе вид получится не такой, как мы хотели;
• все слои должны существовать на обоих арт-бордах. Таким образом, мы сможем анимировать разницу в их расположении и свойствах. (Помните, мы говорили, что базовая анимация в Principle основывается на разнице свойств слоев на арт-бордах).

Настройки экрана, на которых плеер появляется и исчезает.

Теперь, если мы запустим нашу анимацию (не забудьте связать арт-борды), плеер изменит свою позицию с первоначальной на первом арт-борде, на свою позицию на втором. Все, что нам остается сделать, это настроить тайминг. И я бы добавил немного прозрачности спрятанному плееру.

Есть еще метод: для объединения сложных групп при импорте из Sketch, добавляя ‘*’ к имени группы. Но его стоит использовать в случаях, когда анимация сложная и необходимо регулярно обновлять часто изменяющиеся объекты повторным импортом.

Принцип 2: Это не настоящее приложение, это фейк

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

Это все равно, что вам надо снять фильм, но вы пытаетесь сделать сценарий реальностью.

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

И тут мы подходим к следующему принципу.

Принцип 3: Одно действие = один экран

Не пытайтесь сделать из анимации прототип InVision. Просто распланируйте последовательность действий, как сценарий, и снимите собственный фильм. Это сэкономит кучу времени и сделает жизнь проще.

Простая последовательность экранов, которую я использовал в Louder.me (сейчас в бете).

P.S.: Это моя первая статья и я надеюсь, она вам поможет и сэкономит время при работе с анимацией. А мне очень поможет ваш фидбек, поэтому не стесняйтесь писать мне на Facebook.

Также статья доступна на английском языке на Medium.

Источник: telegraf.design

Principle: инструмент для прототипирования, который вы должны попробовать

От переводчика
Principle — приложение для Mac OS, которое позволяет в два счета создать анимацию элементов пользовательского интерфейса и сгенерировать его интерактивный прототип. Будь то многоэкранное приложение или просто придуманный вами контрол, так просто и быстро реализовать это раньше не позволял ни один сервис. Бенжамин Бергер — бета-тестер ранней версии Principle, описал свой опыт в статье на Medium, где рассказал о первых впечатлениях и привел пару наглядных примеров использования.

———

Вот уже 5 месяцев прошло с тех пор как Даниель Купер показал мне его новый продукт. Тогда он дал мне потрясающую возможность стать бета-тестером ранней версии Principe. До этого я долгое врем искал способ, который бы дал мне возможность быстро оживить дизайн и при этом иметь возможность взаимодействовать с ним.

Я работал с After Effects
Это требовало серьезных временных затрат, выглядело не очень удобно и, по большому счету, было вообще нереально. Я потратил огромное количество времени, работая с кривыми, чтобы добиться идеально гладкой анимации, которую разработчики никогда бы не смогли воспроизвести.

Я пробовал Pixate и Atomic.io
Но так и не разобрался с ними, потому что их интерфейс не очень привычен. Они требуют некоторой практики и времени (которого у меня нет), чтобы понять как они работают. Так что я удалил их, впустую потратив свой 30-дневный триал.

У меня не пошло с Framer.js
Я не очень хорош в программировании. Мне кажется, если ты можешь написать код, чтобы создать прототип, тогда ты способен выучить реальный язык и потратить некоторое время на самостоятельную разработку. (Я преувеличиваю здесь, я знаю, что Framer имеет свои фишки, но все же.)

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

Proto.io потерял меня из-за окна предварительного просмотра
Это очень мощный инструмент, но тот факт, что вам нужно сохранять и перезагружать ваш прототип всякий раз, как вы внесли изменения, стал решающим моментом не в его пользу. Хотя у него есть действительно интересные возможности.

Изучать новые продукты бывает немного лень, не так ли?
Я предпочитаю работать с визуальными средами. И зачастую, использование разных приложений становится контрпродуктивно, если они не используют одни и те же концепции, названия и элементы интерфейса. (Я говорю это тебе Adobe. Как может клавиша T в AE использоваться не для инструмента Текст?)

Мой священный грааль называется Principle
Этот продукт — умный микс между Sketch, Keynote, Flash и After Effects (плюс некоторые крутые возможности для интерактивных прототипов). Что меня поразило в первый момент, все кажется очень знакомым. Если вы работали со Sketch, вы без труда разберетесь с Principle: инспектор, список слоев, артборды.

Как это работает?
1. Вы создаете или импортируете ваш набор элементов интерфейса.

2. Выбираете элемент и способ взаимодействия.

Здесь выделен большой синий прямоугольник. Я выбираю способ взаимодействия — тап по элементу.

3. Автоматически создается копия вашего артборда, где вы можете изменить любой компонент.

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

Это позволяет чертовски быстро и просто создавать сложные переходы.

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

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

Интерактивность
Этот инструмент был разработан в основном для устройств с тач экранами, поэтому он позволяет определить множество типов взаимодействия: тап, драгэнддроп, скролл, долгое нажатие.

Панель анимации
Что общего имеют все статьи об анимации? Они настоятельно рекомендуют никогда не делать анимацию линейной, потому что ее не существует в реальном мире. И здесь Principle снова на высоте. По умолчанию к каждой анимации будет применяться easy-in/easy-out эффект, который вы можете легко перенастроить самостоятельно.

Также эта панель позволяет изменить продолжительность анимации, выбрать какой элемент будет проанимирован первым и создать основные необходимые транзишены.

Панель анимации расположена в самом низу экрана, там вы можете контролировать каждую анимацию (совсем как в After Effects, только в 10 раз быстрее).

Это превью анимации с различными настройками.

Драйвер-панель
Чтобы полностью понять, как работает эта функция, потребуется время. Но разобравшись с ней, вы сможете делать удивительные вещи с вашим прототипом. Обычно драйвер используется на скролл или событие перемещения, чтобы связать несколько элементов или повесить несколько обработчиков на один элемент. Скажем, вы хотите, чтобы появлялся перекрывающий слой, когда вы тяните элемент, или чтобы какой-нибудь элемент вращался во время свайпа (как в Tinder, Jelly).

Вот как это работает.
1. Подготавливаем элементы.

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

2. Откроем драйвер-панель (сверху) и выберем прямоугольник. Это наш будущий перекрывающий слой. Сейчас он полностью прозрачен.

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

Теперь прототип полностью готов. Тут нужна практика, но если вы однажды попробовали это…

Кое-что еще
Конечно, есть множество более мелких функций, таких как: маски, текст, предустановки, артборды… И еще, для вас дриббблеры, есть автоматический экспорт анимаций в GIF, чтобы поделиться ими с друзьями-дизайнерами.

1. здесь нет такого количества эффектов как, например, в After Effects, но уже можно работать с масками, прозрачностью, размерами и углом поворота, что уже немало, учитывая его простоту;
2. импорта из Sketch еще нет, но, я уверен, он появится совсем скоро;
3. код для вставки в веб-прототип еще не генерируется;
4. итерации еще не оптимизированы.

Источник: habr.com