피그마figma 데스크탑 앱으로 설치하기 및 작업파일(*.fig)로 공유하기

피그마figma 데스크탑 앱으로 설치하기 및 작업파일(*.fig)로 공유하기

피그마

안녕하세요. 당근입니다.

오늘은 평화로운 웹서핑을 하던 도중 어부지리로 알게된 피그마 사용법을 한번 공유해보려고 합니다.

아시다시피 피그마figma는 스케치, 어도비XD등과 같은 UI 디자인 프로토타입 툴이죠.

피그마의 기본적인 세팅과 사용법을 알고싶으신 분들은 아래 포스팅을 확인해보세요.

• UI 프로토타이핑 툴 피그마(Figma) - 1. 설치 및 버튼 만들기
• UI 프로토타이핑 툴 피그마(Figma) - 2. 프로토타이핑 및 개발 도구

 

0. fig파일이 무엇인고?

 

디자인 관련 자료들을 보다가 피그마로 제작된 디자인 에셋 파일을 무료로 받을 수 있더라구요. 그래서 오 피그마 연습해볼겸 한번 받아볼까? 하고 받았더니 fig파일로 다운받아집니다.

그러고보니 피그마는 웹 브라우저 기반으로 작동하고 작업파일도 링크로 공유하잖아요?

 

FIG 파일

인터넷 연결이 없는 상태에서 일반 데스크탑 앱 또는 응용프로그램처럼 컴퓨터에 설치해서 사용하고 싶을 때, 또는 링크 형태가 아닌 파일로 프로토타입을 공유하고 싶을 때는 어떻게 해야할까요?

피그마를 데스크탑 앱으로 다운로드하여 사용하면 됩니다. 설치 방법은 간단해요.

 

1. 피그마figma 데스크탑 앱으로 설치하기

 

https://www.figma.com/downloads/

Download Figma Desktop Apps, Mobile Apps, and Font Installers

피그마 공식 홈페이지 다운로드 링크에서 각 운영체제에 맞는 설치파일을 다운로드해주세요.

위 링크를 누르시면 다운로드 페이지로 바로 이동합니다.

피그마 다운로드 페이지

맥? 윈도우? 응 둘 다.

아 그리고 피그마는 모바일 프리뷰용 앱도 제공해요. 가운데 Live Device Preview라고 적힌 Figma Mirror 입니다. 

 

설치 후 첫 화면

피그마 설치를 완료하고 실행해보면 이런 페이지가 떠요.

로그인 위드 브라우저를 눌러서 웹상에서 로그인합니다. 저는 이전에 브라우저로 사용할 때 구글 계정으로 로그인했기 때문에 G메일 아이디로 로그인했어요.

피그마 앱 켜기

오픈 더 데스크탑 앱을 누르면 다른 앱으로 이동하겠냐고 묻고 예를 누르면 자동으로 피그마 앱으로 돌아옵니다.

 

데스크탑 앱 실행

이전에 브라우저에서 작업하던 파일들이 잘 남아있네요. 작업 방식은 동일해요. 똑같이 오토세이브가 되고, 링크로 공유할 수 있고... 작업 방식자체는 전혀 차이가 없습니다.

 

 

 

2. 피그마figma 파일로 공유하기(*.fig)

 

그렇다면! fig 파일로 저장하고 fig 파일로 불러오기는??

마음만 먹으면 잘 보이는 곳에 있어서 금방 찾으실 수 있습니다.

 

저장하기는 File - Save as .fig... (업데이트 후 Save local copy)

.fig 로 저장하기

불러오기는 어쩐일인지 다운받은 파일 아이콘도 피그마 아이콘으로 바뀌고 연결프로그램 설정도 마쳤는데 *.fig파일을 더블클릭하는 것 만으로는 열리진 않더라구요.

피그마 앱을 열긴 여는데 파일이 안열립니다. 다른 분들도 이렇게 안열리는지는 모르겠어요. 

대신 *.fig파일을 피그마에다가 끌어다놓으면 Import Files라는 팝업이 뜨면서 열립니다.

import files

파일 불러오는 중

다운받은 파일

짜잔. 파일이 잘 열리네요. 요새 한참 유행하는 스큐어모피즘/뉴모피즘 에셋을 구경해봤어요.

위 무료 디자인 요소들은 아래 링크에서 다운받을 수 있습니다. 

 

https://www.uistore.design/items/neumorphic-skeuomorphic-elements-for-figma/

 

---

틈날때마다 피그마를 들여다보고는 있지만 자주 사용하던 툴이 아니라서 그런지 익숙해지는게 쉽지가 않네요.

팁이랍시고 올리는데 너무 기초적인거 아니야? 싶기도 하고요.

하지만 저처럼 피그마의 존재 자체도 모르다가 알게 되신 분도 있을거고 저랑 같은 시행 착오를 겪는 분도 있으시겠죠. 그렇게 믿고 곧 닥칠 실무 상황에서 부드럽게 대응할 수 있도록 이것 저것 계속 시도해보려고해요.

다음에도 하찮을지 유용할지 모르는 피그마 팁으로 돌아올게요.

이상 당근이었습니다.