
오토 레이아웃 사용하기 오토 레이아웃 기능은 Figma에서 디자인 요소들을 유연하게 정렬하고 조정하는 데 도움을 줍니다. 기본적인 단계들은 다음과 같습니다: 요소 선택: 먼저 오토 레이아웃을 적용하고 싶은 요소(프레임, 그룹, 컴포넌트 등)를 선택합니다. 오토 레이아웃 적용: 선택한 요소에 우클릭을 하거나 상단 메뉴에서 '오토 레이아웃 추가'를 선택합니다. 이를 통해 요소에 오토 레이아웃이 적용됩니다. 정렬 및 간격 조정: 오토 레이아웃이 적용된 요소는 속성 패널에서 정렬과 간격을 조정할 수 있습니다. 수직 또는 수평 정렬을 선택하고, 요소 간 간격을 설정할 수 있습니다. 사이즈 조정: 요소의 크기를 조정하여 내용에 맞게 자동으로 크기가 조절되도록 설정할 수 있습니다. 예를 들어, 텍스트가 추가되면 자동..

1.컴포넌트를 위한 페이지를 생성하여 한 곳에서 만들자. 2. 디폴트 버튼 디자인 프레임 150 * 80 생성 Text 작성 autolayout으로 정렬 컨텍츄얼 메뉴에서 컴포넌트 생성 (ctrl + alt + K)- 컴퓨넌트 이름은 btn/round 로 지어서 디렉토리를 생성하 우측 properties 에서 베리언츠생성 하단 + 버튼 클릭하여 버튼 추가 속성이름을 변경하고 각각의 베리언츠 value를 off/on으로 변경 각각 버튼 디자인을 변경 - 일반적으로 디폴트는 채우지 않은 디자인 - 효과를 주어서 구분을 지어보자. 프로토타입 모드로 변경 하자. btn_off 선택 > + 파포인트로 아래 on 버튼을 연결 - 트리거(이벤트)는 while hover (마우스가 오버 되는 동안) 변경 - 인터랙션은..

style 색상 텍스트 이펙트 레이아웃 그리드 피그마 파일을 열고 아무 레이어도 선택하지 않았을 때 위 그림처럼 패널에서 현재 저장된 스타일을 볼 수 있음 스타일을 만들어 보자 컬러 피크에서 컬러 선택 사각점 클릭 > 스타일 색상 선택 + : 스타일 추가 스타일 해제(아래) 컬러 오른쪽 마우스 > add new folder > 그룹화 할 수 있음 > 드래그 해서 이동 가능 라이브러리로 발행 책모양 아이콘 , Alt + 3 publish 버튼 클릭 > - 현재 파일 - 다른 파일에서 생성된 스타일 - 팀프로젝트 생성된 스타일 스타일을 저장하고 라이브러리로 발행해 보자.

프레임과 패널 - 다양한 디바이스의 사이즈를 제공하고 있다. frame 옵션 - 프레임 가로세로 변경, 프레임에 맞게 사이즈 맞춤가능 - x, y 위치 조절 - W, H 사이즈 조절 - 비율교정 - 모서리 라운드 - clip content: 레이어가 프레임에 걸처졌을 때 콘텐츠가 프레임에 맞게 잘려 보임 - 채우기 채우기 : 면, 선 색을 지정 - 컬러칩 컬러스타일 : 스타일을 지정 불러 올 수 있음 effect inner shadow Drop shadow lyer blur background blur text 텍스트 옵션 변경 : 채우기, 선 컬러 정렬 크리 폰트 설정 굵기 설정 문단간격와 텍스트박스 영역 행간과 자간 가변폰트 사용 벡터 : 점, 선, 면 등 기하학적 함수로 그려지는 도형 들 선 : 선..

기본은 ctrl + / 찾아보자 1. File & Properties Ctrl+Shift+E 출력(저장) Export Ctrl+Alt+S 히스토리 저장 Save to Version History Ctrl+Shift+K 이미지 삽입 Place Image 2. Edit Ctrl+C 복사 Copy Ctrl+X 잘라내기 Cut Ctrl+V 붙여넣기 Paste Ctrl+Shift+V 선택 위에 붙여넣기 Paste Over Selection Alt+drag 중심점 중심으로 사이즈 조절 Resize from Center Alt+drag 선택 복사 Duplicate Selection Ctrl+Alt+C 속성 복사 Copy Properties Ctrl+Alt+V 속성 붙여넣기 Paste Properties 3. Sele..

피그마 미러 앱 - 디자인한 화면이나 프로토타입을 바로 모바일에서 확인 할 수 있는 서비스 새파일 Ctrl + N - 초보자라면 커뮤니티에 있는 파일을 이용하는 것도 권장 import - 이미지 파일 임포트가 가능 fig Jam 가 공유도 가능\ 파일 캠버스 : 작업을 위한 빈영역 메뉴 Ctrl +/ 빠른 찾기 hand : 손모양 아이콘으로 캔버스를 잡고 원하는 위치로 이동 Comment : 단축키는 ㅡㅊ ; 제플린의 노트 기능처럼 원하는 위치에 댓글을 달 수 있는 기능 어도비의 구조는 흡사하다. 왼쪽 메뉴 ; 오른쪽 레이어 제어, 상태값 정보 즉 왼쪽은 레이어 제어, 오른쪽은 해당 레이어의ㅣ 디자인 요소 수정 역할 - 디자인 패널 - 프로토타입 패ㅓㄹㅇ - 인스펙트 패널 : 개발자를 위한 코드를 지원 ..
- Total
- Today
- Yesterday