웹 개발을 하다 보면 한 번쯤 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-practice.fig 다운로드
다운을 잘 받았다면, Figma 페이지에서 Import file
버튼을 누른 다음, 파일 탐색기에서 아까 다운로드 받은 파일을 불러올게요.
완료되면 이런 식으로 팝업이 뜨는데, 여기서 Done
을 눌러 줍시다.
이렇게 파일을 불러온 후에도, 오른쪽 클릭 후 Rename
을 클릭하면 파일의 이름을 손쉽게 변경할 수 있어요. (저는 "Figma 연습"이라고 변경해 줄게요.)
이제 불러온 파일을 더블 클릭하여 열어 줍시다.
이렇게 하면 에디터 화면에 들어오고, 기본적인 준비가 완료되었습니다.
우선 맨 왼쪽의 회색 사각형을 클릭한 다음, Alt
키를 누른 상태에서 코드잇 로고 위에 마우스를 올려보세요. 그럼, 회색 사각형과 코드잇 로고 사이의 간격을 확인할 수 있습니다.
이번에는 첫 번째 사각형 안에 있는 보라색 사각형을 클릭하고, Alt
키를 누른 상태에서 바깥쪽의 회색 사각형 위에 마우스를 올려 보세요. 그럼, 사이의 간격을 확인할 수 있습니다.
Figma에서는 모든 요소를 이미지로 다운로드할 수 있습니다. Export라는 기능을 사용하면 되는데요. 가운데 코드잇 로고를 클릭하세요. 오른쪽 메뉴에서 Design
탭으로 들어가서, 맨 아래에 있는 Export
섹션을 확인해 봅시다. Export
오른쪽에 있는 + 버튼을 클릭하면 Export
버튼이 보입니다. 원하는 배율과 파일 확장자를 선택하고 이미지 파일로 다운로드할 수 있습니다.
이번에는 맨 오른쪽에 있는 모서리가 둥근 사각형을 클릭해 보세요. 화면 오른쪽에 있는Inspect
탭으로 들어가면 디자인에 해당하는 CSS 코드가 보입니다. 여기서 코드를 복사해서 CSS 코드를 쓸 때 활용하면 됩니다.