Type to search
Advanced channel search

Postal

Мульти-бот с премиум emoji Постинг+приветствие!
img
ad

Как снизить стоимость целевого пдп?

Приветственный бот, снижающий стоимость подписчика
img
ad

Продам канал с доходом 138090

Всего за 55 000. Срочно нужны деньги.
img
ad

Aninix | UI animation in Figma

@aninix
Channel's geo and language: Ukraine, Russian
Category: Design

Мы разрабатываем плагин для интерфейсных анимаций внутри Фигмы и публикуем разные мысли по UI анимации.
Подробнее: https://www.aninix.com

Related channels  |  Similar channels
Channel's geo and language
Ukraine, Russian
Category
Design
Statistics
Is this your channel? Confirm Канал в реестре блогеров РКН? Confirm Channel history
Posts filter

Aninix | UI animation in Figma

4 Nov, 21:31

Open in Telegram Share Report
Video is unavailable for watching
Show in Telegram
Сделали релиз долгожданной функции:
добавили возможность дублирования проектов 🎉
544 0 2 13
Aninix | UI animation in Figma

27 Oct, 00:50

Open in Telegram Share Report
Постараемся радовать вас новыми функциями чаще 🤗

Сегодня сделали очередной релиз:
• добавили возможность редактирования градиентов во вьюпорте (видео 1);
• добавили функцию дублирования слоёв с помощью горячих клавиш cmd/ctrl + D и добавили возможность drag'n'drop слоёв на таймлайне (видео 2);
• плюс несколько других небольших багфиксов.

Полный лог изменений
667 0 0 2 9
Aninix | UI animation in Figma

21 Oct, 02:27

Open in Telegram Share Report
Опять мы притихли. Что-то у нас не получается вести соц. сети и разрабатывать софт 😩
Поэтому мы решили собрать в одном посте все новости за предыдущие несколько месяцев:

- добавили поддержку свободного положения для anchor point'а;
- добавили возможность создавать проекты из svg файлов;
- переработали систему синхронизации между фигмой и аниниксом. Сделали её быстрее и точнее;
- добавили парочку новых пресетов с анимацией layer blur'а;
- запустили 2 дополнительных плагина: protonix (для экспорта прототипов во все форматы) и anitype (для анимации текстов для figma slides);
- стабилизировали систему, чтобы снизить количество багов до минимума.

Если у вас есть мысли, баг репорты, или запросы на функционал – пишите. Мы всегда открыты и рады любой обратной связи.
Protonix · Typography animation Figma plugin
Create stunning text animations in Figma with one click. Export to multiple formats, integrate with Figma Slides, and elevate your design projects effortlessly.
681 0 1 1 15
Aninix | UI animation in Figma

5 Sep, 13:16

Open in Telegram Share Report
Пара крутых анимаций сделанных в Аниникс за лето 🌞

Авторы:
- https://x.com/gabfoulon
- https://x.com/oleksandrplyuto
1k 0 4 8
Aninix | UI animation in Figma

26 Aug, 21:25

Open in Telegram Share Report
Увидели прикольный дизайн в Х, решили заанимировать. По времени заняло 15 минут.
1.1k 0 3 11
Aninix | UI animation in Figma

26 Aug, 19:52

Open in Telegram Share Report
Повысить стабильность приложения – это наша цель на ближайшее время. Раньше около 15% пользователей испытывали вылеты приложения, сегодня эта цифра уже около 4%. Метим в показатель 0%.

Если вы испытываете и знаете как повторить какой-то баг, дайте, пожалуйста, знать.
850 0 0 6
Aninix | UI animation in Figma

12 Aug, 19:28

Open in Telegram Share Report
Сделали ещё один небольшой пример с использованием техники стаггер (урок здесь). Компонент взят из UI библиотеки shadcn.
1k 0 3 6
Aninix | UI animation in Figma

11 Aug, 15:51

Open in Telegram Share Report
Пара примеров реальных интерфейсов, в которых используется данный приём.
793 0 3 6
Aninix | UI animation in Figma

10 Aug, 19:16

Open in Telegram Share Report
Stagger - это техника анимации пользовательского интерфейса, когда элементы анимируются последовательно, иногда накладываясь друг на друга.

Видео с пометкой 01: При отсутствии стаггера все элементы "слипаются" в один объект, и он кажется зрителю неживым

02: При слишком длинной задержке все элементы распадаются и выглядят для пользователя как отдельные не связанные между собой части

03: Хорошим же считается тот стаггер, который создаёт иллюзицию целостности объекта, но при этом сохраняет разную задержку для каждого элемента

04: Существуют разные типы стаггера:
в первом случае мы добавляем бОльшую задержку после появления первого элемента (delay after first)

05: во втором случае добавляем задержку перед последним элементом (delay before last)

06: Для того, чтобы подобрать идеальную задержку, нужно визуально представить график каждого сегмента. И сопоставить их так, чтобы они накладывались друг на друга создавая цельный график
660 0 2 13
Aninix | UI animation in Figma

6 Aug, 19:11

Open in Telegram Share Report
Cделали небольшой урок о том, как повторить анимацию airbnb, используя прототипы в фигме, и как это выгрузить в спецификацию для разработчиков.

▶️ Смотреть на ютуб
824 0 3 4
Aninix | UI animation in Figma

2 Aug, 20:40

Open in Telegram Share Report
На базе технологий, которые мы разрабатывали предыдущие 3 года, мы запустили ещё один плагин — Protonix.

Он позволяет экспортировать прототипы из фигмы в любой формат в один клик. Его можно использовать для построения моушн дизайн систем на базе прототипов или для быстрой анимации и экспорта иконок в лотти для разработчиков.
921 0 18 17
Aninix | UI animation in Figma

24 Jul, 19:38

Open in Telegram Share Report
Video is unavailable for watching
Show in Telegram
Запустили наш второй небольшой плагин для анимации текстов (Anitype) 🎉

Он позволяет анимировать любые тексты на фрейме в один клик. Анимацию можно экспортировать в видео (mp4, webm), gif, lottie, проекты Аниникс и фигма прототипы, которые можно использовать в фигма слайдах для презентаций.
837 0 11 5 24
Aninix | UI animation in Figma

16 Jun, 20:25

Open in Telegram Share Report
Хорошая UI анимация всегда проявляется в мелочах, которые сложно заметить. Неправильная анимация всегда явно неприятна глазу, хотя тяжело объяснить, что конкретно с ней не так.
Например, на видео показаны 2 примера анимации компонента, с которым мы сейчас работаем: до и после изменений. При просмотре обеих анимаций разницы почти не видно, но верхний пример почему-то хуже. Когда я начал разбирать анимацию покадрово, то понял, в чём дело.

Резкое изменение создаёт «некрасивые» кадры:
- пропадает текст;
- создаётся слабая контрастность;
- появляется искаженное состояние стрелки.

Немного поднастроив тайминги и графики анимации получилось лучше:
- поменял график для стрелки, чтобы она проскакивала «кривые» кадры;
- сделал разные тайминги для анимации цвета и позиции;
- добавил задержку к анимации цвета текста, чтобы избавиться от кадров со слабым контрастом.
1.3k 0 0 9 10
Aninix | UI animation in Figma

10 Jun, 21:33

Open in Telegram Share Report
Посмотрели крутую презентацию про apple intelligence. А у моей жены виджеты не прогружаются пару месяцев. Надеюсь, новая умная сири починит.
998 0 1 1 8
Aninix | UI animation in Figma

10 Jun, 00:41

Open in Telegram Share Report
Как говорится, критикуешь – предлагай. Подумал, что скорее всего эппл сделали мгновенное появление слайдера специально. Это позволяет быстро скроллить книгу. Поэтому я оставил появление этого элемента первым, чтобы он сразу же был интерактивным. Остальные элементы «вытягиваются» вслед за слайдером.
Убирается менюшка в обратную сторону зеркально – сначала кнопки, потом слайдер. Тут нет логичной аргументации, решил сделать как больше нравится.

Вот чем я занимаюсь вместо правок по аниниксу 🥴
852 0 2 3 8
Aninix | UI animation in Figma

9 Jun, 13:10

Open in Telegram Share Report
Video is unavailable for watching
Show in Telegram
Анимация взята из приложения iBooks от Apple. Каждый раз, вызывая меню настроек, меня передёргивает от резкого появления ползунка и слишком медленной анимации левого блока. И это длится с момента выхода iOS 17, то есть почти целый год.

Изначально я хотел повозмущаться: «как можно анимировать одну часть, а вторую – нет?». Но при воспроизведении покадрово видно, что правая часть тоже анимирована. Только вот анимация длится всего 3 кадра, и человеческий глаз не успевает уловить движение. В противовес анимация левого меню длится 1 секунду (60 кадров). То есть работа по реализации анимации уже проделана.

Почему бы не настроить сразу нормально?
688 0 0 4 4
Aninix | UI animation in Figma

4 Jun, 20:04

Open in Telegram Share Report
Video is unavailable for watching
Show in Telegram
Небольшой тизер. Работаем над подробным уроком о создании подобных анимаций в Аниникс. В уроке будет больше информации о том, как сделать такое с нуля. Ну а текущее видео можно использовать как шпаргалку ✍️
710 0 3 20
Aninix | UI animation in Figma

28 May, 21:13

Open in Telegram Share Report
Хотим попросить вас помочь нам в улучшении Аниникс. Мы подготовили небольшую анкету, и будем очень признательны, если вы сможете найти время заполнить её.
Понадобится максимум 15 минут вашего времени. За половину заполненной анкеты дарим бесплатный доступ в Аниникс на 1 месяц, а за целую анкету – на 2. 20$ за 15 минут

https://tally.so/r/31rQr1
Привет!
Сделано в Tally. Воплощай идеи быстро.
879 0 2 11
Aninix | UI animation in Figma

27 May, 23:34

Open in Telegram Share Report
Ещё как пример, у эппла красивые лендинги, а вот майкрософт так круто сделать не смог. Как инженеры с зарплатой в 180к$+/год не смогли сделать хорошие анимации на сайте? Скорее всего это skill issue.

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

Источник видео. Сайт майкрософта.

3/3
758 0 1 20
Aninix | UI animation in Figma

27 May, 23:34

Open in Telegram Share Report
Недавно Виталий Котов запостил в твиттере, казалось бы, простую анимацию – ховер, изменение двух состояний. Но если задуматься о её реализации в продукте – появляются вопросы.

Допустим, можно использовать текущую версию Аниникса, экспортировать лотти файл и отдать его разработчикам. Но подобная иконка, с несколькими градиентами, ухудшит пользовательский опыт: создаст лишнюю нагрузку на процессор, замедлит загрузку сайта или приложения. А если таких анимаций будет несколько? Процесс быстро выходит из под контроля, и разработчику приходится придумывать костыли по оптимизации, чтобы это хоть как-то работало. Получается, что компромиссные варианты на подобии lottie или rive не слишком хорошо подходят для решения проблемы.

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

2/3
661 0 0 10
20 last posts shown.