t.me/maj0rblog
Дизайнер
-
Автор темы
- #1
Привет!
И сегодня я научу вас делать простую анимацию в Figma.
Для начала разберём чекбокс, самое простое что может быть.
1. Заходим в фигму и создаём холст.
2. Создаём объект заднего фона к примеру белый
3. Создаём объект серого цвета и добавляем скругления что-бы получилось так :
4. Запихиваем всё это в Фрейм и копируем(Фрейм)
5. В фрейме меняем цвет на тот который мы хотим
6. Заходим во вкладку прототипирования нажимаем на плюсик у серого квадрата который находится внутри белого :
7. Зажимаем и перетягиваем на белый фон второго фрейма.
8. У вас появилось окно справа, вам нужно в разделе Animation выбрать Smart Animate и Ease in and out
9. Теперь действия выше делаем с втором фреймом.
Осталось просто нажать на значок проигрывания в правом верхнем углу, и посмотреть на результат!
Время Тоглбокса
1. Создаём прямоугольник и ставим ему максимальное закругление
2. Создаём круг и ставим в левую часть прямоугольника
Должно получиться так :
3. Заносим это в фрейм, копируем, переносим круг в правую часть и меняем ему цвет
4. Теперь делаем как и с чекбоксом, но теперь прототипирование начинается не с круга, а с прямо угольника
При правильных действиях выйдет так :
Теперь просто открывайте прототип и смотрите на результат.
Спасибо за уделённое этой статье время, надеюсь она вам поможет!
И сегодня я научу вас делать простую анимацию в Figma.
Для начала разберём чекбокс, самое простое что может быть.
1. Заходим в фигму и создаём холст.
2. Создаём объект заднего фона к примеру белый
3. Создаём объект серого цвета и добавляем скругления что-бы получилось так :
Пожалуйста, авторизуйтесь для просмотра ссылки.
4. Запихиваем всё это в Фрейм и копируем(Фрейм)
5. В фрейме меняем цвет на тот который мы хотим
6. Заходим во вкладку прототипирования нажимаем на плюсик у серого квадрата который находится внутри белого :
Пожалуйста, авторизуйтесь для просмотра ссылки.
7. Зажимаем и перетягиваем на белый фон второго фрейма.
8. У вас появилось окно справа, вам нужно в разделе Animation выбрать Smart Animate и Ease in and out
9. Теперь действия выше делаем с втором фреймом.
Осталось просто нажать на значок проигрывания в правом верхнем углу, и посмотреть на результат!
Время Тоглбокса
1. Создаём прямоугольник и ставим ему максимальное закругление
2. Создаём круг и ставим в левую часть прямоугольника
Должно получиться так :
Пожалуйста, авторизуйтесь для просмотра ссылки.
3. Заносим это в фрейм, копируем, переносим круг в правую часть и меняем ему цвет
4. Теперь делаем как и с чекбоксом, но теперь прототипирование начинается не с круга, а с прямо угольника
При правильных действиях выйдет так :
Пожалуйста, авторизуйтесь для просмотра ссылки.
Теперь просто открывайте прототип и смотрите на результат.
Спасибо за уделённое этой статье время, надеюсь она вам поможет!