Figma의 Frame, Guide생성?!

평소 개인적인 프로젝트를 진행할 때 항상 칠판에 화면을 그려 어플을 기획하고

그걸 토대로 화면을 구현했었습니다

그러던 중 멘토님께서 Figma를 소개시켜 주셨고

오늘부터 주말마다 강의를 통해 조금씩 배워보려고 합니다!!

 

오늘은 Frame 생성, Guide 생성에 대해 배웠습니다 

 

Frame이란?!
디자인적 작업을 할 틀이라고 생각하면 됩니다

 

Figma design 화면

 

지금은 제가 2개의 Frame을 생성해놓은 상태인데 바로 저걸 Frame이라고 부릅니다.

 

Frame 생성

저걸 생성하기 위해선

화면 좌측 상단에 위의 사진에 표시된 버튼을 클릭하고

 

Frame 선택

 

위의 카테고리들 중에 자신이 만들고 싶은 프레임의 규격을 

선택하면 됩니다!

 

 

 

이 때 자주 쓰이는 단축키가 있는데

1, [space bar] + 마우스 좌클릭 후 커서 옮기기 --> Frame의 위치를 이동시킬 수 있습니다

2, [Alt] + 마우스 좌클릭 후 커서 옮기기 -->기존 Frame과 같은 Frame을 복제할 수 있습니다!

 

 

 

 

 

Guide란?!
오브젝트를 섬세하게 작업할 수 있게 도와주는 안내선 입니다!
이 때 눈금자에서 드래그를 하여 사용합니다.

Guide를 사용하기 위해선 필수적으로 눈금자를 꺼내서 사용해야 합니다.

(눈금자 꺼내는 단축키 : [shift] + R )

 

1, 눈금자를 꺼내보자!

눈금자 생성

 

위의 사진처럼 눈금자 꺼내는 단축키인 [shift] + R 을 누르면 좌측과 상단에 빨갛게 동그라미를 쳐 둔 눈금자가 생성됩니다!

 

이후 눈금자에서 마우스 좌클릭을 한 상태로 커서를 옮기면 Guide가 생성됩니다.

위에 보이는 선들이 Guide이다.

 

이 부분은 아직 어떻게 사용해야 하는지를 배우지 못했지만 뭔가 균형을 맞춰주거나 Guide를 기반으로 margin을 파악하기 위해 사용하지 않을까..? 라는 추측이 들었습니다,,ㅎ(단지 추측,,)

 

이후 만약 Guide를 제거 하고 싶다면

Guide를 한 번 클릭하면 Guide가 이렇게 바뀝니다

Guide가 파란색으로 변경됨

 

이 상태에서 키보드에서 delete를 눌러주시면 잘 삭제가 됩니다!

 

 

느낀점:

지금까지 여러 개의 개인 프로젝트를 만들어보면서 항상 칠판에다 화면을 기획하다보니

매번 프로젝트가 끝이나면 지워야하고 또 수정사항이 생길 경우 다 지우고 다시 그려야 하는 경우도 생기고

칠판이 크기가 제한적이다 보니 각 화면에 대한 코멘트도 달 수가 없어 매우 불편했는데

멘토님 덕분에 Figma를 알게 되어서 아직은 많이 부족하지만 주말마다 공부를 하여

다음 프로젝트를 만들어 볼 때는 Figma를 통해 기획하고 진행해보려고 합니다!