개발자
피그마에서 만든 애니메이션을 어떻게 플러터에서 구현하죠?
진짜 너무너무 궁급합니다 ㅠㅠ 피그마에서 이런저런 ui / ux 등등을 만들고, 프로토타입으로 재생해봤을때 아주아주 기가막히게 다 만들었다고 했을때, 그걸 플러터에서 어떻게 고대로 구현하는지 너무너무 궁급합니다. 예를들어서 밑에서 위로 쓸어올리면 카드가 쓸어올린 방향으로 뒤집히는 ui/ux를 만들었다면, 그걸 그대로 옮겨주는 툴이나 플러그인 또는 라이브러리가 있는건가요? 아니면 정말 진심으로 플러터 내부에서 하나하나 다 구현을 해야하는것인가요? 너무 궁금합니다. 조금이나마 편하게 가져오는 방법은 무엇이 있는지 너무 궁금합니다 ㅠㅠ 시원하게 답 해주실 분들이 필요해요 ㅠㅠㅠ
답변 1
인기 답변
음 우선 피그마와 동일한 애니메이션을 구현하기 위해서는 개별적인 작업이 필요합니다. 하지만 보통 pub dev에서 패키지로 잘 구현된 애니메이션 중 비슷한 것을 찾아 쓰곤 합니다. 말씀해주신 swipe의 경우 아래와 같은게 있을 수 있겠죠? https://pub.dev/packages/card_swiper https://pub.dev/packages/flutter_card_swiper https://pub.dev/packages/liquid_swipe 그리고 직접 만들고 싶으시다면 https://pub.dev/packages/rive 이 페키지를 활용하시면 됩니다. 아래 사이트에 접속하셔서 직접 제작 후 flutter로 옮겨 쓰시면 될 것 같습니다. https://rive.app/editor
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
커리어리 AI 봇
GPT가 달아주는 답변입니다.
2024년 01월 27일
피그마에서 생성된 UI/UX를 플러터에 직접 가져오는 것은 어렵습니다. 불행하게도, 현재로서는 피그마 애니메이션을 자동으로 플러터 코드로 변환하는 툴이나 플러그인은 존재하지 않습니다. 피그마 디자인을 위젯으로 변환해주는 'Figma to Flutter'같은 툴들이 있긴 하지만, 이러한 도구들은 주로 정적인 디자인 요소에 중심을 두고 있으며 애니메이션이나 복잡한 상호작용 등의 다이나믹한 부분에 대해서는 지원하지 않습니다. 따라서, 아쉽게도 정교한 애니메이션과 상호 작용을 구현하기 위해서는 직접 플러터 코드를 작성해야 합니다. 다행히도, 트윈 애니메이션(Tween Animation), 패스(Path)등의 기능을 이용하면 꽤 유연하고 다양한 UI/UX를 구현할 수 있습니다. 또한 다양한 라이브러리 예를 들어, flutter_flip_card 같은 라이브러리가 있어서 카드를 뒤집는 등의 동작을 조금더 쉽게 구현할 수 있습니다. 그러나 이런 라이브러리들은 일반적인 케이스를 대상으로 하기 때문에 디자인이 특별한 요구 사항을 포함하고 있다면 직접 구현해야 할 가능성이 큽니다. 너무 부담 갖지 마시고, 조금씩 시작해서 배우면서 자신의 UI/UX를 플러터로 구현하는 데 필요한 기술을 익혀가세요. 플러터는 매우 유연하고 강력한 프레임워크라서 시간과 노력을 들이면 원하는대로 모든 것을 다룰 수 있습니다.
지금 가입하면 모든 질문의 답변을 볼 수 있어요!