피퀴즈? 정답 해설지
질문사항
나의 피그마 점수는 몇점일까요? 피퀴즈 한번 풀어봅시다!
답변
Q1. 피그마 오토 레이아웃은 프레임을 줄이는 것에 따라 줄바꿈 처리를 할 수 있다. (O/X)
Answer 1 : 정답은 ‘O’ 입니다. 오토레이아웃의 방향을 ‘wrap’으로 설정하면 프레임 넓이에 대응해서 줄바꿈 처리가 가능합니다. wrap 설정은 아래 이미지를 참고해주세요.
Q2. 피그마 오토 레이아웃 리사이징에서 부모 프레임의 크기에 따라 자식 프레임이 늘어나는 것을 허그 콘텐츠라 한다.을 줄이는 것에 따라 줄바꿈 처리를 할 수 있다. (O/X)
Answer 2 : 정답은 ‘X’ 입니다. 부모프레임에 따라 자식요소가 함께 커지는 것은 ‘Fill contents’의 설명입니다.
Q3. 스타일은 한번 등록 & 적용하면 수정할 수 없다(O/X)
Answer 3 : 정답은 ‘X’ 입니다. 등록한 스타일은 언제든 수정이 가능하고 수정함에 따라 적용된 스타일도 일괄 변경되니 자주쓰는 컬러, 폰트 등은 스타일화 해둔다면 편리하겠죠? :) 적용해둔 스타일을 우클릭해서 Edit style 해서 수정하기!
Q4. 프로토타입에서 스마트애니메이션은 레이어명이 달라도 작동한다(O/X)
Answer 4 : 정답은 ‘X’ 입니다. 레이어명이 다르면 스마트애니메이션이 제대로 작동하지 않습니다. 스마트애니메이션은 오브젝트의 속성이 변할때 자동으로 자연스러운 애니메이션을 만들어주는 기능입니다. 아래는 똑같이 스마트애니메이션을 적용한 예인데요 위에 예시는 부드러운 반면 레이어명이 다른 아래는 뚝뚝 끊기는 느낌입니다.
Q5. 인스턴트는 컴포넌트의 복사본이지만 아이콘, 이미지, 컬러등을 바꿀 수 있다(O/X)
Answer 5 : 정답은 ‘O’ 입니다. 복사본이지만 인스턴트의 컬러, 사진, 아이콘 등은 얼마든지 변경이 가능합니다. 다만 바꿔 버린 인스턴트는 더이상 컴포넌트에 변화에도 변하질 않습니다. 만약 바꾼 인스턴트를 다시 컴포넌트와 동일하게 돌리고 싶다면 오른쪽 디자인 패널에서 ‘Reset all changes’를 선택해주세요!
Q6. 컴포넌트를 컴포넌트로 감싸면 자동으로 베리언츠로 묶은 것 같은 기능이 된다.(O/X)
Answer 6 : 정답은 ‘X’ 입니다. 우선 문제가 성립이 안되는 명제입니다! 자동 베리언츠와 상관없이 컴포넌트는 컴포넌트로 감싸는 것이 불가능합니다. (인스턴스는 컴포넌트로 만들 수 있습니다.) 만약 컴포넌트를 컴포넌트로 감싸려고하면 기존 컴포넌트는 인스턴트로 변하고 원래 컴포넌트가 밖으로 튕겨져 나가 생성됩니다. 아래 예시를 보면 이해가 됩니다!
Q7. 피그마 베리어블에서 Number로 오브젝트의 수치(높이, 넓이 등)도 제어할 수 있다.(O/X)
Answer 7 : 정답은 ‘O’ 입니다. 베리어블에서 넘버 변수는 단순히 수의 증가감을 넘어 오브젝트의 속성의 쓰이는 수치(넓이, 높이, gap 등)도 다 제어할 수 있는 변수입니다. 잘 활용하면 반응형웹도 구현이 가능하겠죠? 피그마피디아에서 세진님이 만든 예시를 확인해보세요!
Q8. 피그마에는 디자인을 수정하면 개발자에게 알려주는 기능이 있다. (O/X)
Answer 8 : 정답은 ‘O’ 입니다. Dev모드에서 가능한데요! 프레임 선택 후 ‘compare changes’를 선택하면 변경된 시간과 함께 변경된 화면을 볼 수 있으니 일일이 알려주지 않아도 핸드오프가 더 빠르고 간단해지겠죠?
Q9. 피그마 컴포넌트 프로퍼티 기능은 총 3가지이다. (O/X)
Answer 9 : 정답은 ‘X’ 입니다. 컴포넌트에서 프로퍼티는 총 4가지 기능을 제공하고 있으며, 4가지를 응용하면 굉장히 많은 요소를 프로퍼티로 제어할 수 있습니다!
Q10. 다음 중 피그마 창립자를 고르세요 ㅎㅎㅎㅎ
Answer 10 : 가장 고난이도(?) 문제가 아니었을까 싶어요 ㅎㅎㅎ정답은 아래쪽 인물입니다.
피그마 공동창업자 중 한분 인 ‘딜런필드 (figma CEO)’입니다. 피그마 컨퍼런스를 종종 시청하시는 분들께는 익숙한 얼굴일 수도 있겠네요 :)