Composer

레이아웃과 디자인: 페이지, 프레임, 컴포넌트, 그리고 진짜 타이포그래피. 프로토타입 뷰와 코드 뷰까지.

한 줄로#

무한 캔버스에서 사물을 배치합니다: 여러 페이지로 이루어진 문서, 화면 디자인, 레이아웃까지, "폰트와 크기 고르기"를 넘어서는 타이포그래피 제어와 함께.

레이아웃#

Composer: 왼쪽의 페이지와 레이어, 아트보드, 디자인 인스펙터


Menu bar	File · Edit · View · Object · Vector · Text · Arrange · Plugins
Toolbar	실행 취소/다시 실행, 선택, 프레임, 도형, 선, 화살표, 펜, 타입, 손 도구, 그다음 Margins, Guides, Baseline, 아트보드 개수
Left	Pages, 그다음 Layers · Assets · Components · Frames, 그다음 레이어 카테고리 목록
Centre	캔버스, 줌과 페이지 표시기 포함
Right	Design · Prototype · Code
Status bar	아트보드, 오브젝트, 선택, 활성 도구, 줌

무엇을 하는 곳인가#

페이지와 프레임#

프레임이 배치된 Composer 캔버스

문서는 페이지를 가지며, 페이지는 프레임(아트보드)을 담습니다. 이것이 한 번에 하나의 아트보드에 그리는 Vectra와의 차이입니다. Composer는 화면들의 집합이나 스프레드들의 집합을 위한 것입니다.

레이어, 에셋, 컴포넌트#

Composer 툴바

Pages, 그다음 Layers / Assets / Components / Frames

같은 문서 위의 네 개 탭입니다. Components는 재사용 가능한 조각들입니다. 한 번 정의하고 여러 번 배치하면, 정의를 수정할 때 모든 인스턴스가 따라옵니다. Assets는 문서가 끌어오고 있는 것입니다. 레이어 목록은 종류별(Text, Images, Graphics)로 그룹화되어 있어, 복잡한 페이지에서 평면 목록보다 빠르게 훑어볼 수 있습니다.

정밀하게 레이아웃하기#

X, Y, W, H와 모서리 반경, 그리고 정렬과 분산. Margins, Guides, Baseline 그리드는 툴바의 토글입니다. 베이스라인 그리드는 여러 단으로 된 텍스트가 스프레드 전체에서 줄을 맞추게 해주는 것입니다.

타이포그래피#

타이포그래피 섹션이 열린 디자인 인스펙터

Composer가 제 자리를 인정받는 부분입니다.


Font, size, leading, tracking	슬라이더가 아니라 숫자로
Alignment	수평, 그리고 박스 안에서의 수직: 위, 가운데, 아래
Weight와 case	"입력한 그대로"를 포함
Paragraph spacing, 목록	글머리 기호 또는 번호 매기기
Resize mode	Fixed size, Auto width, Auto height: 박스가 텍스트를 따라갈지, 텍스트가 박스에 맞춰 줄바꿈될지
Text threading	하나의 텍스트 박스를 다음 박스로 연결해 넘치는 내용이 흘러가게 함
Text styles	이름이 붙어 재사용 가능함

Prototype와 Code#

Prototype 탭은 화면들을 클릭 가능한 흐름으로 연결합니다. Code 탭은 디자인을 코드로 보여줍니다.

변수와 스타일#

문서를 페이지 모음이 아니라 하나의 시스템으로 바꾸는 두 개의 패널입니다.

Variables: 문서 전체에서 쓰이는 이름 붙은 값(색상, 숫자, 문자열)이며, 값이 설정되는 곳마다 변수 선택기가 있습니다. 변수를 바꾸면 모든 사용처가 따라옵니다.
Styles: 이름이 붙은 텍스트 및 오브젝트 스타일.
Fills: 그라디언트와 이미지를 포함한 채우기 에디터.

Components와 함께, 이것들은 디자인을 토큰 기반으로 만드는 요소입니다. Vectra의 DA 워크스페이스는 디자인 토큰을 내보낼 수 있고, Composer는 그것이 쓰이는 곳입니다.

프로토타이핑#

여기서의 프로토타입은 이미 그려둔 프레임들 위에 만드는 그래프입니다. 각 인터랙션은 네 가지로 이루어집니다: 트리거(클릭 또는 호버), 타겟 프레임, 트랜지션, 지속 시간. 프레임의 연결 핸들을 그것이 이어져야 할 프레임으로 드래그하세요.

Prototype Mode는 캔버스를 흐름 뷰로 바꾸고, Preview Player는 재시작 기능과 함께 독자가 보게 될 모습 그대로 실행합니다. 별도의 프로토타입 문서는 없으며, 프레임 자체가 곧 화면입니다.

Dev Mode, 디자인을 코드로 넘기기#

Inspect 탭은 디자인 도구의 다른 절반입니다. 선택 항목을 읽어 세 개의 플랫폼 탭으로 코드를 만들어냅니다.

탭	출력
CSS	웹
iOS	SwiftUI
Android	Jetpack Compose

생성된 코드와 함께, 개발자가 필요로 하는 실제 수치도 보고합니다: 크기, 반경, 회전, 불투명도, 채우기, 획, 이펙트, 폰트와 폰트 크기, 그리고 부모까지와 형제 요소까지 측정된 간격, 즉 레이아웃을 결정하는 두 거리입니다. 코드는 클립보드에 복사되거나 다운로드됩니다.

내보내기#

Composer의 내보내기는 하나의 선택이 아니라 설정 목록입니다. 여러 개를 추가하고 실행할 것을 고르면, 선택된 각 설정이 한 번의 과정에서 자신의 파일을 만들어냅니다. 각 설정은 다음을 갖습니다.


Format과 quality	설정마다 따로, 그래서 PNG와 JPG가 함께 나갈 수 있음
Scale과 DPI	`@2x`와 인쇄 해상도
CMYK (print)	인쇄용 버전을 위해
Naming	접두사와 접미사, `project-`와 `@2x`
Background	투명을 포함, 형식이 허용하는 경우

패널이 발견하도록 남겨두는 대신 직접 알려주는 두 가지 세부 사항이 있습니다.

PNG와 SVG만 투명도를 지원합니다. JPG에서 투명 배경을 고르는 것은 아무 효과가 없는 설정이며, 패널이 그렇다고 말해줍니다.
내보내기의 소스는 노드이거나 슬라이스입니다: Create Slice는 현재 선택 영역으로 내보내기 영역을 만들어, 프레임을 자르지 않고도 프레임의 일부만 내보낼 수 있게 해줍니다.

Presets는 설정 전체를 저장하므로, 프로젝트의 내보내기 구성을 한 번만 작성하면 됩니다.

읽고 쓰는 파일#


Native format	`.comp`
Exports	`.png` · `.jpg` · `.svg`, 어떤 스케일이나 DPI로든, RGB 또는 CMYK로
Generates	CSS · SwiftUI · Jetpack Compose

다른 스튜디오로 작업 보내기#

만들어내는 것: 하나의 구성물, 그리고 이미지로 렌더링된 활성 아트보드. 받아들이는 것: 픽셀 아트, 벡터 아트, 이미지.

다른 사람과 함께 작업하기#

Composer는 문서 단위로 동기화됩니다: 디바운스된 전체 상태, 그리고 전달된 액션들. 같은 순간 같은 페이지를 편집하는 두 사람 중 한쪽이 이깁니다. 서로 다른 페이지에서 작업하세요.

한계와 흔한 함정#

Auto width와 auto height는 고정 레이아웃과 충돌합니다. auto width로 설정된 박스는 줄바꿈되지 않습니다. 텍스트가 프레임 밖으로 넘친다면 대개 이것이 원인입니다.
Text threading은 자동이 아닙니다. 연결하기 전까지 박스는 Not linked라고 표시됩니다.
컴포넌트는 정의로부터 전파되지, 인스턴스로부터 전파되지 않습니다. 인스턴스를 편집해도 다른 인스턴스는 업데이트되지 않습니다.