💡Auto layout Figma에서는 Auto layout 기능을 통해 반응형 UI 디자인을 할 수 있다. Auto layout은 화면 크기가 바뀔 때 바뀌는 화면마다 UI 레이아웃을 조정할 필요가 없도록 자동 조정 옵션을 설정하도록 고안된 기능이다. 따라서 Auto layout 기능을 이용하면 UI/UX 디자인의 영역에서 다양한 화면 크기 및 콘텐츠 변경에 레이아웃이 대응하면서 디자인을 할 수 있다. 콘텍스트 메뉴에서 Auto layout을 선택하거나 Shift + A 단축키를 입력하여 사용할 수 있다. 오토 레이아웃으로 설정하는 옵션 1. 개체 크기 적용할 개체를 선택하고 크기를 조정하면 Auto layout은 동적으로 개체의 크기를 조절하여 내부 콘텐츠에 자동으로 대응한다. 2. 정렬 및 방향 가..
💡Prototype Figma의 프로토타이핑 메뉴는 디자인을 화면상에서 실제 동작하는 프로토타입으로 변환하는 기능을 제공한다. 이를 통해 사용자 상호작용을 미리 시뮬레이션하고, 피드백을 할 수 있다. Device 항목 설정 시 주의사항 프로토타입을 진행할 때 Device 항목을 선택하지 않으면 기본적으로 PC 기준으로 설정된다. 따라서 모바일 환경에서의 사용을 고려한다면, 프로토타입 시작 전에 디바이스를 선택하는 것이 좋다. 💡Prototype 기능 설명 Interaction details Option 터치 후 발생하는 이동 및 애니메이션 효과를 설정할 때 사용되는 기능이다. 사용자와의 상호작용에 따라 화면 전환 및 효과를 정의하여 프로토타입을 더욱 동적으로 만들 수 있다. None: 어떤 액션도 선택하..
🔎Figma 커뮤니티 플러그인과 위젯을 사용하면 Figma에서의 작업을 효율적으로 할 수 있으며, 다양한 도움을 받을 수 있다. Figma Explore, install, use, and remix thousands of templates, plugins, and widgets published to the Figma Community by designers and developers. www.figma.com 💡Annotation Sticky Note https://www.figma.com/community/widget/1125842729650935566 Annotation Sticky Notes | Figma Community This widget is one of the sticky note wid..
Figma의 디자인 파일은 툴바, 사이드바, 스크롤이 가능한 캔버스로 구성되어 있다. 이 중에서 좌측 사이드바는 레이어와 페이지에 접근할 수 있게 해 준다. Pages, Layers, Assets 세 가지 헤딩은 좌측 사이드바에서 확인할 수 있다. 각 패널 간에 전환하면서 사용하면 된다. Ctrl + Shift + \ 단축키를 누르면 좌측 사이드 바 토글을 할 수 있으며, Alt + 1 단축키와 Alt + 2 단축키를 누르면 Layer와 Asset 패널을 이동하는 게 가능하다. Figma의 모든 UI를 끄려면 Ctrl + \ 단축키를 입력하면 된다. 💡페이지 (Pages) 각 페이지는 자체 캔버스를 가지며 디자인을 탐색하고 수정할 수 있으며, 각 페이지에서 개별 프로토타입을 만들 수도 있다. 페이지는 좌..
💡Design Mode 메인 메뉴 Figma 작업 화면에서 좌측 상단 Figma 로고 아래로 화살표를 클릭하면 메인 메뉴가 Drop Down 된다. Quick actions 메뉴는 작업하고 있는 파일 안에 들어 있는 기능을 찾아주는 검색 기능이다. Dev Mode 메인 메뉴 Dev Mode로 전환한 뒤의 메인 메뉴는 Design Mode와 상이하므로 참고한다. 파일 불러오기 메인 메뉴에서 Ctrl + Shift + K 단축키를 이용하여 Place image/video를 빠르게 할 수 있다. 파일을 선택하면 마우스 커서 옆에 썸네일이 보이면서 화면 어디에 이미지를 위치할 것인지 보여준다. 이미지를 삽입할 위치를 정하고 나면 Figma 파일 안에 이미지가 들어가게 되며, 좌측의 레이어 패널에서도 이미지 레이..
💡Design Mode 디자인 모드는 화면을 디자인하기에 최적화된 모드로, 다양한 UI 요소를 설계하고 비주얼 속성을 정의하는 데 특화되어 있다. 컬러 값, 크기, 위치 등의 속성을 조정하여 레이아웃 디자인을 변경할 수 있으며, 추가적인 작업을 통해 고도화된 디자인을 만들 수 있다. 💡Dev Mode 개발 모드는 디자인된 화면의 코드를 확인하는 데 특화되어 있다. Dev Mode를 통해 개발자들이 디자인을 확인하고 버튼의 위치, 글꼴 크기 등을 쉽게 확인할 수 있도록 지원하고 있다. Shift + D 단축키로 간편하게 Design Mode와 Dev Mode를 전환할 수 있다. Dev Mode 시작하기 오른쪽 상단의 'Dev Mode' 버튼을 클릭한다. 그러면 Welcome to Deve Mode라는 글과..
[Figma] 개발자 환경 구축: Figma 계정 생성 및 프로그램 설치 💡Figma 환경 구축 https://www.figma.com/ Figma: The Collaborative Interface Design Tool Figma is the leading collaborative design tool for building meaningful products. Seamlessly design, prototype, develop, and collect feedback in a single platform. isaac-christian.tistory.com Figma를 설치하기 전이라면 위 글을 참고하여 계정을 생성하고, Figma를 설치하도록 한다. 💡페이지 알아보기 프로젝트 팀 권한 Owner (Ad..
💡Figma 환경 구축 https://www.figma.com/ Figma: The Collaborative Interface Design Tool Figma is the leading collaborative design tool for building meaningful products. Seamlessly design, prototype, develop, and collect feedback in a single platform. www.figma.com Figma 홈페이지에서 최신 업데이트 내용과 인사이트를 확인할 수 있다. Figma 계정 생성 계정 생성을 위해 Get started for free 버튼을 클릭하여 가입 화면으로 넘어간다. 팝업창에서 구글 이메일로도 등록이 가능하며, 업무용으로 ..
