개발자와 디자이너는 UXPIN과 함께 단일 진실의 소스에서 일합니다.-CSS 튜토리얼-php.cn

개발자와 디자이너는 UXPIN과 함께 단일 진실의 소스에서 일합니다.

웹 디자인과 개발 도구 간의 충돌은 항상 업계에서 오랜 문제였습니다. 웹 디자인의 최종 결과는 일반적으로 개발자가 웹 사이트와 디자이너가 웹 사이트를 "페인트 작업"하게 만드는 데 사용되는 모델이며,이 단절은 큰 마찰을 일으켰습니다. 진실의 근원은 어느 것이 있습니까?

실제로 단일 사실이 있다면 어떨까요? 디자인 도구가 프로덕션 웹 사이트와 정확히 동일한 코드를 사용하는 경우 어떻게해야합니까? 이 장기 토론의 최신 장은 uxpin입니다.

우리는이 모든 것을 더 잘 이해할 수 있도록 몇 가지 사실을 얻을 수 있습니다.

UXPIN : 코드 기반 브라우저 디자인 도구

UXPIN은 특히 디지털 화면 기반 설계 및 고급 프로토 타이핑에 중점을 둔 모든 기능을 갖춘 강력한 설계 도구입니다.

코드를 기반으로한다는 사실은 특히 중요합니다. 모든 시각적 구성 요소 (실제로 코드에 루팅 된)를 사용하여 웹 사이트를 디자인하여 디자인을 최종 제품에 더 가깝게 만듭니다. 디자인은 웹 사이트 나 앱뿐만 아니라 웹 사이트 나 앱과 같은 기능 도 보입니다 . 예를 들어, 윤곽선이있는 정적 상자 대신 입력 필드는 텍스트로 채우는 실제 느낌을 제공합니다.

코드 기반 디자인은 각 요소에 대한 모든 사양 (정확한 형식 사용) 및 정확한 픽셀 크기 등을 제공했습니다. 경우에 따라 개발자가 사용할 수있는 정확한 UI 구성 요소 코드를 추출 할 수도 있습니다.

Ania Kubów는 UXPIN에 대한 비디오에서 이것에 대해 자세히 설명합니다.

10 년 전, Jason Santa Maria는 차세대 디자인 도구가 어떻게 생겼는지 진지하게 생각했습니다. 브라우저를 직접 사용할 수 있습니까?

브라우저가 충분하다고 생각하지 않습니다. 웹 디자이너는 건축가가 나무를 두드린 다음 측정하는 것처럼 창의적 및 정보 전송 문제를 해결하기 전에 브라우저로 뛰어 들었습니다. 도구는 상상력을 제한하며, 디자인의 시작 부분에서 상상력이나 영감은 다음 모든 것에 대한 기초가됩니다.

Jason Santa Maria ,“실제 웹 디자인 앱”

브라우저를 직접 사용하지는 않지만 코드 기반 도구는 UI가 웹 사이트 나 응용 프로그램처럼 작동하게 만들 수 있습니다.

웹 페이지는 역동적이고 생활 공간이며 방문자의 최소한의 상호 작용은 전체 웹 사이트의 범위를 변경할 수 있습니다. […] 우리는 정적 미디어를 다루지 않기 때문에 상호 작용 및 웹 페이지의 변화하는 시력을 설계 할 수 있어야합니다 […] 응용 프로그램은 텍스트의 색상이나 블록이 아닌 요소를 볼 필요가 있습니다. Photoshop, Illustrator 및 불꽃 놀이는 이와 관련하여 몇 가지 저수준 기능을 가지고 있지만보다 역동적이고 비파괴적인 처리가 필요합니다.

UXPIN에서 자신의 React 구성 요소를 사용할 수 있습니다

이것은 단일 사실의 원천 의 마법입니다. 설계 도구가 반응 (또는 다른 프레임 워크) 구성 요소를 출력 할 수있는 경우 이는 한 가지입니다. 이것은 영리한 속임수입니다. 그러나 그것은 일방적 인 여행 일 것입니다. 실제 프로젝트의 구성 요소는 전적으로 디자인 분야에 있지 않은 다른 컨텐츠로 채워져 있습니다. 구성 요소는 후크를 사용하여 현재 사용자의 권한을 반환하고 액세스 할 수없는 경우 버튼이 비활성화됩니다. 비활성화 버튼에는 특정 디자인 요소가 있지만 대부분의 코드의 경우에는 그렇지 않습니다.

설계 도구가 해당 구성 요소의 다른 코드를 존중할 수없고 기본적으로 무시하면 비현실적입니다. 기본적으로 설계 도구가 구성 요소를 코드로 내보내지 만 디자이너가 이러한 UI 구성 요소를 먼저 가져올 수없는 경우 그다지 유용하지 않습니다.

UXPIN 병합이 들어오는 곳입니다.

이제 공정하게하기 위해서는 설치하는 데 약간의 작업이 필요합니다. 완전한 시스템 설계를 완료하는 데 몇 시간 또는 몇 주가 걸릴 수 있습니다. 현재 UXPIN은 React 와만 작동하며 WebPack 구성을 사용하여 통합합니다.

실행을 시작하면 UXPIN에서 사용하는 구성 요소는 실제로 생산 웹 사이트를 구축하는 데 사용하는 구성 요소입니다.

디자인 도구가 사전 구축 된 구성 요소를 소화하고 새로운 캔버스에서 프로토 타이핑에 사용할 수 있도록하는 것은 정말 인상적입니다.

UXPIN은 다음을 포함하여 프로젝트 에서이 기능을 구현하는 데 도움이됩니다.

자신의 구성 요소를 통합하는 문서
샘플 리포지토리 : uxpin-merge-boilerplate

예상대로 구성 요소를 구축하는 방식에 영향을 줄 수 있습니다.

구성 요소에는 종종 속성, 속성 제어 설계 및 내부 컨텐츠와 같은 측면이 있습니다. UXPIN은 UI의 속성을 제공하므로 구성 요소를 완전히 제어 할 수 있습니다.

 <code><linechart ...="" barcolor="green" data="{[" height="200" showxaxis="false" showyaxis="true" width="500"></linechart></code>

로그인 후 복사

이를 알면 구성 요소에 대한 속성 인터페이스를 제공하여 많은 설계 제어를 제공 할 수 있습니다. 예를 들어, 통합 테마 스위치.

스토리 북으로 더 빠릅니다

구성 요소를 테스트하고 빌드하기 위해 JavaScript 구성 요소 필드에서 매우 인기있는 또 다른 도구는 StoryBook입니다. UXPIN과 같은 디자인 도구가 아닙니다. 구성 요소의 "동물원"과 비슷합니다. 당신은 그것을 설정했거나 스토리 북을 사용하는 것이 가치가 있다고 생각할 수 있습니다.

좋은 소식은 무엇입니까? UXPIN 병합은 StoryBook과 완벽하게 작동합니다. 통합을 매우 빠르고 쉽게 만듭니다. 또한 angular, svelte, vue 등과 같은 모든 프레임 워크를 지원합니다.

얼마나 빠른 지 확인하십시오.

UXPIN CEO Marcin Treder는 강력한 비전을 가지고 있습니다.