brunch

You can make anything
by writing

C.S.Lewis

by Duotone 듀오톤 Jun 27. 2024

2024 피그마 업데이트 핵심 정리

Config 2024, AI 도입부터 Figma Slide까지

6월 26일부터 27일까지, 디자인 분야의 핵심 이벤트라고 할 수 있는 피그마 컨퍼런스 ‘Config 2024’가 모스콘 센터에서 열렸습니다. 이번 행사에서는 피그마가 무엇을 업데이트했고, 이것이 디자인 사회와 디자이너들에게 어떤 영향을 미칠지 빠르게 살펴보겠습니다.


1. 피그마 AI 시대가 도래했습니다.

출처 : 피그마 홈페이지

이번 피그마 컨퍼런스에서 가장 많이 호응을 받은 기능은 역시 AI였습니다. 굉장히 다양한 기능이 탑재된 만큼, 어떤 기능이 업데이트되었는지 확인할 필요가 있습니다.  

    디자인 초안 제작 : 텍스트 프롬프트만 입력하면 AI로 디자인 초안을 만들 수 있습니다. 원하는 디자인을 프롬프트로 입력하면 피그마가 자동으로 디자인을 생성합니다. 생성된 디자인의 폰트와 색상, 간격까지 커스텀이 가능합니다.  

    프로토타입 만들기 : 프로토타입으로 연결하고 싶은 프레임을 선택해서 기능을 실행하면 피그마가 프로토타입을 자동으로 연결해 줍니다.  

    레이어 이름 변경 : 클릭 한 번으로 모든 레이어에 의미 있는 이름을 지정하여 파일을 정리해 줍니다. 항상 ‘레이어 정리’를 외치던 대표님이 어디선가 웃고 계신 것 같네요.  

    이미지 생성 및 배경 제거 : 프롬프트를 입력하면 피그마가 이미지를 생성해 줍니다. 배경이 있는 이미지는 자동으로 배경을 지워줍니다.

    텍스트 다시 쓰기 : AI가 텍스트를 새로 작성합니다. 텍스트를 다른 어조로 다시 쓰고, 다른 언어로 번역하고, 디자인에 맞게 텍스트를 줄여주기도 합니다.  

AI 관련 기능은 2024년 베타 기간 동안 무료로 제공된다고 합니다. 사용 제한을 도입할 수도 있으며, AI 기능 정식 출시 때 가격에 대한 지침이 제공될 예정입니다.


2. 재설계된 피그마! UI3 출시

출처 : 피그마 홈페이지

피그마의 UI가 완전히 바뀌었습니다. 주요 기능의 패널 디자인, 버튼 위치 등이 바뀌었고, 각종 패널은 여백이 생겨 마치 공중에 떠 있는 듯 표현되어 있습니다.  

    툴바 위치 변경 : 상단에 있던 툴바가 하단 플로팅 위치로 내려왔습니다.  

    우측 패널 넓이 조절 가능 : 고정값이던 우측 패널의 넓이를 왼쪽 레이어 패널처럼 조절이 가능해졌습니다.  

피그마 측에서는 UI3의 특징으로 몰입할 수 있는 캔버스, 구성요소 중심 UI, 새로운 아이콘 세트를 내세우고 있습니다. 다만 사용자가 적응할 수 있는 시간을 주기 위해 천천히 배포할 예정이라고 합니다.


3. 드디어 나왔다! 피그마 슬라이드(Figma Slide)

출처 : 피그마 홈페이지

26일 아침, 갑자기 나타났다 사라져 디자이너들을 놀라게 한 기능이 있습니다. 바로 ‘피그마 슬라이드’가 이번 Config를 통해 공개되었습니다. 작년 한 해, 피그마로 만들어진 Slide 문서만 350만 개라고 하니, 이제 나온 것이 다소 늦은 감도 드네요.

쉽게 팀원들과 협업이 가능하고, 피그마에서 제작한 대화형 프로토타입을 직접 삽입할 수도 있습니다. 무료 베타 버전으로 제공되며, 25년 초부터 유저당 월 3달러, 5달러 유료 요금제로 제공될 예정이라고 합니다.


4. 개발 모드(Dev mode) 업데이트

Config 2023에서 도입된 개발 모드(Dev mode)가 올해 업데이트 되었습니다. 디자인 프로세스를 더욱 효과적으로 지원하고, 개발 워크플로우의 속도를 높이며 디자인과 코드가 더욱 한 마음 한 뜻으로 움직일 수 있도록 업데이트를 진행했다고 합니다.  

    Ready for Dev : 수백 가지의 디자인 중 개발자가 작업해야 할 내용을 찾기 어려울 수 있죠. 해당 기능을 통해 개발자는 누가 무엇을 언제 업데이트했는지 확인할 수 있습니다.  

    포커스 뷰(Focus view) : Ready for Dev가 적용된 레이어만 모아서 볼 수 있습니다. 개발 완료된 디자인을 ‘Completed’ 처리하여 히스토리에 남길 수 있습니다.  

    코드 커넥트(Code Connect) : 디자인 시스템 컴포넌트 코드를 개발 모드(Dev mode)로 직접 가져와 화면상에서 볼 수 있습니다.  


5. 극강의 편리함 : 오토 레이아웃 업데이트 & UI 키트

    프로토타이핑 뷰어의 크기가 반응에 따라 조정됩니다. 화면 넓이 변화에 따라 바뀌는 반응형 디자인을 프로토타이핑 단계에서 확인할 수 있습니다.  

    UI 디자인에 사용할 수 있는 디자인 키트가 업데이트되었습니다. 아래 3가지 키트가 추가되었습니다. 

  (1) Apple iOS and iPadOS 18 

  (2) Google Material 3 Design Kit 

  (3) Figma Simple Design System            


이제 피그마는 프로덕트 디자인에서 대체 불가능한 툴로 확고히 자리를 잡아가는 것 같습니다.

피그마를 실무에서 제대로 활용하기 위해서는 실무 기반의 학습부터 실제 적용까지의 과정이 필요합니다.


지금 오픈패스의 피그마 패키지와 함께 기업 실무에 피그마를 도입해 보세요. 차원이 다른 업무 효율성이 여러분을 기다립니다.

https://openpath.kr/business


매거진의 이전글 디지털 정부 UI/UX 가이드라인, KRDS 살펴보기
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari