Figma Korea 1st meetup 참석 후기

 이미지 출처 meetup

Figma Korea 페이스북 커뮤니티의 첫 번째 밋업에 다녀왔다. Sketch를 사용한 지 얼마 되지 않아 Figma라는 툴을 처음 알게 되었는데, 무엇보다 실시간으로 같이 디자인할 수 있다는 점, 그리고 따로 툴을 설치하지 않아도 된다는 점에 매력을 느꼈었다. 본격적으로 사용하기 위해서 기능들을 확실히 알고 싶어서 참석했다. 

세션 1. 플러그인 기능 소개

스케치와 마찬가지로 피그마도 플러그인을 사용할 수 있게 되었다. 가장 기억에 남는 것은 구글 스프레드시트의 데이터 항목을 그대로 불러오는 Google Sheets Sync 플러그인이었다. 그밖에 스케치처럼 Unsplash에서 이미지를 불러와 사용할 수 있다든지, 원하는 위치와 스케일로 지도를 불러오는 플러그인 등 여러 가지가 소개되었다. Browse All Plugins를 눌렀는데 플러그인 너무 많다. ㅎㅎㅎㅎㅎㅎ언제 다 써 볼 수나 있겠나. 사실 스케치에서는 플러그인을 가능하면 쓰지 않고 작업하려 한다. 그런데 피그마의 경우, 플러그인 사용을 권장하는 듯한 느낌을 받았다. 스케치의 플러그인이 스케치 버전업의 속도를 따라잡지 못해서 사용할 수 없었던 경험이 있는데, 피그마의 플러그인은 과욘... 그래도 편리한 기능들이라면 한 번씩 써 보아야겠다.

 

그런데 첫번째 세션을 계속 듣고 있으니 생각나는 툴이 있었다. 너무나 좋아하는 FramerX다.
Framer X의 Store에서 원하는 컴포넌트 키트를 설치해 사용하는 방식이나 인터페이스가 매우 유사했다. 게다가 Typescript와 React를 지원한다고 한다. 두 개의 툴이 연결되는 느낌을 받았다. 자매 툴의 느낌이랄까. 두 개 같이 쓰면 왠지 모르게 시너지가 날 듯하다. 하지만 둘 다 유료 플랜을 써야 하는군?

Framer X의 컴포넌트 스토어

세션 2. 피그마와 프로토파이 연동

프로토파이에서는 엑스디, 피그마, 스케치의 파일을 임포트 할 수 있다. 지난 프로토파이톤에서 피그마 파일을 불러왔을 때 임포트 속도가 약간 느렸던 것 외에는 체감이 괜찮았다. 프로토타이핑할 이미지들을 분리해서 불러올 수 있기 때문에, 유용하게 작업할 수 있다. 임포트를 처음으로 할 때는 Figma에 접근이 가능하도록 Access Token을 입력해 주어야 한다. 개인용 Access Token을 받는 방법은 다음과 같다.

Figma Web에서 본인 계정으로 로그인 → Figma > Account Settings → create new token
App에서 본인 계정으로 로그인 → 프로필사진 > Account Settings → create new token

피그마의 파일을 임포트할 때 속도가 약간 느린 이유는 피그마 파일이 올라가는 서버를 지구 반대편에서 체크하고 돌아오는 과정에서 발생하는 것이라 한다. 그래도 속이 터질 정도는 아니었다. 그저 이런 세상이 왔다는 것이 놀라울 뿐이다.

피그마에서 디자인한 UI를 임포트 하여, 간단한 프로토타입 시연도 진행되었다. 몇 가지 Trigger와 Response가 소개되었다.

Tap (버튼을 터치하면) Move, Rotate, Scale (버튼이 회전하면서 이동)
Pinch, Drag (지도를 손가락으로 드래그하거나 두 손가락으로 움직이면) Rotate, Scale (지도 확대, 드래그, 회전)
Tilt (스마트폰을 좌, 우로 돌려서) Move (파노라마 이미지 보기)
Sound, Start (사운드를 인식하고) Scale, Move, Delay (파형이 커졌다 작아졌다 하다가 5초 후 검색 결과 화면 보여주기)

세션 3. 피그마에서 컴포넌트화 시작하기

개인적으로 가장 신기했던 세션이었다. 스케치와 가장 큰 차이점이 바로 여기 컴포넌트에 있지 않을까. 스케치는 심볼을 만들면 어찌 됐든 심볼 관리를 해 주어야 한다. 피그마는 컴포넌트를 만든 그 자리에서 관리할 수 있다. 마스터와 인스턴스의 개념은 스케치와 동일했으나, 피그마의 컴포넌트 만들기가 훨씬 더 구조적이고 재미있어 보였다. 특히 마스터와 인스턴스를 한 화면에서 컨트롤 가능하기 때문에, 디자인 시스템을 더 간편하게 만들 수 있다고 느꼈다. 발표자께서는 코인원의 거래량 테이블을 컴포넌트로 구조화하는 모습을 시연으로 보여주셨는데, 정말 머리만 잘 굴리면 엄청난 상속이 이뤄지는구나 싶었다. 스케치의 네스티드 심볼을 처음 봤을 때와 충격이 비슷하다.

컴포넌트를 구조화하는 방법은 아래와 같다. CSS의 상속(발표자 님 말씀 인용) 처럼 동작했는데, 이렇게 컴포넌트를 인스턴스로 복제한 후 그것을 감싸는 과정들을 몇 번 거치면 작업속도가 몇 배로 빨라질 뿐 아니라 디자인 시스템으로서의 구조까지 가능하게 되는 것이다. 

1. 재사용할 오브젝트를 컴포넌트로 만든다. 이게 마스터.
2. 만든 컴포넌트를 복제해 인스턴스로 만든다.
3. 인스턴스를 다시 컴포넌트로 만든다.
4. 마스터의 요소를 바꾸면 새로 만든 컴포넌트들의 같은 요소들도 다 바뀐다.

---

Framer X와 Figma의 연동이 될까?

갑자기 Framer X에서 Figma를 불러올 수 있는지 궁금해져서 Store 에서 검색해 보았다. 혹시나 했더니 역시나, 두 개가 검색되었다. 하나는 Figma의 이미지를 불러오는 컴포넌트, 그리고 또 하나는 Figma의 실시간 작업화면을 불러오는 컴포넌트였다.

component탭의 FigmaImage를 캔버스에 끌어넣기 해 보았는데, Figma의 File URL을 붙여 넣기 하라는 메시지가 떴다. URL과 access Token을 붙여 넣기 하니 파일이 이미지로 들어왔다. Image Format을 PNG, SVG, JPG로 바로바로 변경이 가능했다. 근데 이거 그냥 프레이머에서 직접 그리고 말지 왜 굳이 피그마에서 통이미지를 불러와야 하지? 하는 의문이 생기긴 했다. Framer Classic에서는 스케치 파일의 레이어들이 다 살아있는 상태로 임포트 되었는데. Framer X에서는 스케치 임포트 기능도 없어졌고 컴포넌트도 없다. 

프레이머에서 자체적으로 디자인부터 하게 되어 있으니 굳이 불러오는 기능을 주지 않았던 게 아닐까? 그렇다면 피그마를 임포트 할 때도 굳이 레이어를 살려둘 필요가 없을 수도 있겠다. 아무튼 뭔가 쓰임새가 있을 거라 생각하며 패-스.

우측의 Figma File URL, Access Token을 입력하니 이미지가 들어왔다.

또 하나의 희한한 컴포넌트가 바로 이 라이브 임베드 컴포넌트다. 피그마의 작업 파일을 넣는 컴포넌트이다. 방금 적은 URL을 입력해보았더니 실제로 파일의 프레임 전체가 임베드되었다. 

이게 뭐지.... 감시 모드인가. 피그마에서 작업하는 모습이 그대로 보인다. 무척 신기하긴 했는데 이거야말로 언제 쓸 수 있는지 궁금했다. 

짧지만 아주 유익한 밋업이었다. 궁금이답게 궁금증이 생겼고 또 다른 걸 해 보게 된 오늘 밋업. 특히 세 번째, 피그마의 컴포넌트 구조가 너무 신기해서, 스케치에서 갈아타고 싶은 충동이 느껴질 정도였다. 앞으로 만들 프로덕트는 Figma를 이용해 만들어야겠다(+ FramerX)