Aninix | UI animation in Figma
964 subscribers
25 photos
52 videos
62 links
Мы разрабатываем плагин для интерфейсных анимаций внутри Фигмы и публикуем разные мысли по UI анимации.

Подробнее: https://www.aninix.com
Download Telegram
Мы давненько ничего не постили – работаем над улучшение плагина (улучшение ux + исправление багов), пока без новых функций.

Поэтому делимся новостью.

Гугл обновил статью о UI анимации в material;
И также опубликовал токены для работы.

В следующей версии Аниникс обновим их и у себя.
Всем привет. Всё это время мы работали над очень классными обновлениями, но пока что оставим их в секрете как сюрприз.

Зато поделимся новостью о том, что пару часов назад мы сделали апдейт нашего Lottie экспорта. Теперь он почти всегда работает как надо. Но экспорт лотти это сложная задача (ведь существует бесконечное количество комбинаций слоёв и плееров (web, ios, android, react native и тд), поэтому если у вас будут какие-то проблемы, пожалуйста, дайте нам знать и мы их поправим.

В следующем году у нас большие планы по поводу нашего приложения.

Спасибо за то, что вы с нами. Всех очень любим 💝
С наступающими праздниками! 🎄
This media is not supported in your browser
VIEW IN TELEGRAM
Всех с праздниками!

Сегодня состоялся релиз v2.24.0 с множеством улучшений производительности и финальными правками по лотти файлам.

Из нового: добавили модуль, который показывает цвета всех выбранных слоёв, прям как в фигме. Оказалось, что это очень удобно и экономит много времени при перекраске и анимации цветов в сложных проектах.
Также добавили возможность выделять всю вертикаль на таймлайне. Назвали её vertical selection. Когда в следующий раз будете что-то выделять, зажмите cmd (ctrl на винде), надеемся вам понравится и будет полезно.
Цель Аниникс – дать возможность дизайнерам разрабатывать взаимодействия и анимации в месте, где они создают дизайн, и позже безболезненно передавать их разработчикам. Изначально мы планировали замкнуть нашу экосистему на Фигме, чтобы Аниникс был плагином, дополнением к вашему рабочему процессу.
Аниникс – это бутстрап компания без единого доллара венчурного капитала. Компания была создана одним энтузиастом (мной), который за свои личные сбережения начал разработку в собственной гостиной (и я всё еще здесь). Позже ко мне присоединились другие ребята для помощи в разработке, потому что увидели в продукте потенциал и решение насущной проблемы многих дизайнеров.
Для того, чтобы поддерживать бизнес, мы ввели небольшую ежемесячную оплату за дополнительный функционал, который экономит время. Основные функции были и остаются бесплатными. Это политика нашей компании.

15-го сентября 2022 года Фигма объявила о том, что она куплена компанией Адоби за $20млрд. Эта новость подкосила все наши планы, и мы начали думать, как можно сделать хороший интегрированный продукт, но при этом независимый от Фигмы.
9-го января 2023 года я получил письмо от Фигмы с новостью о том, что они вводят платную платформу для сообщества. И все авторы будут вынуждены удалить ссылки на сторонние сервисы по приёму платежей (мы пользуемся Страйпом). Это была следующая поразительная новость.
Фигма захотела монетизировать все наработки авторов и получать с них «налог». Но при этом всё, что дала нам Фигма в этом плане – возможность пользователям установить наш плагин в один клик. Не было ни продвижения, ни пиара, ни упоминаний, ни рекомендаций, ни советов, они даже ни разу не поставили нам лайк в твиттере (как бы смешно это не звучало). И теперь они хотят получать % с каждой транзакции. Спасибо Адоби, мы видим ваши уши.

В прошлом я был моушн-дизайнером, и начал учить программирование для создания скриптов и экстеншенов для Афтер Эффекта. Вся система и API были ужасно неудобными, без документации и поддержки. Если бы я хотел работать с Адоби, я бы продолжал этим заниматься. Но я выбрал фигму как что-то новое и удобное. Я люблю Фигму, но она превращается в большую бездушную корпорацию. А с этой налоговой платформой для комьюнити «ученик превзошёл учителя».

В связи с этим Анинкс отделяется в независимую платформу. Наша архитектура будет состоять из двух частей:
1. Бесплатный фигма плагин-адаптер и аниникс-редактор для взаимодействия с анимациями. Общаться они будут через WebRTC чтобы гарантировать, что все данные остаются в вашем фигма файле, и никто не сможет получить к ним неавторизованный доступ (даже наши сервера). Дополнительные функции редактора будут доступны по PRO подписке, как и раньше. Это всё не сильно повлияет на ваш рабочий процесс. Грубо говоря, изменится только то, что вместо окна с вкладками в окне с вкладками, редактор будет открываться в браузере (а позже и в отдельном приложении).
2. Новая веб-платформа для коллаборации и командной работы. Сюда вы сможете загружать свои анимированные файлы для последующей возможности поделиться ими с разработчиком и другими членами команды. Все файлы будут доступны в облаке, где каждый, у кого есть доступ, сможет экспортировать проект в нужном формате, или внести изменения.
Новая архитектура будет доступна в феврале 2023.

Мы знаем, что перемены закаляют сталь. И надеемся, что вы с пониманием отнесётесь к нашему нелёгкому решению.
С любовью к вам и анимации в сердце ❤️
This media is not supported in your browser
VIEW IN TELEGRAM
Это один из самых трудоёмких релизов, который мы делали за всю историю Аниникс. Помимо переноса редактора в независимое окружение мы написали новую бэкенд инфраструктуру. Постарались сделать её гибкой и быстрой, чтобы последующие релизы не затягивались так надолго.
Была реализована новая архитектура:
- отдельный плагин в фигме, который мы назвали Aninix Connector. Он связывается с серверами и «раздаёт» данные из фигмы;
• независимый редактор, который находится в вашем браузере и получает данные из плагина;
- для передачи данных мы используем наши сервера, но все данные передаются по защищённым каналам напрямую между плагином и браузером. Мы не храним никакие данные до тех пор пока вы сами не решите опубликовать проект.

Мы считаем, что подобное решение сделает работу более удобной:
- редактор в браузере получает приоритет в использовании ресурсов системы, следовательно работает быстрее;
- он занимает большее пространство, теперь не нужно ютиться внутри и смотреть на окно с окном;
- при этом мы сохранили прямую интеграцию с фигмой: меняя что-то в дизайне – один клик и изменения сразу же отображаются в Аниникс;
- анимационные данные хранятся вместе с вашими дизайнами внутри Фигмы.

Новый инспектор:
- обновлённый дизайн;
- отображение большего количества параметров.

Веб платформа:
Также рады объявить о том, что мы запустили платформу, на которой можно видеть все свои опубликованные проекты и быстро получить к ним прямую ссылку. Можно структурировать всё по папочкам, если очень хочется.

Также мы исправили множество маленьких багов, которые облегчают работу.

Надеемся вы с радостью воспримите изменения. Как всегда – с нетерпением ждём ваши отзывы.
Прошлые 2 недели были очень жаркими: после последнего апдейта у многих сломалась синхронизация, и мы чинили её не покладая рук. Аниникс справился! Стабильная версия уже доступна. Всем спасибо за терпение и сообщение об ошибках. Пишите ещё.

Также мы добавили поддержку идентификаторов и классов при экспорте в Lottie. Работает эта функция точно также как и в АЕ:
добавляете префикс в название слоя:
# если нужен ID, и . – для класса.
Например #my-layer<svg id=“my-layer”>
и .selectable<svg class=“selectable”>.

Удобно, когда нужно добавить тень или поменять цвет прямо в браузере с помощью css/js.
❗️Это работает только в Lottie Web рендере.

Скоро сделаем небольшой урок по этой теме.
Aninix | UI animation in Figma
Прошлые 2 недели были очень жаркими: после последнего апдейта у многих сломалась синхронизация, и мы чинили её не покладая рук. Аниникс справился! Стабильная версия уже доступна. Всем спасибо за терпение и сообщение об ошибках. Пишите ещё. Также мы добавили…
Появилось много вопросов о том, как это работает. На первом скрине названия слоёв в фигме. А второй – как это используется в CSS.

Здесь небольшой пример анимации:
https://app.aninix.com/inspect/levnl5ji3310541338111179/details

А здесь пример как это можно использовать в CSS: https://codepen.io/tonypinkevych/pen/QWVMQQj?editors=0100
Я кодом перекрасил парные и непарные прямоугольники в нужные цвета. Можете сами поменять hex на нужный цвет.

Кейсов использования не так много, но для дизайн систем, где нужно менять цвета иконок – подойдёт.

Если вы не поняли, то перешлите моё сообщение программистам – они поймут 😉
В редких случаях из-за прокси и VPN у некоторых пользователей возникают проблемы с подключением к Aninix. Если вы один из них, пожалуйста, оставьте комментарий к посту или напишите мне в личку (@tonypinkevych).

Это будет очень полезно для отладки 🙏
В течении пары дней будет релиз с генерацией CSS кода в наших спецификациях. Программистам будет проще внедрять сложные анимации.
Хотел пошерить файл через lottiefiles.com. Всё настроил, сгенерировал ссылку и решил проверить как оно будет в инкогнито. Захожу, а тут такое. Мол зарегистрируйся и войди для того, чтобы посмотреть публично доступную ссылку.

Кажется, что надо делать новый хаб для лотти файлов 🙄
This media is not supported in your browser
VIEW IN TELEGRAM
К тому же сам формат очень интересный, иногда приходится строить костыли в лотти файлах, чтобы они работали как надо, а не как получится. На видео пример с анимацией corner radius в обычном прямоугольнике 🥴

Новый релиз с исправлением нескольких неприятных багов уже доступен. Мы также добавили генерацию CSS кода и модуль экспорта прямо в спецификациях.
Пример можно глянуть здесь: https://app.aninix.com/inspect/levnl5ji3310541338111179/details
Последнее время много работаем над, как говорят американцы, life-quality improvements. Стараемся сделать независимое приложение с удобной интеграцией в Фигму.

Из нового:
• все данные хранятся в нашем облаке, из-за чего мы можем гарантировать сохранность ваших данных;
• при создании нового проекта они автоматически синхронизируются с дизайн-изменениями, сделанными в Фигме.

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

Надеемся, что вы примете эти изменения и больше никаких потерь данных в ваших проектах не будет.
This media is not supported in your browser
VIEW IN TELEGRAM
Выкатили очередной релиз. В нём фокусировались на новом экспорте, который делает видео файлы в 10 раз меньше, чем предыдущий. А ещё он отлично работает с гифками. Больше никаких мигающих и пропадающих цветов.
Вчера мы сделали масштабный для нас релиз – запустили возможность работать в командах: администрирование, оплаты и все проекты в одном месте. Описание всех функций с картиночками можно глянуть на нашем сайте: https://www.aninix.com/teams

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

Релиз уже доступен. Перезапустите фигму, чтобы плагин обновился. 👌
This media is not supported in your browser
VIEW IN TELEGRAM
Вчера выкатили пару новых функций, множество исправленных ошибок и UX улучшений.

Из нового мы добавили поддержку:
- independent borders;
- и squircles/суперэллипсы/сглаживание углов.

Обо всех изменения можно прочитать здесь: https://www.aninix.com/releases/v13-0

Какие функции вам хотелось бы видеть в следующих релизах?
Вышло еще одно большое обновление.
- Мы улучшили производительность экспорта: теперь маленькие видео экспортируются в 2 раза быстрее, а большие - до 10 раз быстрее (мы засекали, это правда);
- И рады представить - Aninix Companion. Виджет для облегчения совместной работы с анимацией. (3 маленьких видео, чтобы показать, как это работает).

С нетерпением ждём от вас обратной связи 👀