피그마는 매년 컨퍼런스를 통해 최신 기술과 트렌드를 소개하며 디자이너와 개발자들 사이에서 큰 기대를 모으고 있습니다. 이번 2024년 컨퍼런스에서는 여러 가지 주목할 만한 변화와 새로운 기능이 소개되었는데요, 올해 피그마 컨퍼런스에서 어떤 기능이 업데이트되었는지 살펴보겠습니다.
컨퍼런스에서 발표한 3가지 주제 중 1,3번에 해당하는 내용을 정리한 것으로 관련 영상 링크는 하단에 첨부해두었습니다.
- 작업프로세스 간소화 (Reducing complex)
- 더 나은 개발 환경 (Better developer experience)
- 새로운 AI 기능 (AI for Figma Design)
피그마 컨퍼런스 2024
1. 작업프로세스 간소화 (Reducing complex)
패널 리사이징
이전에 width 고정이었던 우측 패널 영역 조절이 가능해졌습니다.
auto layout 추가 (Suggest auto layout)
More layout options > Suggest auto layout을 클릭하면 Frame에 선택된 모든 요소들에 auto layout을 적용할 수 있습니다.
auto layout 제외하기
오토 레이아웃이 적용된 요소 내에 오브젝트 추가 시 ctrl을 누른 상태에서 드래그 앤 드롭 시 오토 레이아웃이 자동 적용되는 것을 막을 수 있습니다.
에셋 패널 (Improved Asset Panel)
좌측 Asset 패널에서 Material 3와 같은 UI kit를 확인할 수 있으며 kit 상세로 들어가 다양한 UI 요소들을 끌어와 쓸 수 있습니다.
※ 진행 중인 개발
Workspace 연결 (connect workspaces)
클라이언트와 함께 일하는 프리랜서 및 대행사의 경우 팀에 외부인을 추가할 때 추가 비용이 발생하는 문제를 해결하기 위해 workspace를 연결할 수 있도록 (코드 연결 포함)
Project 이전 (transfer projects)
에이전시 -> 클라이언트로 전달하는 프로젝트 이슈 관련
관리자 설정 (Admin controls)
좌측 : 업그레이드 사항에 대한 이메일 알림주기를 선택
우측 : 업그레이드를 위해 관리자 승인을 다르게 설정 가능 (수동 업그레이드 설정)
3. 새로운 AI 기능 (AI for Figma Design)
하단 툴바 > 스파클 아이콘을 클릭하여 여러 기능을 수행할 수 있습니다.
1. 디자인 초안 제작 (Make Designs)
'Make Designs' 를 선택해 프롬포트를 작성하며 이를 토대로 AI가 Auto-layout이 적용된 디자인 초안을 자동으로 만들어 줍니다.
생성된 초안 디자인에서의 폰트 크기 및 색상, 간격, radius 등 디자인 UI 요소를 직접 수정할 수 있습니다.
2. 동일하거나 비슷한 화면 찾기 (search for similar)
'search for similar' 메뉴를 선택해 유사한 화면 디자인, 아이콘 등을 검색할 수 있습니다. 파일 또는 페이지 위치를 알지 못할 때 효과적입니다.
2-1. 화면(frame)
- 가지고 있는 화면 이미지를 활용해 검색하면 해당 화면을 찾을 수 있습니다.
- 화면에 포함된 문장 또는 단어를 프롬포트에 입력 및 검색하여 화면을 찾을 수 있습니다.
2-2. 아이콘
component 필터을 이용해 피그마 파일에 저장된 해당 아이콘을 불러올 수 있습니다.
2-3. 커뮤니티
figma 커뮤니티 내 디자인 화면들을 찾고 가져올 수 있습니다.
3. 콘텐츠 바꾸기 (Replace Content)
3-1. 콘텐츠 바꾸기 (Replace content)
아래 화면에서 레이어 선택 후 'Replace content'를 클릭하면 원본 콘텐츠과 유사한 내용으로 교체되는 것을 확인할 수 있습니다.
auto layout 끝을 잡고 길게 드래그하면 자동으로 콘텐츠를 채워주기도 합니다.
3-2. 텍스트 재작성하기 (Rewrite text)
4. 이미지 생성 (Make an image)
5. 이미지 배경 제거 (Remove background)
6. 레이어 이름 정리(Rename layers)
'Rename layers' 메뉴를 선택해 화면에 포함된 많은 레이어들의 이름을 한 번에 정리할 수 있습니다.
7. 다국어 번역 (Remove background)
다양한 언어로 번역할 수 있습니다. 여러 언어를 지원하는 디자인 작업 시 각 언어의 길이, 형태를 고려하여 디자인을 진행할 수 있습니다.
8. 프로토타입 자동 연결 (Make prototype)
연결하고 싶은 화면들을 선택해 역시 같은 아이콘을 선택한 후 'Make Prototype' 을 선택하면 AI가 자동으로 프로토타이핑을 진행합니다.
+ 프로토타이핑 된 화면을 미리보기로 반응형 체크가 가능합니다.
출처 : https://www.youtube.com/watch?v=n5gJgkO2Dg0&list=PLXDU_eVOJTx6mJpwG0duv0ZZI3aQppm6S