Design

Figma 디자인 파일을 작성할 때 알아두면 좋은 내용들에 대해 기록해둔다.

무료 버전에서 팀 라이브러리를 관리하고 불러오는 것은 불가능하다. 파일 내에서만 디자인을 만들고 관리할 수 있다. 그래서 팀 라이브러리를 복사하여 초기 디자인 설정을 진행하도록 한다.

팀을 만들면 프로젝트는 이미 만들어져 있으며, 1개의 디자인 파일이 팀명's team library라는 이름으로 작성되어 있다. 팀 화면에서 해당 파일을 눌러 보기 페이지로 이동한다.

팀 라이브러리의 초기 화면은 다음과 같다. 유료 버전일 경우 이곳에서 모든 폰트, 색상 등의 스타일을 관리하여 최신화 시킬 수 있지만 무료 버전이기 때문에 해당 내용들을 전체 복사하여 팀 디자인 파일에 붙여넣을 예정이다.

좌측의 Layers의 모든 내용을 복사할 것이기 때문에 잠금을 해제해야 한다. 자물쇠 모양을 클릭하면 해제되므로 모두 해제한다. 그리고 Ctrl+A를 눌러 모두 선택하고 Ctrl+C를 눌러 복사한다.

그리고 팀 화면으로 다시 이동하여 새 디자인 파일을 만든 뒤 Ctrl+V를 눌러 복사한 내용들을 붙여넣기해준다.

초기 라이브러리 세팅을 불러왔으며, 이곳에서 필요한 내용을 추가하거나 제거하여 페이지 내에서의 디자인을 관리할 수 있다.

초기 페이지에는 Edit team color styles라는 프레임이 존재하며 이곳에는 이미 등록된 색상들이 존재한다.

바로 뒤인 3번 프레임에서는 추가로 등록할 색상을 지정할 수 있도록 화면이 준비되어 있다.

비어있는 공간을 클릭하고 우측에 색상을 입력한다. 색상표에서 선택할 수도 있고 컬러 팔레트 사이트를 이용할 수도 있다.

불투명도를 조절해가며 같은 종류의 색상을 다양하게 설정한다. Figma 기본 설정을 살펴보면 불투명도 100%, 80%, 60% 이렇게 세 종류로 색상을 배치하므로 같은 형태로 색상을 만들어 배치하도록 한다.

아직 작업한 색상들에 이름을 붙이지 않았으므로 만든 색상을 선택하고 우측 메뉴()의 추가 버튼()을 눌러 라이브러리로 등록한다.

이름을 정하고 Create style 버튼을 누르면 등록이 완료되며, 페이지 내에서 해당 이름으로 색상을 불러올 수 있다.

어디서나 Fill의 메뉴버튼()을 누르면 등록된 색상을 확인할 수 있다.

다양한 색상을 추가하여 사용하도록 설정하면 이후 작업이 편리해진다.

Last updated 2 years ago