개발 구조를 만드는 피그마 플러그인
피그마 플러그인 #util+
필자는 지난 포스팅에서 피그마로 개발 구조를 잡는 방법에 대해 포스팅을 했다.
이 글을 통해 개발구조를 잡아가는 흐름과 개발에 적용한 결과를 이미지를 통해 설명했다.
https://brunch.co.kr/@eddwardpark/53
이 과정에서 피그마 플러그인을 사용하여 구조를 잡았다.
여기서 사용한 플러그인(util+)을 어떻게 활용했는지 살펴보자.
이 플러그인에 대해 간략하게 설명하자면 필자가 디자인한것을 개발에 적용하는 과정에서 겪었던 불편함을 해소하고자 직접 만들어 사용하고 있는 플러그인이다.
수개월간에 걸쳐 실제 프로젝트에 적용해서 사용해보니 높은 생산성 향상을 가져다 주어 필자 스스로는 꽤나 만족하며 사용중이다.
해당 유틸은 세가지 메뉴가 있고 그중 offset frame 메뉴를 통해 개발 구조에 맞게 디자인의 구조를 잡을 수 있다.
피그마로 직접 그린 이미지옵셋 프레임은 프레임을 복사해서 복사한 프레임의 하위 구조에 자동으로 옮겨주는 기능을 한다.
이과정에서 패딩값을 사용자가 설정할수도 있다.
플러그인 검색창에서 util+를 검색하여 인스톨하면 여러분도 사용할 수 있다.
플러그인 메뉴중 offset frame 메뉴를 선택하면 위의 스크린샷과 같이 플러그인이 실행되는것을 볼 수 있다.
가장 왼쪽이 완성된 디자인이고 각 단계별로 개발구조를 잡아가는 과정을 표현한것이다.
완성된 디자인에서 좌측 메뉴와 우측 메뉴를 개발에 맞게 구조화 하는 프로세스는 다음과 같이 진행했다.
Create Frame : 가장상위에 해당하는 빈 프레임을 생성한다.(step1)
Offset Frame : 생성한 빈 프레임을 선택하고 플러그인의 offset frame 버튼을 눌러 하위 프레임을 만든다.(step2)
Resize Frame : 만들어진 하위프레임의 사이즈를 디자인의 왼쪽 메뉴만큼 리사이즈 한다.(step3)
Copy Frame : 먼저 만들어진 하위 프레임을 복사하여 디자인의 우측 메뉴를 만든다.(step4)
Resize Frame : 만들어진 우측메뉴에 해당하는 프레임의 사이즈를 조절한다.(step4)
피그마로 직접 그린 이미지앞서 진행한 프로세스를 통해 하위 프레임을 만드는 방법을 알 수 있게 되었다.
왼쪽의 완성된 디자인을 참고하여 트리구조 깊이별(depth)로 4단계를 진행한 결과를 차례대로 나열해 보았다.
4단계에 와서야 비로소 텍스트로 표현된 타이틀, 버튼, 메뉴, 디스크립션등이 나오는것을 볼 수 있다.
4단계 이후에는 각각의 카드 블럭들의 구조를 잡는것이 될거다.
다음 단계들은 여러분들이 위의 과정을 참고하여 직접 진행해보면 좋을것 같다.
디자인을 개발 구조에 맞게 그룹핑하는 과정은 뿌리에 해당하는 프레임을 기준으로 하위 프레임들을 만들어 가는 과정을 반복하면 되는것을 알 수 있다.
이과정은 실제 개발에서도 똑같이 진행하는 과정이다.
완성된 피그마 프레임의 구조
피그마 프레임의 구조를 바탕으로 만들어진 코드과거 필자는 개발에 맞게 피그마 프레임의 구조를 그룹핑하는 과정을 수동으로 했었다.
수동으로 하다보면 하위 프레임이 엉뚱한 곳에 위치하는 경우도 있었고, 실제 개발 코드로 옮기는 과정에서 피그마 구조를 다시 잡아야 하는 경우도 있었다.
피그마 플러그인 util+의 Offset Frame 메뉴는 필자가 직접 겪었던 불편함을 해결하고자 만든거다.
필자와 같은 작업을 하는 디자이너가 있다면 이 유틸이 도움이 되었으면 한다.
