[Figma는 처음이라] 굿바이 XD, 피그마로 갈아타기(2)

이전 포스팅에서 Figma를 3~4개월정도 사용하면서 느꼈던 장단점을 주관대로 적었다. 주관이라 칭했던건,  내가 쓰면서 정말 주관적으로 느꼈던 걸 열거했기 때문이다. 그래서 누군가에게는 내가 느낀 장점이 장점이 아니였을수도. 단점이 단점이 아니였을수도 있다. 

그럼, 저번 포스팅에 이어서 이번 포스팅에서는 사용했을 때 유용했던 플러그인이랑 개발자님과 협업하면서 느꼈던 점을 가볍게! 포스팅하고자 한다:)

 

---

 

 

그래서 XD에서 Figma로 어떻게 이사했는데?

 

 

먼저, XD에서 Figma로 이사할 수 있는 방법은 세 가지가 있다

 

1.  SVG로 변환해서 옮기기
2. 유료 툴을 사용해서 변환시키기
3. 직접 Figma에 그대로 그리기 

 

 

1.  sgv로 변환해서 옮기기

많은 분들이 XD에서 Figma로 옮길 때 사용하는 방법.

하지만 sgv로 변환되면서 모든 파일이 그대로 변환되지는 않는다

제일 눈에 띄는 문제점은 (1) 비트맵 사진의 깨짐 현상 (2) 글자 깨짐 현상 이었다.

사진 깨지는건, 저희 서비스에 사진이 많이 들어가지 않기 때문에 금방 바꿀 수 있었지만

글자가 깨지는 부분에서 sgv로 변환해서 옮겨봤자, 다시 다 내가 일일히 수정해야겠구나 라고 생각했다.

뷰가 많지 않거나, 글씨보다는 아이콘 형태의 뷰 디자인이면 유용하게 사용하셔도 될 것 같다! 

 

 

 

 

 

2.  유료 툴을 사용해서 변환시키기

XD -> Figma 변환, XD -> Sketch 변환 관련된 포스팅을 보다보면 많이 볼 수 있는 사이트.

( https://xd2sketch.com/ )

XD 파일을 업로드하면 자동으로 Figma나 Sketch로 변환시켜주는 웹 사이트이다.

그밖에도 포토샵,일러스트,pdf 등 파일을 figma,sktech,포토샵,일러스트 4 개의 확장자로 변환이 가능하다.

하지만 유료라는 점에서 한 가지 허들이 있었고, 파일당 약 7만원~10만원 정도의 비용이 발생한다는 점에서

돈을 쓰지 말고 내 시간을 녹이자.라고 결론을 지었다. 

 

 

 

xd2 서비스 캡쳐

 

 

3.  직접 Figma에 그대로 그리기

위에 두 가지 사항을 다 체크하고나서, 그냥 시간을 녹여서 해결해야겠구나.하고 선택한 방법.

일단, 유료 툴까지 사용하면서 마이그레이션을 해야하나?라는 생각이 들었고.

sgv는 위에서 언급한거와 같이, 이미지나 폰트가 깨지는 현상이 너무 많았다.

 

 

무엇보다 만들어진 디자인시스템을 적용한 파일이 필요했기에,

이럴거면 직접 내가 다 그려서 디자인용 마스터 파일을 만드는게 좋겠다, 라는 판단을 했다.

 

덕분에 빠른 시일 내에 Figma의 기능을 많이 익히게 되었으나,

그만큼 공수도 많이 드는 작업이기 때문에

쉽지 않은 싸움이었다. (잘 싸웠다 휴)

 

그래도 덕분에, 모든 뷰에 디자인 시스템을 입힐 수 있었고

추후 컴포넌트 변경 시에도 깔끔하게 해결할 수 있는 마스터 파일이 생겼다..!! 

 

 

---

 

 

Figma로 디자인, 더욱 윤택하게 해보자!

Sketch를 쓰면서도 플러그인으로 좀더 편하게 디자인할 수 있어서 좋았었는데,

Figma 역시 플러그인으로 좀 더 편하고 효율적으로 디자인이 가능하다!

figma 사용 시 알면 유용한 플러그인을 몇개 정리했다..!

이 밖에도 편리한 플러그인이 있다면 공유해주신다면 감사하겠습니다! 

 

 

(1) Autoflow

: 화면과 화면 간, 컴포넌트와 컴포넌트 간 등 와이어프레임을 만들거나

디자인된 화면의 플로우를 표시하기 위해 유용하게 사용할 수 있는 플러그인이다.

Autoflow 플러그인을 활성화시킨 후, 연결하고 싶은 부를 누른 후 shift를 누르면

자동으로 화살표가 생긴다.

https://www.figma.com/community/plugin/733902567457592893/Autoflow

Figma - Autoflow | Autoflow makes it easy to draw flows. Simply select 2 objects and a line will be magically drawn ...

 

 

 

 

 

(2) Find and Replace

: 디자인을 할 때, 뷰가 많아지면 텍스트 찾기가 정말 힘들어진다.

뭔가 UX Writing을  바꾸고 싶은데, 일일히 다 찾아서 하느라 힘들었을 무렵

해당 플러그인을 찾게 되면서 굉장히 빠르게 찾아서 수정할 수 있다!

이때 주의해야할 점은, 고치지 않아야하는 것까지 잡혀서 수정이 진행될 수도 있기 때문에

정말 전반적으로 다 고쳐야할 때에만 사용하는게 좋을 듯 하다.

 

https://www.figma.com/community/plugin/735072959812183643/Find-and-Replace

Figma - Find and Replace | Search for texts on your page and replace them just like a text editor. You can search for objec...

 

 

(3) Find and Focus

: 위와 비슷한 플러그인. 이 플러그인 역시, figma 내에 적혀있는 text를 찾아준다.

한가지 다른 점은, 이 플러그인은 text 수정까지는 안하고 포커싱을 해준다.

원래는 위의 플러그인을 많이 사용했다가 해당 플러그인을 알게 된 후로는

이걸 더 많이 사용하게 된다.

한번에 고쳤다가 고칠 필요 없는 부분까지 고쳐지지 않을까, 라는 걱정 때문이라지 :)

 

https://www.figma.com/community/plugin/739978920241977182/Find-%2F-Focus

Figma - Find / Focus | A simple plugin to search for layers in your document. The plugin will select the layers containi...

 

 

 

 

(4)Better Font Picker 

: figma 자체에서는 폰트를 미리 보는 기능을 제공하고 있지 않는다.

그래서 이 이름을 가진 폰트가 어떻게 생겼는지, 기억이 가물가물하다.

이럴 때 쓰면 아주 유용한 플러그인.

폰트를 미리볼 수 있게 해주는 플러그인이기 때문에 폰트를 찾을 때 좀 더 편리하게 찾을 수 있다.

https://www.figma.com/community/plugin/739922281164562258/Better-Font-Picker

Figma - Better Font Picker | Well... Like the name suggests, Better Font Picker helps you select fonts with a preview of how i..

 

 

 

(5) Blush

여러 일러스트를 불러와서 사용할 수 있는 플러그인이다.

머리나 표정, 얼굴 등도 바꿔서 사용할 수 있기 때문에

컨텐츠 디자인을 해야하거나, 서비스 자체에 그래픽이 많을때!

아니면 튜토리얼 등 이미지가 필요할때!

일일히 다 그리기 어렵다면

해당 플러그인을 이용해도 용이할 듯 하다! 

 

https://www.figma.com/community/plugin/838959511417581040/Blush

Figma - Blush | Create and customize illustrations in your designs with Blush. Just choose a collection, pick a c...

 

---

 

Figma로 개발자와 협업하기

여러 팀에서 Figma로 디자인툴을 바꾸면서,

커뮤니케이션 역시 Zeplin 등 별도의 브릿지 툴 없이 Figma를 통해 다이렉트로 하게 된다.

우리팀 역시, Figma로 갈아타면서 별도의 커뮤니케이션 툴을 놔두지 않고

다이렉트로 Figma로 기획자 / 디자이너 / 개발자가 소통하게 됐다.

 

여기서, 내가 간과한 점이 있었는데

 

• 내가 완료되지 않은 파일 역시 개발자가 볼 수 있다는 점. 이로인해 진행중인 뷰를 디자인이 완료된 뷰로 알 수 있다는 점.
• 뷰를 수정했을 경우, 이전 버전의 기록이 남지 않아진다는 점. 그래서 어디가 변화된건지 파악하기가 어렵다는 점
• 그래서 더 세밀한 커뮤니케이션이 필요한데, 이를 놓치고 있었다는 점

이었다.

 

내가 이것들을 놓치고 있다는 걸 알게 된건

개발자님과 v2.6.0 업데이트 작업 시, 커뮤니케이션을 하면서 알게 됐다.

의식도 못하고 그냥 마스터 페이지에 수정수정수정수정..중이였고 나는.

어떤 부분을 수정했는지 자세하게 남겨놓지 않았었다.

 

특히 V2.6.0 업데이트 작업에는 여러 커뮤니케이션이 오갔었기 때문에

수정된 부분도 많았는데, 이에 대한 형상관리가 제대로 되고 있지 않았다.

 

그래서 형상관리를 어떻게 해야할지,

디자인 수정안에 대해서 어떻게 커뮤니케이션을 해야할지 고민이 많았는데.

 

이게 완전한 정답은 아니고, 

정말 맞는 형상관리인지 모르겠으나 일단 우리팀은 룰을 정했다.

 

 

• 뷰 수정 시, as-is / to-be 파일을 만들어서 수정 전과 수정 후에 대한 변화를 보여줌.
• 기능 및 기획 관련 설명 필요 시, to-be 뷰 옆에 description 추가
• 이슈 관련  및 별도 커뮤니케이션이 필요할 시, comment 적극 활용
• 해당 수정에 대한 개발 작업이 끝났을 시 master 파일로 합침
• figma 파일 수정 시, 무조건 history에 날짜/수정 내용을 남겨서 저장

 

히스토리 작성하는 법 :)

 

해당 히스토리 작성법은 내가 개발팀에 이렇게 하겠다.라고 말씀드렸었는데

개발팀에서 오케이!해주셨다.

그래서 최대한 타이틀에 날짜+수정사항을 적어서 타이틀 내용만으로도 수정내용을 파악가능하게끔 셋팅했고

더 자세한 내용이 필요할 경우는 describe 칸을 통해서 좀 더 설명을 보충해놓고 있다.

 

저렇게 타이틀에 날짜와 수정사항을 바로 보이게 했던 이유는

예전에 안드로이드 개발 프로젝트를 했을 때, 깃헙 커밋남겼을 때 저런 룰로 남겼었는데

제일 내용을 파악하기가 편했었다. 

처음에는 수정사항만 "add main view" "modify login text field"이런식으로 남겨놨더니

날짜가 없어서 어렴풋이 '며칠 전쯤,,고쳤던거 같은데,,.' 하면서

기억을 더듬어서 커밋을 찾았었어야 했던 기억이 있었다.

그래서 최대한 직관적으로 적어야겠다,라고 생각했고

그래서 날짜와, 최대한 구체적으로 어디뷰에 어떤 기능/UI를 고쳤는지

남겨놨더니 찾기가 편했었다 :)

 

 

기능 및 기획관련 설명을 위해서  comment를 이용하지 않는 이유는

쉽고 빠르게 파악 해야하는 내용인데 개발자가 코멘트를 다 눌러봐야하기 때문이었다.

 

그래서 쌍방향으로 커뮤니케이션이 필요한 거 별도 커뮤니케이션 혹은 이슈관련 커뮤니케이션을

comment로 활용하기로 했으며 기능 및 기획, UXUI 설명 관련은 description을 통해 소통하기로 했다.

 

figma를 통한 커뮤니케이션과 파일 히스토리 관리, 형상관리 등은 좀 더 업무를 하면서

우리 팀에 맞는 핏을 찾아가려고 하고 있다.

 

 

---

 

이렇게 4개월 정도 figma를 사용하면서 느꼈던 전반적인 부분에 대해 포스팅 해보았다!

다음 포스팅부터는 디자인시스템을 하면서 알게된 부분, 공부했던 내용 등을 좀더 구체적으로 회고를 남겨보겠다.

이제 막 커리어를 쌓고 있는, 사수 없는 스타트업 디자이너가 만든 디자인 시스템이라서

다른 팀처럼 견고하진 못할지라도!

어떻게 맨땅에 헤딩하듯이 만들었는지!

이거 알면 시스템만들때 좀 편리해진다! 이런 부분들을 잘 정리해보겠다 :)

 

 

 

 

[Figma는 처음이라] 시리즈

1. [Figma는 처음이라] 굿바이 XD, 피그마로 갈아타기(1)

2. [Figma는 처음이라] 굿바이 XD, 피그마로 갈아타기(2) (현재글)