UI3 인터페이스
피그마 UI3 인터페이스 일부
새 UI 버전인 UI3가 적용되면서 인터페이스에 큰 변화가 있었습니다. 주요 기능의 패널 디자인이나 버튼의 위치 등이 바뀌었기 때문에 꼭 확인하세요! 아이콘의 디자인도 전체적으로 바뀌었네요.
디자인 모드 UI 변화
기존 피그마 인터페이스
UI3가 적용된 새로운 인터페이스
Dev 모드 UI 변화
기존 피그마 Dev 모드
UI3가 작용된 Dev mode
툴바 위치 변경
상단에 위치하던 Tool bar가 하단 플로팅 위치로 내려왔습니다. 기존 Tool과 Dev mode 버튼의 위치가 아래로 이동했고, 프로토타이핑 버튼과 Share 버튼은 오른쪽 패널 상단에 붙었습니다.
아래로 내려온 UI3의 Tool bar ( 무브(스케일) / 프레임 / 도형 / 텍스트 / 코멘트 / 액션(New) / 모드 변환 토글)
기존 피그마의 Toolbar
우측 패널 넓이 조절 가능
고정값이던 우측 패널의 넓이를 기존 왼쪽 레이어 패널처럼 늘렸다 줄였다 할 수 있게 되었습니다.
늘어나는 우측 패널의 모습
패널 내 자잘한 인터페이스 변경
오토레이웃에서 클립 콘텐츠의 설정 위치가 오토레이웃 패널 안으로 이동했습니다. (기존에는 오토레이웃 클립콘텐츠도 Frame 패널에 있었습니다.) 그리고 체크박스이던 클립콘텐츠가 드롭다운 형태로 바뀌었습니다. 그외 자잘한 위치들이나 모양이 조금씩 바뀌었으니 살펴보시면 좋을 것 같습니다.
UI3가 적용된 디자인 패널의 모습
프로토타입 내부 콘텐츠 넓이 조절
프로토타이핑에서 뷰화면의 넓이를 조절하면 내부 콘텐츠의 넓이에도 영향을 주게 되었습니다. 이제 화면 넓이 변화에 따라 바뀌는 반응형 디자인도 프로토타이핑에서 확인이 가능하게 되었습니다.
커서를 뷰 화면 가장자리에 가져가서 늘리거나 줄일 수 있습니다.
오토레이아웃 업데이트
오토레이아웃 제안 기능
오토레이아웃 내에 배열을 자동으로 인식해서 정리해주는 기능입니다. 오토레이아웃을 우클릭해서 More layout option > Suggest auto layout 해주면 됩니다. 아직 아주 복잡한 구조의 오토레이아웃보다는 간단한 구조에 잘 적용된다고 합니다.
객체를 넣으며 앱솔루트 포지션 적용
외부 객체를 오토레이아웃이 적용된 프레임에 넣을때 Ctrl(Cmd)키를 누르면서 넣으면 앱솔루트 포지션이 적용된 채로 객체 안으로 옮겨집니다.
UI 디자인 키트
UI 디자인에 사용할 수 있는 디자인 키트가 피그마에 탑재되었습니다. 왼쪽 패널의 Asset 탭에서 추가해서 사용할 수 있습니다. 추가된 키트는 3가지 입니다.
1.
iOS and iPadOS 18 by Apple
2.
Material 3 Design Kit by Google
3.
Simple Design System by Figma
우측 패널에서 키드를 추가하는 모습
적용된 키트는 우측 디자인 패널에서 모드를 바꿔 적용해가며 사용할 수도 있습니다.
AI 기능 탑재
가장 많은 호응을 받은 AI 기능입니다. 다양한 기능이 탑재 되었습니다. 툴바의 액션툴(별모양 아이콘)에서 기능을 사용할 수 있습니다.
Make Design
프롬프트에 생성하고 싶은 디자인의 설명을 입력하면 피그마가 자동으로 디자인을 생성해줍니다. 생성 완료된 디자인도 프레임 클릭 후 추가로 만들고 싶은 내용을 프롬프트로 입력하면 추가됩니다. 생성된 디자인의 폰트, 색상, 간격 등도 커스텀 할 수 있습니다.
설명을 입력하는 프롬프터의 모습
Make Prototype
프롬프트에 생성하고 싶은 디자인의 설명을 입력하면 피그마가 자동으로 디자인을 생성해줍니다. 프로토타입으로 연결하고 싶은 프레임들을 모두 선택해서 기능을 실행하면 AI가 디자인화면을 보고 대략적은 프로토타입을 생성해줍니다.
AI가 만들어준 프로토타이핑
Rename layers
AI가 레이어의 이름을 바꿔주는 기능입니다.
왼쪽 레이어를 AI가 오른쪽으로 새로 이름을 작성해 주었습니다.
Replace Contents
AI가 디자인을 인식해서 콘텐츠를 생성해줍니다. 일종의 더미 콘텐츠를 AI가 만들어주는 기능입니다. 추가로 콘텐츠를 생성하고 싶은 부분을 선택해서 실행하면 콘텐츠를 만들어줍니다.
Translate to
AI가 선택한 프레임 내에 텍스트를 선택한 언어로 번역해줍니다.
Remove background & Make an Images
AI가 배경이 있는 이미지의 배경을 지워주고, 이미지를 생성해줍니다.
Rewrite this… & Shorten
AI가 텍스트를 새로 작성해줍니다. 프롬프트에 작성한 문체나 분위기에 맞춰 글을 새로 써주거나, 요약이나 텍스트 늘리기 등을 보조해줍니다.
AI에게 프롬프트로 텍스트 수정을 요청하는 모습
AI 학습에 관해서
현재 피그마의 AI는 디자인 시스템을 구축하는 방식으로 학습이 진행되었고, 디자인을 만들고 있다고 합니다. 디자인 컨셉을 잘 이해하고 피그마에서 잘 적용되도록 계속 공부시키는 중이라고 합니다. 이 과정에서 피그마에 작업된 화면들을 학습한다고 하는데요. 내 디자인이 AI 학습에 사용되는 것을 원치 않을 경우 on/off 설정을 할 수 있습니다.
Search for Similar
새로 탑재된 AI 기능 중 하나로 피그마 파일들과 커뮤니티를 쉽게 검색할 수 있는 기능입니다.
이미지로 비슷한 디자인 찾기
이미지를 선택해서 기능을 실행하면 피그마 파일들에서 비슷한, 활용할만한 디자인을 찾아줍니다.
텍스트로 비슷한 디자인 찾기
디자인 내 쓰인 문장이나 텍스를 입력 후 기능을 실행하면 피그마 파일들에서 비슷한, 활용할만한 디자인을 찾아줍니다.
그림(펜슬툴)로 비슷한 디자인 찾기
펜슬툴로 그린 디자인을 선택해서 기능을 실행하면 피그마 파일들에서 비슷한, 활용할만한 디자인을 찾아줍니다.
커뮤니티에서 디자인 찾기
검색창에 원하는 디자인의 키워드를 입력하고 검색하면 커뮤니티에서 디자인을 찾아줍니다.
Dev mode 업데이트
Ready for dev view
Ready for Dev가 적용된 레이어만 모아서 볼 수 있는 기능으로 다른 디자인들이 안보이기 때문에 개발에 좀 더 집중할 수 있게 도와줍니다. 개발 완료된 디자인을 Completed 처리하면 히스토리에 완료처리한 사람을 남겨줍니다. (오거니제이션 요금제 이상 지원)
Focus view
캔버스에서 선택한 프레임만 볼 수 있도록 해주는 기능
Status updates
Ready for dev를 설정한 이후 수정되었을 때, Ready for dev 마크가 노란색으로 변경됩니다. 마크를 클릭해 변경 사항에 대한 디스크립션을 확인하실수 있습니다.
Changes made
Ready for Dev를 적용했던 프레임의 디자인이 수정되면 수정사항을 적을 수 있는 인풋창이 생성됩니다.
Code Connect
현재 Beta 버전인 코드 커넥트 피그마 컴포넌트와 코드를 연결하는 기능으로, Organization 및 Enterprise 플랜 사용자를 대상으로 제공됩니다. Code Connect를 사용하면 디자인 시스템 컴포넌트 코드를 Figma의 Dev Mode로 직접 가져와 화면상에서 볼 수 있습니다. 아직까지는 많은 언어를 대응하지는 않습니다.
컴포넌트 우클릭 Link to selection 해서 복사 하고 코드 에디터에서 figma.connect+링크를 넣으면 코드와 피그마 컴포넌트가 연결됩니다.
Figma Slide
피그마 슬라이드 화면 모습
26일 아침 깜짝 공개되었다 오후에 사라져버린 기능인 Figma Slide가 Config에서 소개되었습니다. 피그마로 작년 한해 만들어진 Slide 문서만 3.5M개라고 합니다. 피그마가 슬라이드 기능을 만들 이유가 충분하네요. 템플릿을 선택하거나 피그마 기능들로 디자인해서 보다 전문적인 프레젠테이션 문서를 만들 수 있습니다.
프로토타입 삽입
피그마 슬라이드에는 피그마에서 만든 프로토타입을 삽입 및 재생 시킬 수 있어 더욱 풍부한 자료를 만들 수 있습니다.
Template Style
여러명이 디자인한 혹은 여러 템플릿에서 가져와서 통일성이 없는 슬라이드을 선택해서 스타일을 지정하면 슬라이드 무드에 맞게 장표 디자인이 수정됩니다.
Grid view
그리드 형태로 슬라이드들을 펼쳐서 보는 모드로 슬라이드의 전체 흐름을 보면서 줄끼리 혹은 장표끼리 빠르게 위치를 바꿔 완성도 있는 발표흐름을 구성하는데 도움을 주는 기능입니다.
Adjust tone
슬라이드 내의 텍스트의 톤을 맞춰주는 기능으로 문체나 길이 등의 정리에 도움을 줍니다. 슬라이드 선택 후 우측 패널 별아이콘(AI 아이콘)을 클릭해서 사용할 수 있습니다. 다이얼을 끌고 당기는 형태로 사용합니다.
Live interaction
툴바의 6번째 tool(손가락 모양)로 슬라이드 안에 투표(Live poll)와 같은 실시간 소통 에셋을 넣어서 슬라이드를 구성할 수 있습니다.
피그마 슬라이드 기능은 한시적으로 무료로 제공하다 이 후 월 5불 정도 추가로 사용할 수 있게 할 계획이라고 합니다.
기타 기능
spotlight가 활성화된 모습
spotlight 기능이 업그레이드 되었습니다. 이제 상대가 나를 soptlight 하는 것을 거절할 수 있습니다. 그리고 spotlight가 활성화 되면 주변 인터페이스는 사라지고 캔버스 내 화면만 남게됩니다. 상단 stop following로 종료할 수 있습니다.
Connect Workspaces
이번 컨피그에서 피그마는 Billing과 Share에 대해 꾸준히 고민하고 있다고 밝혔습니다.
그러면서 Connect workspace라는 미개발 기능에 대해 알려주었습니다. 팀이 아닌 외부 사용자(클라이언트, 프리랜서 등)와 팀에 소속되지 않아도 워크스페이스를 공유하는 방식이라고 합니다.
6개월에서 12개월 정도 더 개발하고 연구해 정식 출시를 준비한다고 합니다.
