Front-end/Figma3 Figma 심화 기능 모든 화면에서 공통적으로 사용하는 것은 컴포넌트화 해서 사용하면 일괄수정이 가능합니다. 우선 캔버스에 프레임을 생성하고 요소 두 개를 추가했습니다. 프레임을 클릭한 후 우측 버튼을 누르면 저렇게 창이 뜨는데, Create component를 클릭하면 해당 프레임이 컴포넌트가 됩니다.(하나의 요소를 컴포넌트화 하는 것도 가능) 위에서 만든 컴포넌트를 복제한 모습입니다. 왼쪽의 창에서 속이 빈 마름모모양이 복제된 요소입니다. 복제된 요소를 변경하면 컴포넌트가 변화하지 않지만 컴포넌트를 변경하면 복제된 요소가 변경됩니다. 컴포넌트는 assests에서 확인할 수 있습니다. 두개의 요소가 반복될 때 두 요소 간의 간격을 정해주는 기능입니다. shift키를 이용해서 요소를 두개 다 선택해 주고, 우측에 Auto L.. 2023. 6. 28. Figma 기본 기능 위에 보이는 전체 화면을 Canvas라고 한다 Frame : 도형과 텍스트로 채울 화면 도형/ 텍스트 : 앱서비스 화면 구성하는 요소 우측에 바에 Frame을 클릭하면 화면의 크기를 자동으로 조정해준다(아이폰, 맥북 등등의 크기로) 360*643사이즈로 만들면 여러 사이즈에도 대응할 수 있는 디자인이 가능하다 도형은 방향키를 이용해서 위치 조정 가능 복제(ctrl c + v) 많이 사용하기 텍스트를 복제하면 그룹내에서 복제되기 때문에 ctrl-x ->ctrl-v를 하면 독립된다. window + . 하면 아이콘 나온다 icons8.com에서 아이콘 무료로 다운(recolor을 통해 색 미리 맞춰주기) Frame영역에서 마우스를 더블 클릭해서 화면명을 입력하면 된다. 단일페이지가 아니라 여러 페이지를 기획.. 2023. 6. 28. Figma 기본 구성 둘러보기 figma란? 웹/앱 서비스를 위한 아이데이션, 와이어프레임, 프로토타입, 목업 기획부터 디자인까지 가능한 올인원 툴 ux/ui 전문 툴이다. 1. 기본화면 확인하기 -툴바 화살표 아이콘부터 1번이라고 할 때 1. Move 기본 상태 툴로 요소 선택 이동 시 사용 ex) 창 옮기기 등등 2. Frame 프레임 생성 3. 도형툴(사각형이 기본 형태) 4. 펜툴로 직접 드로잉 5. Text : 글자삽입 6. Hand Tool : 편집하지 않고, 캔버스를 드래그하여 둘러보기 왼쪽부터 7번 7. Multiplayer : 이 파일에 접속한 유저들의 프로필 표출 8. Share : 이메일을 입력하거나 URL공유, edit권한 부여, 초대 9. 캔버스 내 요소에 개별 코멘트 등록 10. Present : 프레젠테이션.. 2023. 6. 28. 이전 1 다음
