피그마 (5) 썸네일형 리스트형 피그마-아이콘2/ 컴포넌트 플러그인에서 필요에 따른 것들을 다운 받을 수 있다. 플러그인에서 아이콘을 다운 받은 후, 스트록 형태로 되어있기때문에 선을 면으로 만들어놓고 써야 한다. 백터들 같이 잡아서 위에 union selection 하거나 우클릭 - outline stroke 클릭해서 면으로 만들어준다. 각각 컴포넌트로 저장해준다.컴포넌트 해주고 싶은 것들을 한꺼번에 잡아서 create multiple components 를 해주면 각각 컴포넌트로 한번에 바꿔줄 수 있다. 컴포넌트화하고 이름 바꿀 때 첫글자는 대문자로 적어주고(규칙이다) / 를 사용해서 폴더화 시켜준다. Assets에서 확인할 수 있다. 아이콘은 배리언츠(아이콘에 대한 옵션들을 하나의 컴포넌트로 등록해놓은 것/ 옵션을 설정해놓은 것)를 사용하지 않고 각각의.. 피그마- 컴포넌트 컴포넌트: 반복적으로 사용되는 요소를 재사용하기 위해 사용하는 기능 피그마에서 컴포넌트는 디자인 전체에서 재사용 할 수 있는 요소로 정의된다. 작은 요소인 버튼이나 아이콘부터 레이아웃 전체에 이르기까지 다양한 범위에서 사용할 수 있다.핵심은 컴포넌트의 '재사용성'에 있고, 반복해서 사용되는 요소들은 컴포넌트로 만들어 관리하면 효율적이고,모든 요소를 한번에 편집할 수 있어 유지보수가 쉽다. : 가장 먼저 생성한 컴포넌트를 메인 컴포넌트.메인 컴포넌트로부터 복사된 컴포넌트인 '인스턴스 컴포넌트'의 기본 속성을 정의하는 역할을 한다. 디자인에 직접 사용되지 않고 별도의 페이지에서 관리하는 것이 일반적이다. 그 이유는 메인 컴포넌트를 디자인에 직접 사용하게 될 경우, 메인 컴포넌트와 인스턴스 컴포넌트를 헷갈려 .. 피그마 - 오토레이아웃, 다양한 정렬 오토레이아웃 : 반응성과 유연성이 뛰어난 동적 레이아웃을 만들 수 있는 기능기본으로 프레임 속성이 포함되어 있으며, 프레임 내부 구성 요소들의 배열 방향, 간격, 패딩, 정렬 등 다양한 옵션을 설정할 수 있다. 이를 통해 내부 컨텐츠의 크기에 따라 프레임 크기가 자동으로 조절되거나반대로 프레임 크기에 따라 컨텐츠의 크기를 자동으로 조정할 수 있다. - 단축키 (3가지 방법이 있다) ▪ 오브젝트를 선택한 상태에서 shift + A ▪ 프레임을 선택한 상태에서 auto layout 패털의 + 아이콘으로 설정하기 ▪ 프레임이나 오브젝트를 선택한 상태에서 마우스 우클릭 - add auto layout 오토레이아웃 해지하기 : shift + alt +a *작은 요소부터 오토레이아웃을 하면서 큰 것까지 만.. 피그마 실습 - 아이콘,버튼,텍스트필드 만들기 * 피그마는 오브젝트를 구분 짓는데 레이어에 이름을 활용한다특히 컴포넌트 단위에서 레이어 이름에 (/)가 들어가면 으로 각 요소를 단계별로 그룹화해서 관리할 수 있다. 1. 도형으로 아이콘 형태를 얼추 만들어준다.2. shift + X 으로 도형을 선으로 바꿔준다.3. 선을 center로 바꾸고 두께와 테두리 라운드를 준다. 4. 마우스 우클릭 outline stroke 을 통해 패스를 면으로 바꿔준다. 5. constraints을 scale로 바꿔준다. constraints를 둘 다 scale로 바꿔줘야만, 화면이 커지고 줄어들때 같이 커지고 줄어든다. icon 전용 여백 레이아웃 가이드을 저장해놓고 쓰면 편하다 + 별 먼저 그린 후 - 별 한번 클릭 - 오른쪽 패널에서 꼭짓점 수랑 각도 설.. 피그마 Figma 기초 왼쪽아래 버튼에서 여러가지 샘플이나 일러스트,아이콘 파일등 다운 가능하다 프로필 클릭해서 앱 다운 가능 - 앱깔면 와이파이 없이 연동된다 **Quick actions : 기능검색/ 플러그인 검색 ctrl+/(슬래쉬) -*frame : 디자인 요소를 담는 컨테이너프레임끼리 서로 중첩가능 -section: 프레임을 모아놓는, 프레임의 상위 그룹 / 프레임을 그룹할 때 쓴다. -slice: 이미지를 따로 내보낼 때 사용 1. create component :선택한 오브젝트를 1개의 컴포넌트로 만든다. 2. create multiple component :클릭한 컴포넌트를 각각 만듦3. create component set: 각각 컴포넌트로 만든 다음에 하나.. 이전 1 다음
