[Figma] 피그마 기본개념, 화면구조, 기능정리 ch.1 (Move, Scale, Local variable,Local style, Export)

 

해당 포스팅은 피그마 기본 화면구조와 기능에 대해 정리한 글입니다.

기본 화면구조와 화면구조에 해당하는 Move, Scale, Local variable, Local style, Export 컴포넌트들이 어떤 기능을 하는지에 대해 정리해 놓았습니다. 

기본기와 기본 기능만 잘 활용해도 금방 익숙한 툴이 될 거라고 생각이 듭니다. 

 

피그마 기본개념, 화면구조, 기능정리 CH.1

 

 

1. Move, Scale 

피그마 기본화면(1) - 이름변경, Move, Scale

1) Arrow  컴포넌트

1-1. Move

• 피그마에서 컴포넌트를 이동할 때 사용하는 도구이다. 
• 단축키 : V

1-1. Scale 

• 피그마에서 개체의 선, 폰트크기, 둥글기 등 개체의 현재 보여지는 속성 그대로 사이즈를 조절하기 위해 사용하는 기능으로 개체의 선, 폰트 크기가 비율에 맞춰 리사이징이 가능하다. 
• 단축키 : K

---

 

2) Project Name 

• 해당 페이지에서는 Login Page라는 이름을 가진 프로젝트로 생성되었다. 변경을 위해서는 제목을 더블클릭하여 이름을 변경할 수 있다. 

---

 

3) 기본 Design 설정 화면(Style Pannel)

Page

• 프로젝트의 백그라운드 색상을 설정할 때 쓰인다. 기본 값은 F5F5F5로 회색이다. 
• Show in Export (체크박스) : 선택시, 저장되는 파일에 백그라운드 색상이 포함되어 저장되는 기능이다. 

Local variables

• Variable : 피그마에서 저장할 수 있는 변수(데이터 형식)로써, 공통적인 컴포넌트의 색상, 숫자, 문자열, 논리형 등에 대해 공통적인 규칙을 변수로 저장하여  디자인 시스템의 일관성을 부여한다.

변수 설정방법 , Local Variable을 클릭하면 해당 화면이 나타난다.

button/background/primary 색상지정

• 변수 지정 및 사용방법 
  : 공통적으로 사용할 색상, 숫자, 문자열, 논리형을 설정하여 '이름, 속성 값'을 지정한다.

속성	속성값
색상	색상 지정
숫자	숫자 설정
문자열	문자열 설정
논리형	Y/N 설정(Boolean)

 

 

▼자세한 variable에 대한 포스팅은 아래에서 확인 할 수 있다. ▼

[Figma] 피그마 베리어블 Local variables 에 대해 알아보자 (color, Number, String, Boolean, Modes 설정방법까

 

 

 

Local style

• 로컬 스타일은 현재 작업 중인 프로젝트에서 재사용할 만한 스타일을 저장하여, 빠르게 컴포넌트에 스타일을 지정할 수 있는 기능이다. 
• Local Style 영역을 선택하면 아래와 같은 화면이 나오고, 이름, 설명, 속성값을 지정할 수 있다.

Local Style

• 저장된 Local style 사용법은 간단하다. 컴포넌트를 선택하면, 스타일 패널에 저장된 Local style이 뜨게 되고, 선택하여 적용시킬 수 있다. 

저장된 Local Style  사용하기

Export

• Export는 파일을 저장하는 기능이다. 저장시 보일 배율, Suffix(접미어- 동일한 파일명에 다른 배율을 함께 저장하여 비교할 때 옆에 붙는 text), 파일 확장자를 선택한다.
• Export 옆 +를 누르게 되면 2x,3x 배율의 List가 추가되고, Export asset을 통해 저장하면 List에 있었던 배율의 파일이 모두 저장되게 된다. 

export