Figma 사용하기 (Basics)

https://www.figma.com

 

 

 

 

 

1.  Frame

다양한 프레임을 사용할 수 있다. 핸드폰, 노트북, 사용자 지정까지 프레임을 여러가지 사용하여 확인이 가능. (상단 격자 무늬 이용)

또한, 화면을 여러개 사용할 경우나 특정 프레임 안에서 슬라이드의 느낌을 주고 싶을 경우에도 프레임을 만들어 사용.

 

<+ 한 프레임 안에서 특정 구간(헤더)을 제외하고 움직임을 주고 싶을 경우, 특정구간을 클릭 후 디자인의 Constraints에서 Fix position 박스를 체크해주면 된다.>

 

 

 

2. Radius

피그마는 특정 도형을 사용할 수 있다. 하지만 각진 네모보다는 디자인 적으로 둥근 네모를 더 자주 사용하게 되는데, 이때 각진 부분을 둥글 게 만들어 주기 위해 사용.  해당 부분을 클릭하여 숫자로 지정해주면 둥근 네모를 만들 수 있다. 

 

<+ 더 다양한 도형을 사용하기 위해서는 플러그인을 사용하여 다른 도형을 사용하는 것을 설치, 혹은 아이코니파이 플러그인을 이용하여 도형 아이콘을 사용하는 것이 편한 것 같다.>

 

 

 

3. Component

만든 것의 어떠한 부분이 특정 역할을 할 때, 혹은 어떠한 기능을 주고 싶고 그 기능으로 변하는 것이 있을 때. 능력을 부여해주는 역할을 한다. (탭 열고 닫기, 토글 만들기, 검색 기능 구현하기 등등 자신의 프레임 안에서 한 부분의 역할을 담당하는 친구에게 주면 기능을 부여하기 편하다.) 

 

<+  option+드래그 로 컴포넌트를 두고 인스턴스를 만들어 사용이 가능하다.  인스턴스를 만들어 사용할 경우 나중에 바꾸고 싶거나 추가 하고 싶을 때 메인의 컴포넌트만 바꾸면 자동으로 바뀌어 사용이 편리하다. 또한, 다양한 상태를 추가하기 위해 오른쪽 Property 를 이용하면 더 다양한 기능을 만들 수 있다. > 

 

 

4. Property

앞서 Component 에서 컴포넌트의 상태를 추가하기 위해 Property 를 사용. Varient를 선택하면 컴포넌트 아래로 + 버튼이 등장한다. 누르면 상태를 추가할 수 있다. 이 기능을 이용하여, 처음의 상태에서 버튼을 누르면 다음으로 넘기기. 스위치 이동하기(토글), 탭 버튼 만들어 연달아 보여주기 등등 많은 역할 을 할 수 있다.

 

<+ Varient를 누르고 상태를 추가하면 이름을 변경 할 수 있다. 이름은 그대로 부여된 이름을 사용해도 상관이 없지만, 그래도 상태에따라 Hover, Click, Tab1 등 맞는 이름을 붙여 사용하는 것이 편리하다.

 

+ Varient 안에 프레임을 넣어 다음 상태에서는 그 안에서 스크롤이 가능하도록 만들고 싶은경우, 잘 안된다면 프레임이 Varient 안에 있는 게 맞는지 확인이 필요하다,,,,ㅜㅜ>

 

5. Edit (기능 조회)

플러그인으로 설치한 기능을 확인할 수 있다. 아이콘을 누르고 검색 창에 내가 설치 한 플러그인을 검색하면 빠르게 원하는 플러그인 사용이 가능하다.

 

<+ Iconify, Unsplash, Wireframe 등등 자주 사용하는 기능을 설치해두고 사용하면 편리하다.>

커뮤니티 들어가기 > 설정에 피그마, 플러그인  > 설치할 수 있는 플러그인 등장!

Try it Out >> Run 을 누르면 그 다음 언제든 사용 가능!

 

 

6.Prototype

제일 많이 사용하는 부분인 것 같다. 컴포넌트, 상태, 다른 일반 버튼 등등 기능을 사용할 수 있게 한다.  클릭했을 시, 호버 되었을 시, 오랫동안 누르고 있을 시 각각 선택한 부분에 대해 액션을 취했을 때, 다른페이지로 넘어가기, 오버레이(작은 창 열기), 오버레이 닫기, 뒤로 돌아가기, 스크롤하기, 링크 열기 등등 기능을 부여해주는 역할을 한다.

 

<+ 잘 사용하기 위해 앞서 얘기한 컴포넌트와 상태를 잘 활용하는 것이 좋을 것 같다.>

7. Share

팀원과 공유하기 위한 버튼,  협업하기 위해 혹은 내가 만든 작업물을 다른 사람들에게 보여주기 위해 사용된다. 다른 팀원이 들어와 같이 참여가 가능하다.

 

초대하고 싶은 팀원의 메일을 적고, can edit 혹은 can view로 상대의 권한을 설정해 준 뒤, send invite로 초대장을 보낸다. 

후에 초대를 받고 들어온 팀원을 수락해주고 같이 진행하면 된다.

 

또한, 작업물을 공개하고 싶을 경우, Copy link 를 눌러 링크를 전달 할 수도 있다.

 

 

 

+ 오늘 나의 첫 피그마