[GDG on Campus] Figma Study

Mento of Week 5：지환, 성희, 재현, 희정Mentee of Week 5： 효정, 가은, 소연, 리사 ✏️그래프 애니메이션 - 효정✏️그래프가 움직이는 것을 표현하고자 할 때 활용합니다.  각 컴포넌트가 어떻게 움직일지를 생각한 후에, 과정에 따른 그래프를 각각 그려줍니다. 프로토타입을 설정하여 줄 때, Interaction은... * After delay* 50ms* Change to* 다음 컴포넌트* Smart animate* Ease out 으로 설정하여 줍니다. 맨 마지막 컴포넌트는 첫번째 컴포넌트에 동일한 Interaction 값으로 설정한 후 연결합니다. 다이나믹하게 움직이는 그래프가 완성된 것을 볼 수 있습니다. ✏️앱솔루트 포지션 적용해보기 - 가은✏️ 1. 어떤 기능인가요?오토..

Mento of Week 4：효정, 가은, 소연, 리사Mentee of Week 4： 지환, 성희, 재현, 희정 ✏️드롭다운 메뉴 - 성희✏️1. 어디에 활용하나요?드롭다운 메뉴는 사용자가 여러 개의 옵션 중에서 하나를 선택해야 하는 상황에서 주로 활용되어요. 1. 화면 공간이 제한적인 상황에서 사용➡️드롭다운은 버튼 형태로서 기본적으로 한 줄만 차지하고, 클릭 했을 시에만 옵션 리스트가 열리므로 공간을 효율적으로 활용 가능해요. 2. 선택 항목이 많을 때➡️5-20개 정도의 옵션이 있을 때 적합해요. 라디오버튼이나 체크박스보다 드롭다운을 사용하면 리스트를 깔끔하게 숨길 수 있어요. 3. 사용자가 한 번만 선택해야 하는 항목➡️주로 한 번 선택한 뒤 더 이상 변경하지 않는 항목에 적합해요. 지속적인 상..

Mento of Week 2：지환, 성희, 재현, 희정Mentee of Week 2： 효정, 가은, 소연, 리사✏️로딩 애니메이션 만들기 - 효정✏️1. 어디에 활용하나요? 서비스가 시작할 때 보이는 로딩화면 등을 구현할 때 활용합니다.  2. 적용 방법 위와 같이 원 네 개를 만듭니다.   프레임 안의 eclipse 를 45도 회전합니다. 이때, 반드시 프레임이 아닌 eclipse 를 회전해야 합니다.  모든 원을 45도씩 회전시킵니다. 각 원을 컴포넌트화 시킵니다.  각 개체를 베리언츠로 만들어 줍니다. 이제 액션을 구현해 줄 건데, 위의 그림과 같이 각 원을 연결해 줍니다. 마지막 원은 첫번째 원에 연결시켜 줍니다. 인터렉션 디테일에서 After delay, Smart animate를 각각 선택해 ..

Mento of Week 2：효정, 가은, 소연, 리사Mentee of Week 2： 지환, 은재, 재현, 성희, 희정이미지 확대해서 보는 UI 만들기 - 지환✏️1. 이 기능은 주로 어디에서 쓰이나요?   네이버 쇼핑몰처럼 이미지의 일부분을 확대해 주는 UI가 필요한 상황에 주로 쓰인다.2.  적용 방법  배경이 들어가는 프레임에 인터랙션이 생길 컴포넌트를 생성해 준다. 이 예시에서는 좌측에 원래 축소 이미지가 있고 우측에 확대된 이미지가 생길 것이다.  전 단계에서 만든 컴포넌트의 Variant를 형성해 준다. Variant는 우클릭 Main component에 들어가면 Add Variant를 선택하면 된다. 이제 Componet4의 추가 Variant를 만든다. 좌측에 확대된 부분을 표시해 주는 정..

Mento of Week 1：성희 Mentee of Week 1：리사, 재현, 은재, 지환, 소연, 가은, 효정✏️스터디 진행 세부 내용 안내✏️1. 어떤 자료를 활용하나요?           바쁘다 바빠 현대사회! 과제하랴, 대외활동하랴, 기타 등등 바쁘신 여러분들을 위해 아주 좋은 자료를 찾아왔습니다! 바로 피그마 튜터 님의 예제 자료들인데요, 피그마 튜터 님이 업로드해주신 예제 리소스들을 맨 밑에서 부터 하나씩 도장깨기하며 인터랙션의 감을 잡아봅시다! https://www.figma.com/@figma_tutor 여기에서 예제들을 확인할 수 있습니다! 2. 스터디의 진행 방식이 어떻게 되는지 아직 잘 모르겠어요! 멘토와 멘티 매칭 시스템총 8명의 멤버로 이루어진 피그마 스터디는, 1:1 멘토 멘티 ..

🙌피그마의 핵심 기능인 컴포넌트를 활용하여 프로토타입 인터랙티브 애니메이션 마스터가 되자🙌             피그마 스터디에 참여해주신 멤버들 모두를 환영합니다! 우리 스터디의 목표는 피그마의 컴포넌트 기능을 활용하여 프로토타입에 적용할 인터랙티브 애니메이션 마스터가 되는 것입니다 💪💪 단순히 그래픽으로만 나타나는 유저 인터페이스 뿐만 아니라, 상호작용 요소들은 사용자 경험을 극대화하는 핵심 요소들입니다. 이번 스터디를 통해 그 과정에 필요한 기술을 하나하나 배워보고자 합니다 👍 🤔 왜 프로토타입 애니메이션을 만들어야 하나요?            피그마의 컴포넌트 기능은 반복적인 디자인 요소를 효율적으로 관리할 수 있게 해줍니다. 이를 통해 디자인의 변경 사항을 쉽게 반영하여 수정함은 물론..