2024. 3. 12. 00:57ㆍFigma
이번 수업에선 Frame위에 도형 그리는 것을 배웠습니다!
사각형과 모서리 둥근 사각형, 원형을 배웠으며
여러 신기한 단축키들도 배울 수 있었습니다!
사각형!
1, Frame을 먼저 만들어 줍니다!
2, 왼쪽 툴바에 빨간 색으로 밑줄 그어놓은 부분을 클릭하고 Frame 내부에다가 드래그를 하여
사각형 도형을 만들어 줍니다!
※이때
shift 키를 누른 상태로 Frame안에 드래그를 하게 되면 정비율(정사각형)의 사각형이 만들어지게 됩니다!
3, 디자인 패널에는 가장 상단 부분에 도형의 크기를 조절하는 부분이 있습니다
디자인 패널의 Fill부분에선 도형의 색을 지정할 수 있으며 옆에 눈동자(?) 처럼 생긴 버튼을 클릭하면
색이 사라지고 하얀 바탕이 뜨게 됩니다!
↓예시↓
디자인 패널의 stroke는 도형의 테두리를 만들어 주는 역할을 합니다!!
1번의 역할은 테두리를 도형의 내부에 만들지 외부에 만들지 선택할 수 있게 해줍니다!
2번의 역할은 만들어진 테두리의 굵기를 선택할 수 있게 해줍니다!
마지막으로 3번은 테두리를 도형의 윗부분에만 둘 것인지 또는 도형에 다른 부분에만
줄 것인지 선택할 수 있게 해줍니다!
★여기서 새롭게 배우게된 특수문자!★
도형을 만든 뒤 Alt + 드래그를 하면 도형 모양 그대로 복제가 되고
이후 Ctrl + D를 누르면 방금 복제한 작업을 똑같이 해줍니다!
모서리 둥근 사각형!
위의 사각형을 만들 때와 마찬가지로
Frame을 만들어주고
드래그를 해서 사각형 도형을 만들어줍니다
만들어진 사각형 도형에 Radius를 줍니다!
위 사진에 빨간줄을 그려놓은 부분을 통해 Radius를 줄 수 있으며
옆에 아이콘을 통해 부분 Radius를 줄 수도 있습니다!
원형!
다른 도형들과 마찬가지로 Frame 생성을 먼저 해줍니다!
위에 빨갛게 표시해둔 아이콘을 클릭하여
ellipse를 선택해주면 원형을 그릴 수 있게 바꿔줍니다!
이후 Frame안에 드래그를 하면 원형 도형이 만들어지고
사각형과 마찬가지고 shift를 누른 상태로 드래그를 하면 정비율의 원형이 만들어집니다!
느낀점!
오늘까지 약 2번의 수업을 들어보았는데 뭔가 지금까지 배운 내용으로도
화면 기획을 해볼 수 있을 거 같아서 다음주에는 전에 했던 프로젝트를 기반으로
화면을 그려보려고 합니다!
또한 처음에는 단축키들이 많아서 내가 다 외울 수 있을까? 했었는데
코딩과 마찬가지고 계속해서 사용하다보니 머리보다 손으로 기억하는 느낌을 받고 있습니다
앞으로도 꾸준히 해서 앱스쿨 최종 프로젝트 때는
Figma를 사용하여 프로젝트를 진행해보고 싶습니다!!
'Figma' 카테고리의 다른 글
| Figma 스타일 등록하기 (0) | 2024.03.24 |
|---|---|
| Figma 텍스트 툴 (0) | 2024.03.18 |
| Figma 다각형 도형과 별을 그려보자! (2) | 2024.03.17 |
| Figma를 활용하여 화면을 구현해보자! (0) | 2024.03.16 |
| Figma의 Frame, Guide생성?! (3) | 2024.03.10 |