기획자의 하드스킬모음

피그마로 어플만들기(3)

yeahse09 2020. 12. 30. 23:52
728x90

안녕하세요 그냥입니다.


오늘은 피그마로 어플 만드는 법 세번째 포스팅입니다.


오늘은 액션을 만들어서 뭐를 눌렀을 때,어디로 화면이 넘어간다 이거를 알려드리려고 합니다.


사실 이거만 배우면 다 끝났습니다. 진짜로요.


으악 오늘은 글로만 설명 드릴게요... 준비가 안돼서..


액션을 만든다

:그것은 화면이 어디서 어디로 넘어가는가를 의미


피그마는 코딩을 하지 않기 때문에, 뭘 누르면 진짜 글자가 써지고 자동으로 뭐가 나타나고 이런건 할 수 없습니다.


그러나 어떤 버튼을 눌렀을 때, 어떤 화면이 나타나는지 혹은 스와이프를 해서 화면이 넘어가는지..등등을 설정할 수는 있죠


이게 중요한 이유는, 이 다음 화면으로 뭐가 연결되는지 그런 사소한게 사용자들의 편리함을 결정 짓거든요


그래서 그 방법도 엄청 간단합니다.


1. 액션을 만들 화면들을 미리 만든다


2. 액션을 연결시킬 버튼, 혹은 화면 전체를 선택하고 우측 상단위에 Prototype 누르면 밑에 interaction 있고 옆에 플러스 버튼을 눌러주세요.


3. 그러면 이제, 선택했던 그 화면 혹은 버튼? 글자? 등등을 누르거나 스와이프 하거나 등등의 액션을 하면 어떤 화면으로 넘어가야 하는지가 나옵니다.

약간 코딩 비슷하죠..? 


말하자면,  세모-연결(어떻게 연결지을지 선택)-네모(어떤 네모로 갈지 선택) 이런 느낌이에요.


4. 이렇게 연결 시킬 모든 액션을 만들어주면 됩니다. 


5. 우측 상단위에 재생버튼을 누르시면, 본인이 넣은 액션을 확인하실 수 있어요. 눌러서 나오는 액션을 설정하셨으면, 한번 눌러봐서 화면이 넘어가는지 확인하면 됩니다.


6.간단하쥬..?


다음 포스팅에서는 좀 더 어플을 상세하게! 꾸미는 법을 배워볼게용 안녕!!





728x90