design

Figma로 만드는 디자인시스템/3) 컴포넌트 만들기

디자인 시스템 (4) 마스터 컴포넌트와 인스턴스의 이해

자 드디어 디자인 시스템의 핵심, 컴포넌트에 대해서 알아보겠습니다. 컴포넌트는 UI의 구성을 저장하여 복제, 변형을 용이하게 하는 기능으로, 마스터(원본)와 인스턴스(복제본) 로 나뉩니다. 이 둘의 상호작용을 얼마나 잘 이해하는지에 따라 디자인 시스템을 원활하게 관리하는 데 영향을 많이 끼치게 됩니다. 지금부터 차근차근 컴포넌트에 대해서 알아보도록 하겠습니다. 1. 마스터 컴포넌트 등록하기 먼저 마스터 컴포넌트는 상단 UI바에서 마스터 컴포넌트 등록 아이콘을 누르거나 Ctrl + Alt + k 로 등록할 수 있습니다. 등록된 마스터 컴포넌트는 레이어 패널 옆의 에셋 패널에서 확인이 가능합니다. 2. 마스터 컴포넌트를 복사해서 인스턴스 만들기 등록된 마스터 컴포넌트를 복제해 보겠습니다. 복제하고 나니 레이..

Figma로 만드는 디자인시스템/2) 프레임과 오토레이아웃

오토레이아웃을 파.괘.한.다 : 독립 포지셔닝(Absolute Positioning)

지난 시간에 배웠던 오토레이아웃 써 보니 어떠셨나요? 분명히 쓰기 힘들고, 불편한 지점이 많다고 생각하시는 분들도 많을 겁니다. 특히 자동 배치 규칙을 적용하지 말아야 할 순간도 있죠. 그래서 오늘은 오토 레이아웃을 벗어난 요소를 지정하는 독립 포지셔닝 기능에 대해서 알아보겠습니다. 1. 독립 포지셔닝(Absolute Positioning) 원래 오토레이아웃을 상위 프레임 요소에 사용하게 되면, 하위 요소들의 위치는 무조건 규칙에 따라 배열됩니다. 예전에는 이 부분을 새 프레임을 적용해서 씌운 채로 만드는 경우가 많아 레이어 수 때문에 과한 디자인 형식이 될 때가 많았습니다. 수정하기도 어려웠구요. 그러나 독립 포지셔닝 기능을 사용하면 오토 레이아웃에 적용되지 않는 요소를 만들 수 있기 때문에, 원하는 ..

frogOlis
'design' 태그의 글 목록