[Figma] 와이어프레임 상세페이지(+auto layout 응용)

- Pages 추가방법 : Pages의 +버튼을 누르면됩니다.

- 복사한것 새로운 프레임에 옮길때 먼저 그룹화한뒤에 옮길때도 있습니다. (필요영역 드래그로 전체 감싼후 ctrl+g)

- stroke는 그림그린후 테두리 검은색으로 만들때도 사용

- 도형2개 사이 가운데 두껍게 2줄로 생겼을때 1줄로 하는법 : 도형 하나 클릭후 마우스 클릭하기(다시 공부)

- 드래그할때 ctrl+ 드래그하면 선택한부분에 대해서만 가져오게 됩니다

- ex) 수강하기(네모버튼)을 만들려고할때 방법2가지가 있습니다.

1. 직접 사각형 그리기

2. text 생성후 글씨작성후 group화 만든후 auto layout 볼수있음(일반적인 atuo layout 사용법)

ex) 18강 ' 3시간에서 ' 아이콘같은것은 글자로 써도되는데 이모티콘으로도 넣어서 만들수있다.

- ctrl + b => bold 적용/해제 

- Frame 2365 이런식으로 글자가 보이면 먼가 잘못됬다고 생각하면된다.(즉, 원본 프레임안에서 벋어난상태) 

따라서, 원본프레임안에 글자가보인 프레임들을 이동시켜서 포함시켜주면 됩니다(왼쪽창에서)

- 선의 두께도 조절가능하다 

-

이와같이 글자 포토샵이 있다고 가정했을때 글자가 길어져도 오른쪽 X 표시가 움직이지 않게 설정가능하다

방법 : 포토샵쪽 글씨칸에서 글씨가 길어져도 상관없을만큼 ㅁ 직사각형을 늘려주고 

포토샵과 + X를 같이선택후 autolayout 후 여기서 그룹화(ctrl+g) 후 한번더 autolayout을 해주면됩니다.

 

- 전체 드래그후 여기선 - 를 눌러서 서로 간격을 떨어지게도 할수있습니다.

-

이와같이 원과 밑에 글씨가 있는것들의 서로 간격을 일정간격으로 떨어트리고 싶으면

먼저 (원+글씨) 이렇게 사진에 묶인부분씩 각각 그룹화 한뒤(여기선 총4개로 각각 그룹생성) 전체 드래그후 설정해주면된다.(위의사진 예시와 똑같다)