[피그마 공부] 메타코드 강의별 스터디 후기 (실습-기본적인 도구 사용해보기)

 

이번 피그마 강의에서는 드디어 설명한 것을 기반으로

무언가를 만들어보고자 한다.

먼저 홈에서 디자인 파일을 생성해서 원하는 디바이스의 프레임을 만들어주었다.

섹션도 설정해서 구분을 해주면 하나의 작업을 할 공간이 마련된다.

 

 

 

 

직사각형을 만들어 놓고 그에대한 크기를 조절할 때

W, H 옆에 있는 체인모양을 통해 한쪽 길이만 조절 할 수도 있다.

직사각형을 만들고싶으면 체인조절을 통해 W만 조절해서 옆으로만 늘릴수도 있고정사각형의 크기를 조절하고싶으면 체인으로 묶어서 양쪽이 같이 움직이도록 설정할 수 있다.

 

 

 

실습강의에서 사각형 모양에 대해 모서리의 둥근 정도를 조절하고색을 채우고(Fill) 테두리 까지 만들어진 모습을 확인할 수 있다.(Stroke)배웠던 것을 훑어봐주니 확실히 어떻게 디자인 할 때 써야할지명확하게 확인할 수 있었다.

 

 

펜으로 선도 그려주어서 체크 디자인을 만들었다.이렇게 하나의 모양을 다 만들었으면왼쪽 상단의 done을 클릭해주거나 ESC버튼을 통해 완료해주면 된다고 한다.ESC버튼은 나가기 기능으로만 주로 썼는데 끝맺음으로도 쓸 수 있군.헷갈리지 말아야겠다.

 

 

이렇게 디테일하게 안에 펜으로 그린 체크 디자인의

색과 모양도 상세하게 조절할 수 있다.

커서를 가져다 댈 때 마다 바뀐모습도 바로바로 보여주는데

이런 사소한 부분도 즉시비교가 가능하다는점에서

매우 마음에 든다.

 

 

펜으로 그렸던 체크의 선을 없애고 하나의 면으로 처리하고싶으면

Outline stroke를 눌러주면 된다.

그러면 왼쪽에 Vector 1 옆에 (Stroke)가 생기면서하나의 면으로 인식이 된다.이런식으로 하나의 UI를 만들 수 있는것이다.

 

 

실습으로 배운것들을 응용하여 UI를 만들어보는 과정을 함께하면서 느낀점은하나하나 짚어가며 배울 때에는 나름 오래 걸렸던 것들이막상 실전으로 하면은 순식간에 이루어 진다는 것이었다.아직 익숙하지 않은 나는 처음에는 오래걸리겠지만 얼른 익숙해져서많은 디자인을 빠르게 만들어내고 싶다는 열정이 타올랐다.그때가 올때까지 연습도 게을리 하면 안될 것 같다.

 

: https://mcode.co.kr/

메타코드M

본 내용은 메타코드 Figma 서포터즈 강의 후원을 받아 작성되었습니다.