본문으로 건너뛰기

하나의 캔버스로, 처음부터 끝까지

모든 도구가 같은 문서에 기록되므로, 자유선과 컴포넌트 인스턴스, 흐름 노드가 하나의 보드 위에 나란히 존재하며 서로를 가리킬 수 있습니다. 아래 내용은 모두 세 번 잘라낸, 같은 하나의 보드입니다.

01드로잉

러프하게 시작하는 무한 캔버스

자유선, 텍스트, 이미지, 그리고 사각형부터 의사결정 노드까지 아우르는 도형 라이브러리 — 세 가지 결제 화면 후보가 경쟁하고 그중 하나에 동그라미가 쳐지는 작업의 그 부분을 위한 것입니다.

  • 전체 도형 세트와 함께 제공되는 프리핸드 및 벡터 패스 도구
  • 손그림 스타일은 보드 단위 설정이므로, 러프한 보드는 그것을 함께 쓰는 모두에게 러프한 상태로 유지됩니다
  • 1%에서 6400%까지의 팬 및 확대/축소, 원할 때는 스냅도 지원
PRED
보드의 러프 영역: 프리핸드로 동그라미 친 'checkout?', 하나에 줄이 그어진 세 개의 후보 메모, 그리고 승자를 선택하는 낙서 같은 화살표rough passcheckout?one page,everythingtwo steps,cart firstguest pay,no accountthis onecheckout / one page · 250Checkout$481+emailcardTotal$48Pay now218 × 44 · r4btn / instance161644payment pathPay tappedCharge cardApproved?yesReceiptnoRetry cardyouJun
02인터페이스

전달할 수 있을 만큼 정밀하게

정확한 기하학 정보를 제공하는 속성 패널을 갖춘 프레임, 컴포넌트, 인스턴스 — 선택된 아이디어는 너비 250의 프레임이 되고, 그 버튼은 218×44 크기로 선택되며, 여백은 보드 위에서 측정됩니다.

  • 인스턴스로 배치, 교체, 분리할 수 있는 재사용 가능한 컴포넌트
  • 자동 레이아웃, 정렬과 배분, 그리고 그리드 스냅
  • 면마다 다른 모서리 반경, 그리고 모든 숫자 필드에서 사용 가능한 산술 연산
F
보드의 명세 영역: 선택된 결제 버튼이 있는, 치수가 표시된 한 페이지짜리 결제 프레임. 그 치수와 16픽셀 여백이 제도 치수로 표시되어 있습니다rough passcheckout?one page,everythingtwo steps,cart firstguest pay,no accountthis onecheckout / one page · 250Checkout$481+emailcardTotal$48Pay now218 × 44 · r4btn / instance161644payment pathPay tappedCharge cardApproved?yesReceiptnoRetry cardyouJun
03다이어그램

편집을 거쳐도 무너지지 않는 다이어그램

가리키는 대상에 결합되는 플로차트 도형과 커넥터 — 결제 버튼은 청구-승인-재시도 흐름에 연결되어 있으며, 어떤 상자를 옮기더라도 화살표가 끊기지 않고 경로가 다시 그려집니다.

  • 커넥터는 도형의 가장자리에 붙어 있다가 도형이 움직이면 경로를 다시 그립니다
  • 실제 플로차트를 위한 프로세스, 결정, 종료 도형
  • 노드는 같은 보드 위에서 자신이 설명하는 와이어프레임 프레임을 가리킬 수 있습니다
L
보드의 흐름 영역: '결제 탭'에서 청구와 승인을 거쳐 영수증에 이르는 결제 경로. 점선으로 표시된 재시도 루프와 와이어프레임 버튼에서 이어지는 커넥터를 포함합니다rough passcheckout?one page,everythingtwo steps,cart firstguest pay,no accountthis onecheckout / one page · 250Checkout$481+emailcardTotal$48Pay now218 × 44 · r4btn / instance161644payment pathPay tappedCharge cardApproved?yesReceiptnoRetry cardyouJun

이 모든 도구를 여러분만의 보드에서 직접 사용해 보세요

1인 무료 · 카드 불필요
보드 열기