figma의 경우 실시간으로 UI시안 공유 및 피드백을 할 수 있는 장점이 있다.
자체적으로 버전 관리가 가능하며,다양한 디바이스의 최적화된 UI최적 툴이다.
자동으로 웹에 저장되므로, 항상 열고 있는 파일이 최종 파일이다.
전버전의 파일이 필요하다면 손쉽게 그 버전으로 돌아가서 복사하거나 선택한 버전으로 복구가 가능하다.
share옵션으로 멤버를 초대해 공유할 수 있다. 실시간 파일 접속 확인이 가능하다.
맥,윈도우 상관없이 변경사항을 공유 가능하다. 모바일이나 태블릿은 뷰만 가능하고, 수정은 불가능하다.
팀 라이브러리기능을 통해 간편하게 디자인 시스템을 공유하고 동기화할 수 있다.
젯플린에 업데이트하여 공유하여 더 많은 시간을 절약할 수 있다.
툴바 및 우측 상단에 있는 Code 탭을 클릭하고 UI에셋에 접근하면
Zeplin처럼 css처럼 중심의 gui가이드를 확인 가능하다.
Zeplin에서 이미지를 내려 받으려면 스케치에서 별도 셋팅이 필요하지만
누구나 직접에셋을 찾아 필요한 확장자를 선택 후 내보내기를 할 수 있다.
Constraints(Adaptive Layout)기능은 스케치와 유사한 기능으로 반응형 및 다양한 디바이스 환경을 고려해 ui에셋을 세팅할 수 있다.
프로토타입핑 기능으로 개발 리스크를 초기 단계에서 발견할 수 있다.
물음표의 Keyboard shortcuts를 통해 사용중인 단축키들을 나타낸다.
zoom탭 클릭 후 shift + 1 : 화면상의 UI가 화면에 꽉차게 표시
space bar + 마우스 이동 : 화면 이동 등등 여러가지가 존재.
Layout Grid를 알아야하는 이유
다양한 해상도의 Web 또는 App환경에 대응하여
프로덕트를 제작시,
전달하려는 정보의 완성도를 유지하기 위해
일관성있는 규칙이 필요하기 때문.
구성요소
1. Magin : 콘텐츠 영역 밖의 좌우 여백
2.Column : 해상도 세로 열
3.Gutter: Column사이의 여백
가로 해상도 길이의 따라 1,3의 길이가 달라지기도 한다.
시안 작업시 개발 플랫폼 ,Framework 방식이 무엇인지 미리 체크하는 것을 권장한다.
(참고링크)
https://material.io/design/layout/responsive-layout-grid.html#columns-gutters-and-margins
Material Design
Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences.
material.io
Frame선택 후(#) > 오른쪽 옵션(스케치 아트보드) > 원하는 사이즈의 옵션 선택 후 레이아웃 그리드 +선택 (기본값 px) 해당되는 그리드 설정 후
Layout grid :: 선택 후 + 그리드 명 설정
새로운 프레임을 추가할 때마다 그리드를 불러와 쉽게 설정 가능하다.
수정시 grid style의 edit style을 설정 후 옆 삼선 모양을 눌러 색상 및 column등 재설정이 가능하다.
auto layout
예제)
상단의 rantangle툴로 버튼모양으로 사이즈를 조정한다.
다음 텍스트 툴로 button 입력 > 후 두 레이어를 선택해서 정렬한다.
후 상단의 create compornent / 마우스 오른쪽을 누른다.
버튼이 생성되면 왼쪽의 레이어버튼명을 수정해준다.
배경을 선택후 색상을 변경한다. bg를 선택한 상태로 안쪽의 점을 눌러 radius값을 변경한다.후에 정확한 값을 입력할 경우 radius값을 조정하여 수정한다.
후에 텍스트로 버튼을 입력 후 shift + a.
텍스트 바깥으로 autoframe이 생성되는데, 일반적인 프레임과 다르다.
같은 오토 프레임이라도 옵션이 가로형인지 세로형인지에 따라 형태가 달라진다.
레이어 여백을 수정하고 싶을 경우 해당 창에서 수정이 가능하다.
Fill을 통해 배경색을 지정하고, 후에 여백값을 조정하여 크기를 맞춘다.
둥근 버튼을 생성하고 싶을 경우 프레임을 선택하고,border-radius값을 조정한다.
