최고의 디자인 핸드 오프 도구 중 8 가지
출처 : https://www.sitepoint.com/best-design-handoff-tools/
8 of the Best Design Handoff Tools — SitePoint
Without design handoff, devs are forced to make guesses that can result in mistakes and bad UX. Daniel Schwarz looks at the best design handoff tools currently available.
www.sitepoint.com
디자인 핸드 오프 (심지어 호출되기 전)는 복잡하고 실망스럽고 종종 비참한 작업이었습니다. 과거에는 Photoshop이 화면 디자인에 사용할 수있는 유일한 도구였으며 디자인을 코드로 변환하는 작업을 "PSD 슬라이스"라고했습니다.
오, 요즘
PSD를 슬라이싱하는 것은 개발자의 책임이었으며, 개발자가 설계 도구를 사용하고 싶지 않기 때문에 상당히 실망했습니다. 즉, 디자이너는 Photoshop 문서의 모든 레이어에 대한 디자인 사양을 수동으로 작성해야했기 때문에 개발자와의 불일치와 열띤 토론이 종종 발생했습니다. 이를 통해 디자이너와 개발자는 오늘날에도 농담을 할 준비가되지 않은 전쟁의 길을 열었습니다.
그러나 결국 Sketch를 소개했습니다. 개발자는 확장 가능한 API 덕분에 디자인 문서를 완전히 분석하고 해석 할 수있는 앱을 만들 수있었습니다. 오늘날 디자인 핸드 오프 도구는 모든 디자인 워크 플로우에서 필수 요소가되었으며 거의 모든 화면 디자인 도구가 디자인 핸드 오프 솔루션과 통합되거나 자체적으로 제공됩니다.
UX를 처음부터 배우고 싶습니까? SitePoint Premium을 사용하여 기본 사항, 프로젝트, 팁 및 도구 등을 다루는 전체 UX 디자인 책 모음을 받으십시오. 월 $ 9에 지금 가입하십시오 .
디자인 핸드 오프 도구의 기능은 무엇입니까?
디자인 핸드 오프 도구에는 세 가지 주요 목표가 있습니다.
- 디자이너가 [insert tool here]에서 디자인을 내보낼 수 있도록
- 개발자가 상기 설계를 검사하고 구현할 수 있도록
- 이해 관계자 간의 피드백 및 협업 촉진
디자인 핸드 오프 워크 플로우는 종종 다음과 같습니다.
- 디자이너는 화면 디자인 도구에서 디자인을 조롱합니다.
- 디자이너는 모형을 디자인 핸드 오프 도구로 보냅니다.
- 이해 관계자는 디자인을보고 필요한 경우 의견을 제시합니다.
- 디자이너는 문제를 해결 한 다음 업데이트 된 버전을 보냅니다.
- 그런 다음 개발자는 완성 된 디자인을 계층별로 검사합니다.
- 디자인 핸드 오프 도구는 각 계층을 코드로 변환 한 다음 개발자는이 코드를 앱 또는 웹 사이트 개발의 기초로 사용할 수 있습니다.
디자인 핸드 오프가 없으면 개발자는 추측이라는 단 하나의 대안 만 남게됩니다 . 추측하면 잘못된 색상 (예 : 잘못된 색상이 사용되거나 상호 작용이 잘못됨)이 발생하여 사용자 경험에 영향을 줄 수 있습니다.
모든 핸드 오프 도구는 동일한 방식으로 작동하지만 모두 동일한 플랫폼 또는 선택한 화면 디자인 도구를 지원하지는 않습니다. 예를 들어 스케치를 사용하지 않으면 Marvel이 디자인 핸드 오프 도구로 유용하지는 않습니다.
현재 사용 가능한 최고의 디자인 핸드 오프 도구를 살펴 보겠습니다.
제플린
Zeplin
Connected space for product teams. Handoff designs and styleguides with accurate specs, assets, code snippets—automatically.
zeplin.io
Zeplin은 컨셉이 처음 구현 된 후 Sketch 및 Photoshop,보다 최근에는 Adobe XD 및 Figma와 통합되어 디자인 핸드 오프에 대한 책임을 맡고 있습니다. 이러한 도구 중 하나에서 동기화 된 디자인은 CSS, Android, Swift, Objective-C 또는 React Native 코드로 변환 할 수 있으며 여기에는 각 레이어의 스타일과 내보낼 수있는 것으로 표시된 자산이 포함됩니다.
이 기능은 디자인 핸드 오프 도구의 표준이지만 Zeplin이 첫 번째 (또는 첫 번째 중 하나) 인 경우 앱의 사용자 경험은 거의 필적 할 수 없습니다.
다른 모든 디자인 핸드 오프 도구와 마찬가지로 주석 기능은 피드백 및 협업을 지원합니다.
- 플랫폼 : 웹, macOS, Windows
- 가격 : 무료 플랜, $ 17, $ 26 또는 $ 122.40 (/ 월)
아보 코드
Hand-off and Inspect Sketch, PSD, XD, AI, & Figma designs | Avocode
Save time on preparing design assets and specs and let Avocode do it for you. Just import any design file and invite developers to take everything they need for a Web, iOS, Android, or React Native app. Sign up now and start a 14-day free trial to see if i
avocode.com
Avocode는 Sketch, Figma, Adobe XD 및 Photoshop과 완벽하게 통합되므로 Avocode가 Linux와 함께 작동한다는 사실 외에 기능 측면에서 Zeplin간에 큰 차이는 없습니다 (유일한 디자인 핸드 오프 도구 임).
Avocode도 사용하기 매우 즐겁습니다.
- 플랫폼 : 웹, macOS, Windows, Linux
- 가격 : $ 14, $ 32 또는 $ 90 (/ 월)
Sympli
Design Collaboration, Version Control & Handoff | Sympli
Design handoff, implementation, and collaboration for web and mobile product teams. Sympli works with Photoshop, Adobe XD, Sketch, Android Studio, and Xcode.
sympli.io
Sympli는 Sketch, Adobe XD 및 Photoshop과 통합되지만 Figma는 통합 되지 않습니다 . 그러나 대부분의 경우 디자인 핸드 오프 도구로는 처음이지만 Xcode, Android Studio 및 Atlassian의 Jira와 직접 통합되므로 Sympli는 웹 앱으로 만 제공되지만 시장에서 다소 독창적입니다.
🤷 만약 모든 웹 사이트의 35 % 가 워드 프레스라면 PHP는 정말 죽었습니까?
' PHP & MySQL : 초보자를위한 닌자, 6 판 '을 무료로 받으십시오 .
Sympli는 Versions 라는 Git 기반 앱도 제공 하지만, 이는 현재 macOS에서만 사용할 수 있으며 여전히 초기 단계로 간주됩니다.
- 플랫폼 : 웹 전용
- 가격 : 무료 플랜, $ 36 또는 $ 90 (/ 월)
마블
Marvel - The design platform for digital products. Get started for free.
📹 New! Remote User Testing - Get video + voice feedback on designs and prototypes
marvelapp.com
매우 친숙한 사용자 인터페이스를 갖춘 Marvel은 마스터하기 가장 쉬운 디자인 도구 중 하나로 잘 알려져 있으며 새롭게 향상된 가져 오기 기능이 이제 완전히 동기화 된 상호 작용 (대부분의 디자인 핸드 오프 도구는 상호 작용을 동기화하지 않음)하고 있습니다. 프로토 타이핑에 사용할 이유가 적고 핸드 오프 및 협업 도구로 사용할 이유가 더 많습니다.
그러나 단점은 Marvel은 웹 응용 프로그램으로 만 존재하며 매우 독창적 인 통합 기능이 있지만 Marvel이 지원하는 유일한 화면 디자인 도구는 Sketch입니다 (Photoshop, Adobe XD 및 Figma는 지원되지 않음).
Sketch가 화면 디자인 도구라면 Marvel을 살펴볼 가치가 있습니다. 그렇지 않은 경우이 도구는 적합하지 않습니다.
- 플랫폼 : 웹 전용
- 가격 : 무료 플랜, $ 12, $ 42 또는 $ 84 (/ 월)
디자인 핸드 오프 도구가있는 제품 스위트
InVision , Figma 및 Adobe XD 는 화면 디자인 및 대화식 프로토 타입 에 중점을 두었음에도 디자인 핸드 오프 기능이 있습니다.
프레이머 는 원래 JavaScript 기반의 인터랙션 디자인 도구이기 때문에 이러한 라운드 업에 빠지지 않는 경우가 종종 있습니다. 그러나 최근 몇 년 동안 Framer Studio (현재 Framer X )가 도입되었습니다. 디자인 및 개발 간의 격차를 해소하는 시각적 편집기를 갖춘 디자인 도구입니다.
디자인 워크 플로에서 이러한 도구를 사용하는 경우 기본 제공 디자인 핸드 오프 도구를 사용하는 것이 더 효율적일 수 있습니다. InVision은이 범주에서 최신 도구로, 최근에는 InVision Studio와 함께 제품군에 화면 디자인이 도입 된 것을 보았지만 2018 년 11 월 현재 macOS에서만 사용할 수 있습니다.
그 외에는 기능면에서 이러한 도구를 구분하는 것이 많지 않습니다. 각각은 높은 등급과 널리 사용됩니다.