목록figma (3)

아카이브

[UI][Figma] Variants - state 값에 따라 UI 전환하기

UI 프로토타이핑 과정에서는 특정 상호작용에 따라 수시로 UI의 디자인을 변경해야 할 일이 많습니다. 대표적인 예로 on/off 토글 버튼이나, 수준(여유-혼잡, 쉬움-어려움 등)을 나타내는 라벨 등이 있습니다. 이 경우 같은 frame에 해당 UI만 바꾼 뒤 navigate to로 구현할 수도 있지만, UI가 많아질 수록 생성해야 하는 frame의 수도 굉장히 많아지게 되어 관리가 어렵습니다. Variants는 이렇게 상태값에 따라 달라지는 UI 요소를 관리할 수 있는 Figma의 기능입니다.Variants 생성다음과 같이 ON/OFF 토글로 사용할 요소를 만들고 컴포넌트로 지정합니다. 해당 컴포넌트를 선택해 Main component > Add Variant 를 해줍니다. 혹은 화면 우측 상단 작업창..
UI 2025. 4. 11. 21:49
[UI][figma] Figma 실행이 안 될 때 WebGL 활성화해서 해결하기

웹 환경에서 figma 파일을 실행하려고 할 때 아래와 같은 문구가 나오는 경우에 대한 해결방법입니다.크롬을 기준으로 설명합니다.1. 크롬 설정 (chrome://settings/) 모양 > 페이지 확대/축소를 100%로 맞춥니다.시스템 > 가능한 경우 그래픽 가속 사용을 체크합니다.2. 플래그 설정 (chrome://flags/)Override software rendering list를 활성화 합니다.
UI 2024. 7. 17. 09:27
[UI][Figma] Figma 단축키 정리

동작단축키메뉴 보이기Ctrl + \안내선 보이기Shift + R선택V텍스트T원O사각형R프레임F여러 요소 선택Shift스포이드I그룹/프레임 내 요소 선택Ctrl전체 선택Ctrl + A그룹Ctrl + G그룹 해제Shift + Ctrl + G프레임으로 만들기Alt + Ctrl + G요소간 간격 확인Alt + 비교 요소 호버복제Alt중간 기준으로 크기 변형Alt + 크기비율 고정해서 크기 변형Shift + 크기캔버스 이동Space캔버스 줌인+캔버스 줌아웃-뒤로/앞으로 보내기Ctrl + [ or ]맨 뒤로/앞으로 보내기[ or ]위/아래로 정렬Alt + W or S왼쪽/오른쪽으로 정렬Alt + A or D수평 중앙 정렬Alt + H수직 중앙 정렬Alt + V복사Ctrl + C오려내기Ctrl + X붙여넣기Ctrl ..
UI 2024. 7. 13. 14:59
이전 Prev 1 Next 다음