웹 개발을 하다 보면 한 번쯤 Figma(피그마)라는 도구에 대해서 들어 보셨을 겁니다. Figma는 최근 가장 많이 쓰이는 디자인 도구인데요. 디자이너들이 Figma로 디자인하면, 개발자들은 웹 브라우저나 데스크톱 앱에서 디자인을 편리하게 확인할 수 있죠. 이번 레슨에서는 웹 퍼블리싱, 프론트엔드 개발을 할 때 필요한 Figma 사용법에 대해서 간단히 알아보겠습니다.

Figma 가입하기

먼저 Figma의 홈페이지로 들어가 봅시다.

Figma 홈페이지 바로가기

바로 아래 스크린샷의 화면 오른쪽 위에 있는 Sign up을 누르면, 구글 간편 가입이나 이메일을 통해 가입할 수 있습니다. (참고로 이메일을 통해 가입하면 이후에 메일 인증 과정이 있으니, 실제 사용하는 이메일 주소를 입력해 주세요.)

구글 계정 연동을 선택했거나 이메일 주소를 입력했다면, 이름과 하는 일 등을 간단하게 입력해 줍시다.

앞에서 참고로 언급한 메일 인증 과정입니다. 구글 계정 연동이 아닌 경우에만 해당하는 내용이니 참고해 주세요.

가입할 때 입력했던 이메일의 메일함으로 가 보면, 이런 식으로 확인 메일이 와 있을 텐데요. 여기서 Verify email을 눌러 줍시다.

축하합니다! 이제 나의 Figma 계정이 만들어졌습니다.

이것도 Starter 플랜에 있는 Start for free 버튼을 눌러 줍시다.

우리는 실습 파일을 직접 받아올 거라서, 여기서 I'll get started on my own을 눌러줄 거예요.

오른쪽 목록에서 Drafts라고 쓰여 있는 탭을 클릭하면, 이런 공간이 나오는데요. 여기는 내 모든 개인 디자인 작업들을 보관하는 공간이라고 보면 됩니다. 지금은 Figjam이라는 서비스를 소개하는 팝업이랑, Figma를 이용할 수 있는 튜토리얼 같은 파일들이 있네요.

Figma 파일 불러오기

이제 아래 파일을 다운 받아 주세요.

figma-practice.fig 다운로드

다운을 잘 받았다면, Figma 페이지에서 Import file 버튼을 누른 다음, 파일 탐색기에서 아까 다운로드 받은 파일을 불러올게요.

완료되면 이런 식으로 팝업이 뜨는데, 여기서 Done을 눌러 줍시다.

이렇게 파일을 불러온 후에도, 오른쪽 클릭 후 Rename을 클릭하면 파일의 이름을 손쉽게 변경할 수 있어요. (저는 "Figma 연습"이라고 변경해 줄게요.)

이제 불러온 파일을 더블 클릭하여 열어 줍시다.

이렇게 하면 에디터 화면에 들어오고, 기본적인 준비가 완료되었습니다.

Figma에서 디자인 확인하기

마진, 패딩 확인하기

우선 맨 왼쪽의 회색 사각형을 클릭한 다음, Alt 키를 누른 상태에서 코드잇 로고 위에 마우스를 올려보세요. 그럼, 회색 사각형과 코드잇 로고 사이의 간격을 확인할 수 있습니다.

이번에는 첫 번째 사각형 안에 있는 보라색 사각형을 클릭하고, Alt 키를 누른 상태에서 바깥쪽의 회색 사각형 위에 마우스를 올려 보세요. 그럼, 사이의 간격을 확인할 수 있습니다.

이미지 다운로드하기

Figma에서는 모든 요소를 이미지로 다운로드할 수 있습니다. Export라는 기능을 사용하면 되는데요. 가운데 코드잇 로고를 클릭하세요. 오른쪽 메뉴에서 Design 탭으로 들어가서, 맨 아래에 있는 Export 섹션을 확인해 봅시다. Export 오른쪽에 있는 + 버튼을 클릭하면 Export 버튼이 보입니다. 원하는 배율과 파일 확장자를 선택하고 이미지 파일로 다운로드할 수 있습니다.

CSS 속성 확인하기

이번에는 맨 오른쪽에 있는 모서리가 둥근 사각형을 클릭해 보세요. 화면 오른쪽에 있는Inspect 탭으로 들어가면 디자인에 해당하는 CSS 코드가 보입니다. 여기서 코드를 복사해서 CSS 코드를 쓸 때 활용하면 됩니다.