Figma 새 파일 만들기, 버전 관리
기획자의 Figma - 피그마 기본 기능 익히기 :)
자, 이제 피그마로 작업을 하기 위한 새 파일을 만들고, 버전 관리를 하는 방법에 대해 알아보겠습니다.
오늘의 포스팅은 내용이 상당히 길어요 :)
간단히 보고 싶으신 분들은 동영상으로 확인해주세요!
Figma 새 파일 만들기
Figma desktop app - OS Mac version피그마 앱에서 새 파일을 만드는 기능 버튼은 여기저기 참 많습니다. (왜지..? ㅋ)
프로젝트에 아직 생성된 파일이 없을 때는 화면 정 가운데 제공되기도 하고, 우측 상단에도, 파일명이 표시되는 앱 헤더 영역에도 + 버튼을 클릭하면 언제든 새 파일을 생성할 수 있답니다.
최근 Figma 에서 FigJam 을 릴리즈한 상태라 어디서든 새 파일 생성하는 버튼을 누르면 위의 이미지처럼 어떤 파일을 생성할 것인지를 선택하도록 옵션이 주어집니다.
Design file 은 여러분이 알고 계시는 UI, Design 작업이 진행되는 일반적인 피그마 파일입니다.
FigJame 은 추후 설명하게 되겠지만 한마디로 UI 외 작업을 할 수 있는 보드라고 생각하시면 됩니다. 피그잼 파일에서 제공하는 다양한 기능들이 너무 재미있어서 이 강의에서 진행할 예정인 프로젝트에서 본격적으로 사용해보려고 합니다.
Import 기능을 선택하시면, 로컬에 갖고 있는 .fig 파일이나 스케치 파일을 가져오는 기능입니다.
그동안 스케치 파일로 보유하고 있던 파일도 Figma 에서 열 수 있고, 편집도 가능합니다. 스케치에서 심볼로 지정해둔 내용들은 동일한 성격인 Figma 의 컴퍼넌트(Component)로 대치되어 사실상 거의 차이 없이 사용이 가능합니다.
Figma 새 파일의 이름과 저장 경로 설정하기
우선 +New 버튼을 클릭한 후, Design file 버튼을 클릭해주세요.
오픈하실 때 앱의 위치나 상태는 전혀 상관 없습니다. 경로와 이름은 자유롭게 변경이 가능하답니다.
새 디자인 파일을 오픈되면 아래와 같은 상태일거에요.
앱 상단 부분에 기본적으로 파일명은 Untitled 로 되어있습니다.
저는 Team project 화면에서 New 버튼을 클릭했기 때문에 경로가 팀 프로젝트로 잡혀있네요. 어디서 New 버튼을 눌러서 생성했느냐에 따라서 특정 프로젝트명이 표시되거나 Draft 로 표시되어 있을거에요. 우선은 이 부분을 변경해볼까요?
방법은 아주 간단합니다.
Untitled 로 되어있는 부분을 더블 클릭하세요.
.
.
.
그게 전부 입니다.
허무할 정도로 쉽죠? ㅋㅋㅋㅋ
타이틀 영역을 더블 클릭해서 해당 영역이 아래와 같이 파랗게 선택되어 보여진다면 이제 원하는 파일명을 작성해주면 됩니다.
저는 '피그마 기본 기능 익히기'로 파일 제목을 설정해습니다.
그럼 이번엔 파일의 저장 위치를 변경해볼까요?
역시 이번에도 저장 경로가 표시되어 있는 영역을 더블 클릭해줍니다.
그럼 팝업이 뜨면서 현재 이 파일이 저장된 위치에 체크 표시가 됩니다.
이 상태에서 변경하고자 하는 위치를 선택하고, 하단의 Move 버튼을 클릭합니다.
.
.
.
또 이게 전부입니다.
너무 별거 없어서 많.이.놀.랐.죠.
ㅋㅋㅋㅋ
죄송;;;; 혼자 이런 유머하고 좋아하는 편입니다...........;;;
Figma 파일의 버전 관리
Figma 는 기본적으로 '저장' 버튼을 누르는 개념이 없습니다. 이것은 파일 제목 설정뿐만이 아니라 모든 부분에서 동일합니다. 기본적으로 작업 내역은 자동 저장되며 버전 히스토리를 저장하도록 되어있어 저장 버튼을 클릭해야 하는과정은 없다고 이해하시면 된답니다.
대신 피그마에서 저장(Save)의 개념은 .fig 파일로 작업 중인 파일을 추출하거나 버전 히스토리를 설정하는 개념으로 사용됩니다.
Figma 앱의 메뉴 중 File을 클릭하면,
* Save As .fig
* Save to Version History
총 2개의 메뉴를 확인할 수 있습니다.
Save As .fig 기능은 말 그대로 현재 작업 중인 파일을 추출하여 나의 PC로컬로 저장하는 기능입니다.
피그마는 권한만 있다면 웹 브라우저나 앱으로 접근하여 편집이 가능하지만, 경우에 따라 파일 자체를 전달해야할때 사용하면 됩니다.
Save to Version History 버튼을 클릭하거나
위 화면에서처럼 파일명 옆의 셀렉트 버튼을 클릭하면 버전 히스토리로 이동하는 기능이 제공됩니다.
Show version history 를 클릭하면
위 화면처럼 오른쪽 패널에 히스토리 정보가 표시됩니다.
* 현재 제가 화면을 보여드리기 위해 사용하고 있는 계정은 무료 플랜이라 위의 화면에 히스토리 저장이 30일까지만 된다는 문구가 보여지고 있습니다. 프로페셔널부터는 히스토리 저장 제한이 없으니 참고 부탁드려요.
각 버전의 제목은 기본적으로 작업일시와 작업자의 닉네임으로 표시됩니다.
이 부분을 특별히 내가 원하는 방식으로 변경하고 싶다면, 변경하고 싶은 버전 영역을 더블 클릭합니다.
그럼 이렇게 버전의 타이틀과 설명을 쓸 수 있는 팝업 화면이 보여집니다.
여기서 원하는 버전 명칭과 설명을 입력한 후 Save 버튼을 클릭해주세요.
그럼 내가 설정한 내용으로 버전이 저장이 완료됩니다.
오른쪽 히스토리 패널 상단의 + 버튼 클릭 시에도 버전을 저장할 수 있는 기능이 동일하게 제공된답니다.
저장된 히스토리 중 특정 버전의 화면을 보고 싶다면, 히스토리 목록에서 원하는 버전을 클릭하면 됩니다.
이때 유의하실 것은, 이전 버전으로 이동하면 그 화면을 볼 수만 있다는 점입니다. 편집은 불가능해요.
그래서 선택한 버전의 화면을 다시 살리고 싶다면
그 버전의 타이틀을 한번 클릭한 후 타이틀 옆으로 보이는 메뉴 버튼을 클릭합니다.
이 메뉴에서는 총 4가지의 기능이 제공됩니다.
Edit version info 버전 타이틀, 설명 내용을 변경할 수 있습니다.
Restore this version
이 버전으로 화면 내용을 돌리는 기능입니다. 이 기능을 클릭하고 나서 화면이 재 로드되면, 좌측 상단의 Done 버튼을 클릭하세요. 그럼 해당 버전의 화면을 편집할 수 있는 상태로 돌아옵니다.
Duplicate
해당 버전의 화면 그대로 파일을 복사한 파일을 만들어줍니다. 보통 원 파일과 동일한 경로에 같은 제목 + (Copy) 로 복사 파일이 생성됩니다.
Ex. 피그마 기본 기능 익히기 (Copy)
Delete version info 해당 버전을 삭제합니다.
Copy link
해당 버전 화면을 볼 수 있는 URL이 자동으로 복사됩니다. 다른 사람에게 해당 버전의 화면을 공유해야할 때 사용할 수 있습니다.
히스토리에 대한 관리가 완료되었다면 히스토리 패널의 X 버튼을 클릭하거나, 앱 좌측 상단의 Done 버튼을 클릭하면 히스토리 패널이 닫히고 작업 화면으로 다시 이동됩니다.
블로그로 기획자의 피그마를 운영하면서, 혹은 실무에서 클라이언트에게 Figma 로 화면 설계, 디자인을 진행한다고 했을 때 오는 문의사항 중에 바로 이 히스토리에 대한 부분이 은근히 많았습니다.
아무래도 프로젝트를 진행하다보면 각자의 입장에 따른 이해 차이가 발생하기도 하고, 변경사항도 빈번히 발생하기 때문이겠죠?
Figma 를 사용하면 이런 버전 관리가 안되거나 어려울까봐 걱정하는 분들이 꽤나 계셨던 터라, 이 부분에 대한 설명을 넣어보았습니다.
다음 시간에는 Figma 의 기본 개념인 프레임(Frame)을 비롯한 기본적인 디자인 도구에 대해서 함께 살펴볼게요. :)
오늘도 고생 많으셨습니다~!!
#피그마 #figma #피그마버전관리 #figma버전관리 #웹기획 #앱기획 #웹디자인 #피그마강의 #figma강의
