자동 레이아웃 및 스택 그룹을 사용하여 스케치의 반응 형 Flex Grid

구조, 모듈성 및 확장 성을위한 설계 시스템 개선

CSS의 FlexBox, iOS의 UIStackView 및 Android의 FlexboxLayout과 같은 도구는 개발자에게 오늘날 존재하는 다양한 적응 형 및 반응 형 뷰를 처리하는 데 필요한 워크 플로우를 오랫동안 제공해 왔습니다.

그러나 설계자들이 선호하는 디자인 도구 중 일부의 레이아웃 설계 프로세스는 항상 수동적이고 정적이고, 지루하며 일반적으로 수학적으로 덜 정확합니다. 그러나 Anima 직원들의 놀라운 업적 덕분에 우리는 그 격차를 더 잘 메우기 위해 필요한 구조와 유연성을 곧 가질 수 있습니다.

최신 자동 레이아웃 플러그인에 번들로 제공되는 새로운 스택 기능을 통해 이제 UI 출력을 더 잘 수용하고 디자인 시스템 전체에서 일관성과 유지 관리 성을 향상시킬 수있는 워크 플로우를 갖추게되었습니다. (면책 조항-이 개념은 아직 초기 단계입니다. 모든 유형의 레이아웃이이 시스템에서 도움이되는 것은 아니므로 적합하다고 생각되는대로 혼합하고 일치 시키십시오).

데모

아래 비디오에서는 개념 증명 플렉스 그리드 레이아웃을 조합하여 멋진 스택을 보여줍니다. 기본 웹 페이지의 구조를 반영하는 대지입니다.

아직 초기 탐색 단계에있는 동안 다음 기능이 템플릿에 포함됩니다.

  • 몇 번의 클릭만으로 데스크톱에서 모바일로.
  • 대지의 크기를 조정할 수 있으며 그리드 정렬 / 배포가 중단되지 않습니다
  • 다음에 의해 구조화 된 그리드 :
  • 신체
     - 헤더
     — 메인
     — — 섹션
     — — — 행 그룹 (형제 상자 크기 조정 레이어가 있음)
     — — — — 행
     — — — — — 열
     — — — — — — 모듈
     — — – – – – – 구성 요소 (내부 논리가있는 중첩 기호)
     — 바닥 글
  • 스케치 크기 조정 속성, 자동 레이아웃 고정 및 스택 그룹의 조합으로 정의 된 내포 된 기호를 사용하여 교체 가능한 구성 요소의 모듈 식 시스템을 만듭니다.
  • 레이아웃은 대지 너비로 조정됩니다 (콘텐츠의 최대 너비는 1200px이고 모바일에는 내장 여백이 있습니다).
  • 다양한 컬럼 분포 및 거터의 손쉬운 붕괴 / 수정.
  • 과 독립적으로 커지거나 줄어 듭니다.
  • 웹 페이지처럼 여백과 패딩을 그대로 유지하면서 높이가 <메인>으로 변경되어 아트 보드에서 <바닥 글>을 아래로 내립니다.
  • 자식 행의 높이에 영향을 주도록 <행>의 높이를 조정할 수 있습니다
  • 열의 정렬 (상단, 중간, 하단, 스트레치)은 행 수준에서 정의 할 수 있습니다.
  • 행에서 새 열을 추가하거나 삭제하면 형제 열의 너비가 자동으로 조정됩니다.
  • 열에 새 자식 모듈을 추가하면 해당 열이 세로로 커집니다 (모듈에는 이미지, 텍스트, 목록, 테이블, 그룹 및 기호와 같은 다양한 내용 유형이 포함됨)
  • 모듈의 정렬 (왼쪽, 가운데, 오른쪽, 스트레치)은 열 수준에서 정의 할 수 있습니다.
  • 심볼 스왑 구성 요소를 사용하여 내용을 바꾸거나 새 레이어를 기존 구성 요소에 고정합니다.
  • 데스크탑 대지는 8pt 기준선을 사용하도록 설정되었습니다.

스케치 파일

여기있어. 어떤 식 으로든 개선하고 알려주십시오.
* 중요 * — 스택이 지원되는 자동 레이아웃의 최신 릴리스 (이 글을 쓰는 시점에서 .0.2.0)가 없으면 파일이 작동하지 않습니다.

https://cl.ly/2v2I373P2E1f

마지막 생각들

나는 그것이 일부 사람들에게 유용하기를 바랍니다. Autolayout 및 Stacks의 가능성에 대해 자세히 알아볼 것입니다. 이 버전을 기준으로 수학 반올림에 대한 몇 가지 작은 문제가 있음을 알았지 만 시간이 지남에 따라 정렬되기를 바랍니다. 개발자에게 제안한 요청 중 일부는 가치가 있다고 생각합니다.

  • 스택 논리에 영향을주지 않고 스택 그룹 (열의 부모 행)에 배경을 추가하는 기능. HTML / CSS에서는 또는 "div"수준에서이 작업을 수행하지만 Sketch에서는 현재로서는 그렇게 할 수 없습니다.
    스택 그룹으로 배경 레이어를 그룹화하고 bg를 상단 / 왼쪽 / 100 % 너비 및 높이에 고정하는 것과 관련하여 지금이 작업을 수행하는 방법이 있으며 배경이 내용을 수용하기 위해 커지는 동안 배경이 줄어들지 않습니다. 내용이 제거됩니다. 축소가 이미 팀의 TO-DO 목록에 있다고 생각합니다.
  • 대지에 중단 점을 도입하고 대지를 기반으로 심볼을 교체합니다 (컨테이너 쿼리 방식을 사용하여 대지 <400px 이상인 경우 햄버거 아이콘으로 4 개 항목 탐색 메뉴를 스와핑).
  • 상기 중단 점으로, 공간이 충분하지 않을 때 열이 서로 쌓 이도록 수평에서 수직으로 쌓인 그룹 사이를 토글하는 기능. 그리고 지정된 경우 열을 줄 바꿈합니다.
  • 열당 백분율 너비를 지정하는 기능
    (업데이트 —이 아이디어의 버전은 가중치 기능을 사용하여 플러그인에서 구현되었습니다.)
  • 이것이 반드시 Anima 팀에 해당되는 것은 아니지만 Sketch는 특히 간격, 최소 및 최대 높이와 ​​같은 속성 및 여러 레이어에서 일관성을 유지해야하는 기타 값과 같은 변수를 지원해야합니다. 이러한 변수는 색상에 매핑하고 Sass 핸드 오프 프로세스를 지원하는 데에도 사용될 수 있습니다.

그게 다야! 애니 마 팀에 다시 한 번 소리를 지르고 싶었습니다. 그들은 매우 재능 있고, 반응 적이며, 매력적이므로 그들의 노력을 지원해야합니다! Facebook 페이지에 가입하십시오.

궁금한 점이나 의견이 있으시면 아래에 게시하거나 트위터에 문의하십시오.