피그마(figma) 핵심

안녕하세요. 프로토타입 인터렉션 복사 붙여 넣는 방법을 알려드리겠습니다. 프로토타입을 간단히 설명하면 디자인 후 서비스에 대해 코딩이나 개발을 하지 않고도 움직임을 넣어서 기획자, 디자이너, 개발자... 등 이해관계자들이 실제 구현될 서비스에 대해 미리 사전에 점검을 할 수 있고 최종으로 서비스 출시 전 사용자가 실제로 서비스를 이용하면서 화면 흐름상 어색하진 않은지 개선할 영역은 없는지... 등 사용성 테스트(Usability Testing)를 할 수 있습니다. 프로토타입은 크게 스크롤과 화면연결로 볼 수 있습니다. 스크롤(scroll) : 콘텐츠의 길이가 뷰포트 영역보다 클 경우 콘테츠를 보는 방식을 수직스크롤, 수평스크롤, 모든 방향 스크롤로 지정합니다. 스크롤은 프로토타입 패널에서 설정할 수 있으..

안녕하세요. 지난 포스팅에서 프레임과 아트보드 그룹의 차이에 대해서 알아보았습니다. 이번엔 프레임의 속성 중 프레임 설정방법과 컨스트레인트에 대해 살펴보겠습니다. 사전설정된 디바이스 프레임을 툴바에서 선택하면 사전 설정된 디바이스가 우측 디자인 패널에서 보입니다. 아이폰, 안드로이드 모바일부터 데스크탑 태블릿 종이 소설미디어... 등 이미 프레임 영역을 만들어져 있습니다. 사전 설정된 디바이스를 선택해서 디자인을 하면 프레젠트 모드에서 목업에 씌워진 형태로 프로토타입을 할 수 있습니다. 사전 설정된 프레임 활용 1. 프레임 단축키 A, F 누르거나 툴바에서 프레임 아이콘을 클릭 2. 우측 디자인 패널에서 원하는 디바이스를 선택 3. 캔버스에 프레임 생성 4. 프로토타입 패널로 전환 5. 프레젠트 모드에서..

안녕하세요. 오늘은 컴포넌트와 인스턴스의 관계 그리고 스타일화에 대해서 알아볼까요. 컴포넌트는 한 번 이상 반복적으로 사용하는 UI입니다. 디자인 시스템의 핵심 빌딩 블록 중 하나이며 재사용은 시각적 및 기능적 일관성을 유지하는 데 도움이 됩니다. 아이콘 같이 작은 단위도 컴포넌트로 만들어두고 그걸 복사해서 다른 컴포넌트의 일부로 사용합니다. 그럼 어떤 것들을 컴포넌트로 만들어야 할까요? 구글에서 만든 머터리얼 디자인 가이드(Material design guide), IOS에서 만든 휴먼 인터페이스 가이드(Human interface guide), IBM에서 만든 카본 디자인 시스템(Carbon design system)을 참고하시면 됩니다. 아래 이미지를 클릭하면 해당 웹사이트로 이동합니다. 디자인 시..

안녕하세요. 지난 포스팅에선 컴포넌트 속성 중 베리언트 추가 방법에 대해 알아보았습니다. 나머지 속성인 불리언, 인스턴스 스와이프, 텍스트 속성에 대해 이어서 살펴보겠습니다. 다시 한번 정리하자면 Property(프로퍼티) = 속성 = 컴포넌트 자체속성 Variants(베리언츠) = 변형 = 단일 컴포넌트에서 파생된 다양한 컴포넌트를 세트로 묶어서 관리 컴포넌트 자체가 가지고 있는 속성을 프로퍼티라고 합니다. 베리언트는 한 개의 컴포넌트를 (상태, 색상, 크기... 등) 필요에 의해 다양한 컴포넌트로 변형 만들고 세트로 묶어서 관리하는 것을 말합니다. 프로퍼티는 현재 총 4가지가 있습니다. 1. Variant (베리언트) : 컴포넌트의 여러 상태에 따른 종류, 여러 컴포넌트를 세트로 묶음 2. Boole..

안녕하세요. 오토 레이아웃 만드는 방법에 대해서 지난 포스트에서 알려드렸는데요. 이번에는 오토 레이아웃 활용편인 리스트를 만들어 보도록 하겠습니다. 오토 레이아웃을 생성하면 우측 디자인패널에서 오토 레이아웃 속성이 펼쳐집니다. 리스트를 만들려면 가장 최소크기의 한 개의 아이템을 만들어야겠죠? 그 아이템도 오토 레이아웃으로 만들겠습니다. 아래 레이어 구조를 살펴보겠습니다. 1. 이미지+타이틀 : 오토 레이아웃하고 이름 title으로 변경 2. title+시간 텍스트 : 오토 레이아웃하고 이름 item으로 변경 3. item 선택 후 상하 패딩 : 8 / 좌우 패딩 : 21 / 색상 : 흰색 / 코너 라운드 : 20 4. width값을 Hug에서 Fill로 변경 4. 오토 레이아웃 속성 배열값클릭! 단축키 ..