스케치에서 피그마로 바꾸면 일어나는 일 (번역)

제가 처음 접한 UI 디자인 툴은 스케치였어요,

 

딱히 강좌를 보고 익히지는 않았지만 구글링하면서 쓰다보니 어찌어찌 사용할 수 있게 되더라고요.

하지만 심볼이 뭔가 편리하면서도 완벽하게 편리하게 느껴지지는 않았어요.

그리고 협업하려면 어딘가에 업로드하고, 서로 싱크 맞추고... 뭔가... 껄적지근하다고 생각하던..

그러던 어느날! (두둥)

 

저는 피그마를 만나게 됩니다.

포토샵→스케치 만큼의 환희는 아닐 것 같지만

뭔가 스며들듯이(?) 피그마에 사로잡혔어요.

나만 그렇게 느끼는 건가? 하는 궁금증이 생껴서

마침 활동중인 사이드 프로젝트 동아리 멤버들에게 아래와 같이 간단한 설문조사를 돌려봤습니다.

피그마 14표 중에 9표 획득!

판단하기엔 모수가 적은 거 알아요ㅎㅎ

그래도 같은 생각을 하고 있는 디자이너들이 저뿐이 아닌 예감이 들기 시작합니다.

 

저장이라는 개념 없이

같은 웹 공간에서

실시간 협업

 

버전관리에 앱스트랙트라는 툴이 따로 필요하지 않고

협업에 제플린이라는 툴을 따로 쓰지 않아도 되고

간단한 프로토타입은 스마트 애니메이션을 이용해서 인비전과 비슷한 퍼포먼스를 얻을 수 있는

 

이 피그마를 저는 널리널리 알리고 싶다는 생각이 들었습니다.

저는 이번 기회에 피그마의 차별점에 대해서 설득할 수 있는 논리를 갖춰서

앞으로 어떤 디자인 조직에 가도 피그마로 일하는 방식을 바꿔봅시다! 하고 한 번쯤 제안하고 싶다는 생각이 들었어요.

 

그래서 이번엔 이 글을 편파적으로 번역해서 전달해보려고 합니다.

What to expect when moving from Sketch to Figma

What to expect when moving from Sketch to Figma

매번 서론이 기네요..ㅎㅎ.. 시작하겠습니다.

 

스케치에서 피그마?

이사는 힘들어요

네. 이사는 힘듭니다.

이민을 가든, 다른 도시로 이주를 하든, 같은 동네에서 움직이든 간에 이사는 힘듭니다.

가장 큰 고통은 포장, 청소, 포장 풀기가 아니라 다시 새로운 루틴에 적응해야한다는 사실이죠.

이전에 숟가락, 젓가락을 놓던 서랍이 이제는 오른쪽이 아니라

당신의 왼쪽에 있는데도, 얼마동안은 오른쪽 서랍을 계속 열게될 것 처럼요.

 

같은 맥락에서 스케치에서 피그마로 이동하는 것은 어려울 수 있습니다.

UI가 약간 다르고, 키보드 단축키가 다르며, 익숙해지는 데 약간의 시간이 걸리는 몇 가지 핵심적인 차이점들이 있습니다.

저도 피그마로 주요 툴을 바꾸었을 때, 일주일동안 실제 프로젝트를 진행한 뒤에야 익숙해졌던 기억이 있거든요.

 

따라서 최근에 피그마로 이동한 경우나, 이동을 고려중인 경우에,

이 글이 스케치와 피그마 사이 유사점과 차이점을 이해하는 데에 도움이 되기를 바랍니다.

가능한 빨리 적응하게 되길 바라면서 글을 적습니다.

 

한 가지 다행인 점은 스케치의 기존 디자인을 모두 피그마에 Import할 수 있다는 사실입니다.

레이어를 그대로 유지하고, 심볼을 컴포넌트(피그마에서의 심볼 개념)으로 불러올 수 있습니다. (불행히도 스타일은 스케치의 다른 요소들에 비해 가져오기가 조금 번거롭습니다만, 이 글의 마지막에 스케치 속 스타일을 빠르게 가져오는 것을 도와줄 몇 가지 팁도 소개하겠습니다.)

어떻게 Import하냐고요?

피그마의 파일 탐색기에서 Import 메뉴로 가져오거나, 스케치 파일을 피그마에 드래그 앤 드롭하면 끝입니다.

 

그래서 뭐가 다르냐고요?

피그마 속 대부분의 UI는 스케치 사용자에게 친숙한 편일겁니다.

하지만 빠른 이사를 위해서 초기에 파악하면 좋은 핵심적인 차이들이 있습니다.

Artboard(스케치) 👉 Frame(피그마)

피그마에는 프레임이라는 개념이 있습니다. 스케치의 아트보드와 마찬가지로 프레임은 여러 콘텐츠(텍스트, 도형 등)들을 포함하는 데 사용됩니다. 그러나 스케치의 아트보드와 달리 피그마의 프레임에는 Constraint가 기본으로 장착되어 있으며, 중첩되어 사용될 수 있습니다. (이는 반응형 디자인을 할 때 강력함이 드러납니다.)

그래서 프레임을 아트보드랑 똑같이 생각하긱보다, 강력한 그룹 기능 혹은 HTML에서 div라고 이해하기를 권합니다.

 

프레임에는 배경 fill 이나 여러 개의 레이아웃 그리드 같은 특성을 추가할 수 있습니다. 또한 포함된 콘텐츠를 클립하거나, 클립 해제가 가능합니다.

 

이런 프레임은 만드는 것도 매우 쉽습니다. 아래 그림을 봐주세요.

 

스케치에서 'A'를 눌러 아트보드를 만든 것처럼, 피그마에서는 'F'를 눌러 프레임을 만들 수 있습니다.

 

레이아웃 그리드

피그마의 레이아웃 그리드는 스케치의 그리드 옵션에 비해 약간 독특합니다.

가장 먼저 눈에 띄는 것은 파일 / 페이지 레벨에서만 그리드를 넣을 수 있는 것이 아니라,

모든 크기의 프레임에 추가될 수 있다는 것입니다. 단일 프레임에 여러 개의 그리드를 추가할 수 있으므로, 8*8px 정사각형 그리드, 16px 세로 baseline 그리드, 그리고 12 column 그리드를 한꺼번에 넣을 수 있습니다. 또한 그리드에서 스타일을 만들어 라이브러리에 게시할 수도 있습니다.

 

구성 요소에 레이아웃 그리드를 추가하면 패딩 또는 여러 spacing value들을 전달하는 데 도움이 될 수 있습니다.

 

Symbol(스케치) 👉 Component(피그마)

스케치에서 심볼은 디자인 파일 전체에서, 이미 사용됐던 요소를 재사용할 수 있는 좋은 방법입니다.

피그마에서는 비슷하게 '컴포넌트'가 있습니다. 컴포넌트와 심볼을 뒷받침하는 아이디어는 같지만, 피그마의 컴포넌트는 심볼과 다른 몇 가지 차이점이 있는데요.

 

스케치에서 심볼을 만들면 심볼 페이지에 마스터 심볼이 추가됩니다. 그 다음에는 같은 문서의 다른 페이지에서 이러한 마스터 심볼의 인스턴스를 사용할 수 있습니다. 버튼 속 텍스트 변경같은 인스턴스 편집은 오른쪽 패널에서 Overrides를 통해 이루어집니다. 그러다가 마스터 심볼을 편집해야 하는 경우, 심볼 페이지로 돌아가서 편집해야 합니다. 기본적으로, 스케치에서 마스터 심볼과 인스턴스는 같은 페이지에 있을 수 없으므로 적절한 컨텍스트가 없으면 심볼을 편집하기 어려운 경우가 더러 발생합니다.

 

반대로 피그마를 사용하면 캔버스에서 직접 컴포넌트의 인스턴스를 조작할 수 있습니다. 인스턴스의 버튼 색상을 바꾸고 싶은가요? 그냥 바꾸시면 됩니다. 텍스트를 바꾸고 싶으세요? 텍스트를 바꾸시면 됩니다! 간단한 변경을 위해 패널에서 Overrides 를 이용할 필요가 없습니다. 약간 편향적인 생각일 수 있지만, 이 방법은 유연하게 마스터 컴포넌트와 그 인스턴스를 간단하게 편집할 수 있습니다.

 

또 다른 이점은 마스터 컴포넌트와 해당 인스턴스가 같은 페이지에 있을 수 있다는 겁니다. 상황에 따라 마스터 변경 사항이 모든 인스턴스에 어떤 영향을 미치는지 한 눈에 알 수 있기 때문에, 컴포넌트 생성 및 편집이 훨씬 쉬워집니다. 초기 디자인 작성 단계에 캔버스에서 컴포넌트와 인스턴스를 나란히 배치하면서 디자인해보시면 이 말이 무슨 말인지 아실 겁니다. 정말 편리합니다.

 

스타일

피그마에서는 4가지 타입의 스타일을 만들 수 있습니다. — Grid, Color, Text, and Effect

생성된 스타일은 같은 파일 내에서나 팀 라이브러리에 추가될 수 있습니다.

 

스케치에서는 컬러와 텍스트가 묶여서 스타일로 저장되지만, 피그마에서는 하나씩 분리했습니다. 이러한 모듈식 접근 방식은 더 유연하기 때문에 디자이너가 다양한 경우에 스타일을 더 쉽게 적용할 수 있습니다. 각 색상과 정렬에 대해 여러 개의 텍스트 스타일을 만들어야 합니다.

 

피그마에서 스타일을 만들기 위해서는 4개의 작은 원으로 구성된 작은 사각형 아이콘을 클릭하면 됩니다.

 

Property 패널의 텍스트, 색상, 이펙트, 그리드 각 섹션마다 이 버튼이 있으며, 클릭하면 현재 지정된 스타일이 모두 드롭다운됩니다. 새로운 스타일을 만드려면 드롭다운 오른쪽 상단의 더하기 버튼을 클릭하면 됩니다. 여기에서 스타일을 명명하고 만들 수 있는 모달이 나타납니다.

 

프로토타이핑

여기서는 프로토타이핑에 대해 길게 말하지 않을 겁니다.

대신 아래의 영상을 봐주세요.

 

피그마에서는 컴포넌트의 어떤 부분tr(part)으로도 프로토타입을 만들 수 있지만,

스케치에서는 전체 심볼만 전환점(transition point)으로 사용할 수 있습니다.

이 것의 장점은, 같은 페이지 속 마스터 컴포넌트에서 프로토타입 연결을 설정할 수 있다는 겁니다.

그리고 프로토타입 연결이 설정된 마스터 컴포넌트에서 복제한 인스턴스를 만들면, 그 연결이 이어집니다.

 

파일 브라우징과 저장

혁신적인 기능은 아니지만, 피그마에는 파일 관리 기능이 내장되어 있습니다.

즉, 모든 파일이 클라우드에 저장되므로 Dropbox 또는 Google Drive와 같은 서비스에 업로드하고 공유하는 일들에 대해 더 이상 걱정할 필요가 없습니다.

" 최종, 최종의 최종, 최종의 최종의 최종22" 같은 파일은 이제 더 이상 필요하지 않죠.

 

 

이사를 결정한 분들에 드리는 🍯팁

어떤가요, 이사를 고려해볼만 하지 않나요?

이것으로 우리는 스케치에서 피그마로 이사할 때 이해해야 할 기본 개념들을 다뤘습니다.

바라건대 2가지 툴이 어떻게 다른지 이해한 다음에 이사를 결정하시기를 바랍니다.

이 글을 마치기 전에 스케치에서 스타일 속성을 가져오는 데에 필요한 키보드 단축키 등,

기타 팁과 요령을 공유하고 떠나겠습니다.

 

키보드 단축키

비슷한 단축키가 많지만, 몇 가지 다른 점이 있습니다.

그럴 때 사용하면 좋은,

모든 단축키를 알려주면서, 특정 단축키가 사용됐을 때 사용여부도 알려주는 멋진 대화 패널이 있는데요.

< control+shift+? > 를 누르면 짠 하고 나타납니다. 이 패널로 피그마 단축키를 빠르게 익혀보세요.

 

(아쉽게도, 아직까지는 커스텀 단축키를 제공하고 있지 않습니다. 하지만, 미래를 기대해주세요.)

 

내비게이션

메뉴를 빠르게 탐색하려면 Command + /를 사용해보세요.

이 바로 가기를 사용하면 검색 필드가 활성화 된 파일 메뉴가 열립니다.

이를 통해 마우스 나 트랙 패드를 찾을 필요없이 명령을 빠르게 검색 할 수 있습니다. 아래처럼요.

 

Layer 패널을 열려면 Option + 1을 사용하고

Asset 패널은 Option + 2를,

Library Modal은 Option + 3을 엽니 다.

이 3 가지 단축키를 사용하면 라이브러리, 구성 요소 및 레이어를 매우 빠르게 탐색 할 수 있습니다.

브라우저 또는 데스크톱 앱에서 탭 사이를 이동하려면 Shift + Command + [ , ]를 사용하십시오.

보통 데스크톱 앱에서 사용하며, 이 바로 가기를 사용하면 다른 파일간에 빠르게 이동할 수 있습니다.

 

같은 ~를 가진 오브젝트 한꺼번에 선택하기

같은 색을 가진 개체(Object), 같은 폰트를 쓰는 개체, 같은 인스턴스인 개체.. 등과 같이 같은 특성을 가진 오브젝트를 한꺼번에 선택할 수 있는 기능이 있습니다.

Edit 메뉴에서 "Select all with..." 으로 시작하는 메뉴를 찾아보세요.

이 명령을 사용하면 여러 개체를 스타일이나 컴포넌트로 빠르게 되돌릴 수 있습니다.

 

다른 서비스와의 Integration

피그마에는 이미 놀라운 프로토 타입 기능과 코드 패널이 내장되어 있습니다. 하지만 만약 당신의 팀이 이미 Zeplin 또는 Principle과 같은 툴을 사용해도 걱정할 필요가 없습니다. Integration 메뉴에서는 아래와 같은 것들을 제공합니다.

 

 

지금까지 긴 글 읽느라 수고하셨습니다.

이 글에서 다루지 않은 피그마의 여러 모습들이 더 있지만,

저는 이 글이 당신이 스케치에서 피그마로의 이사를 고려하는 첫 시작을 돕는 역할이 되기를 바라며,

 

그리고 새로운 집, 피그마에 올 당신을 환영하며 글을 마칩니다.

---