728x90 반응형 SMALL 컴포넌트2 '오토레이아웃'을 활용하여 팝업 만들어보기(2탄) 팝업을 완성해볼게요!1탄: 타이틀과 메시지 영역 추가2탄: 버튼 추가 및 팝업 완성(+컴포넌트 활용까지)오토레이아웃으로 아래 팝업을 피그마로 만들 수 있나요?추가 기능: 팝업 내 텍스트 내용이 길어지거나, 짧아지더라도 [취소], [확인] 버튼은 내용 길이에 따라 자동으로 간격 조정됨 오늘은 완성해봐요! 버튼 만들기1. 텍스트 ‘취소', ‘확인' 타이핑하여 만들기(단축키: T)2. 추가한 텍스트에 각각 오토레이아웃 추가(단축키: Shift + A)3. 오토레이아웃 각각 색상, corner radius, 크기, 테두리 설정(설정하고 싶은 색상으로 선택하세요.)4. 2개의 오토레이아웃을 모두 선택한 후 오토레이아웃 추가5. 버튼 위치를 좌, 우로 변경하기 위해, 전체 오토레이아웃 선택 후 우측패널 내 .. 2024. 11. 8. 컴포넌트(component), 인스턴스(instance) 1. 정의 컴포넌트 사용자와 상호작용하는 기본적인 형태로 어느 공간에서도 기능을 수행할 수 있는 최소한의 단위 Figma에서는 작은 다이아몬드 4개로 표현되어 있음(아래 이미지 참고) 인스턴스 컴포넌트를 복제한 오브젝트 컴포넌트를 수정하면 일괄 수정 개별 수정할 수 있으며 컴포넌트로 덮어씌울 수 있음 Figma에서는 빈 다이아몬드 1개로 표현되어 있음(아래 이미지 참고) 2. 컴포넌트와 인스턴스의 관계 부모와 자식 관계라고 보는 게 이해하기 쉬움 도형 또는 텍스트를 생성 → 컴포넌트(부모)를 생성 → 컴포넌트를 복제하여 인스턴스(자식)를 생성하여 사용 컴포넌트가 변경되면 관련된 인스턴스는 모두 동일하게 변경됨(하단 동영상 참고) 생성된 인스턴스의 상태를 변경(텍스트 변경, 크기 변경 등)하였다면 변경된 .. 2023. 7. 25. 이전 1 다음 728x90 반응형 LIST
