비밀일기

실습   이미지를 가져와준다.상단 버튼을 클릭하고 file > palce image... 를 클릭한다.   이미지를 가져와줬다. tip) 대각선 방향 크기를 조절할 때 shift키를 누르면서 하면 일정 비율을 유지하며 크기를 줄일 수 있다.  이미지와 동일하게 디자인을 해보겠다.  상단바 & 하단바 먼저 상단바와 하단바는 프레임을 이용하여 생성해준다.  constraint 속성으로 상단바는 상단에 하단바는 하단에 고정시킨다.   하단바 위에 얕은 실선이 존재한다. 이를 구현하기 위해 stroke속성에서 굵기를 설정하고 스포이드로 색상을 가져온다.  글자는 텍스트박스를 이용해 입력한다.아래 화살표나 옆 요소들은 피그마에서 제공하는 플러그인을 이용하면 된다.    플러그인 >  사용할 아이콘이 들어있는 ma..

반응형 웹 디자인프레임으로 말풍선을 먼저 생성해준다. 프레임 stroke 속성에서 상하좌우의 굵기를 각 각 다르게 커스텀 할 수 있다. 아래와 오른쪽에 굵기를 주고 곡률을 설정하였다.텍스트도 삽입해주고,, 이 말풍선을 컴포넌트화 해주려한다. 레이어에서 해당 프레임을 우클릭하고 create component를 눌러준다.아니면 컨트롤+ 알트+ k 생성한 컴포넌트는 왼쪽 assets 탭에서 확인 할 수 있다. 컴포넌트를 만들고 나면 재사용이 용이해진다.  레이어에서 확인할 때 컴포넌트 요소의 문양이 다른것을 확인할 수 있는데,원본 컴포넌트는 채워진 문양이고 복제 컴포넌트는 비워진 문양으로 나온다.    이제 바깥쪽 제일 큰 프레임을 반응형으로 만들어보겠다.  레이어에서 우클릭 후 add auto layout ..

오른쪽 사이드바에 대해서 알아보겠다.  사이드바에는 요소의 속성이 표시된다.  요소의 좌표 값, 회전 값을 설정할 수 있다.  모서리 둥글게도 설정 가능하다.  요소 더블 클릭으로 요소 안 이미지도 조정 가능하다. 이미지 아래 배너를 넣겠다. 이때 도형 대신 프레임을 사용하는데, 도형보다 프레임의 사용을 권장한다. 비교를 위해 프레임도 만들고 도형도 만들어보자. 왼쪽 사이드바에는 추가된 요소들의 리스트가 표시된다.  프레임의 경우 텍스트박스가 프레임 하위에 담겨있지만 도형의 경우 같은 계층의 요소로 판단된다. 따라서 요소가 많아질 경우 도형의 사용보다는 프레임을 사용하는 것이 편리하다.  이미 도형으로 생성한 경우, 묶을 요소들을 드레그하고 그룹핑하는 방법도 있다.  프레임의 constraints 속성으..

편집창의 화면                                                도구창에는 선택, 프레임, 도형, 펜, 텍스트, 엑션 메뉴가 있다.                 선택 도구로 요소의 위치, 크기 조절 가능  프레임 도구로 프레임 생성                         도형 도구에서는 여러가지 도형을 그릴 수 있다.                      생성한 도형을 더블클릭하면 도형을 편집할 수 있다. 변의 중점도 편집 가능하기 때문에 다른 도형으로 변형도 가능하다.  도형에 이미지 삽입도 가능하다.  오 펜을 이용해 직선, 곡선을 그릴 수 있다. ㅋㅋㅋㅋ 마지막 엑션 메뉴를 선택하면컴포넌트, 플러그인 등 요소를 검색할 수 있다.

피그마 로그인 후 teams 에서 create new로 팀을 생성한다. 팀 이름 입력  다음 화면에서 이메일을 입력해 팀원을 초대할 수 있다. 일단 없으니까 스킵한다.  팀 플랜을 고르는데 스타터만 무료기 때문에 스타터로 해준다.. 팀 생성 완료 후 프로젝트에서 디자인 파일을 만들면 된다. 디자인 공간이 나온다