다시 태어난 Figma, Config 2024 주요 리뷰

---

완전히 새로워진 피그마, UI3

출처 : Figma Youtube

피그마는 출시한 지 약 8년이 된 디자인 도구입니다. 2016년에 출시되어 천천히 시장을 장악했고, 2022년 기준으로 80% 이상의 시장 점유율을 달성하는 동안 피그마 인터페이스 자체에는 큰 변화가 없었습니다. 그러나 이번 Config 2024에서 완전히 새로워진 피그마 인터페이스, UI3를 공개했습니다.

새로운 피그마 인터페이스: UI3

UI 최소화 기능

출처 : Figma Youtube

UI3의 새로운 기능 중 하나는 좌측 패널 우상단의 아이콘을 눌러 최소화할 수 있는 기능입니다. 기존 버전에서는 화면을 더 여유롭게 보기 위해 UI 가리기를 사용했지만, 필요한 기능을 쓰려면 다시 UI를 노출해야 하는 단점이 있었습니다. UI3의 UI 최소화 기능은 이전보다 더 자연스러우면서 작업의 연속성을 잃지 않도록 도와줍니다.

텍스트 필드 개선

피그마 인터페이스 내의 텍스트 필드 영역들도 아웃라인만 있는 타입에서 연한 회색이 깔린 솔리드 타입으로 교체되었습니다. 기존 UI보다 입력 어포던스가 더 명확해졌습니다. 또한, 인터페이스의 레이아웃뿐만 아니라 디자인 패널들의 전체적인 우선순위와 기능 간의 맥락을 고려해 완전히 새로워졌습니다.

프로퍼티 패널 위치 변경

컴포넌트를 선택했을 때 활성화되는 프로퍼티 패널은 디자인 우선순위를 고려해 우측 중단에서 상단으로 자리를 옮겼습니다. 또한 프레임 및 레이아웃 요소로 취급받았던 너비(w)나 높이(h) 속성도 오토레이아웃으로 자리를 옮겼습니다. 프레임 패널에서 Fixed, Hug, Fill 등 오토레이아웃 프레임의 리사이징 속성을 조정했던 것과는 달리, 이제는 오토레이아웃 패널 안에서 같은 맥락을 공유하는 기능들을 종합적으로 사용할 수 있습니다. 패널의 크기도 자유롭게 조정할 수 있습니다.

한층 더 똑똑해진 오토레이아웃

피그마의 꽃, 오토레이아웃이 한층 더 강력해집니다. 이제는 추천 오토레이아웃(Suggest auto layout) 기능을 통해 복잡한 구조를 한 번에 만들 수 있게 됩니다. 또한, 오토레이아웃 기능 자체가 프레임 내부의 맥락을 이해하게 됩니다. 프레임 내부에 오토레이아웃 컨테이너를 배치할 때 사용자의 의도를 파악해 너비 전체에 꽉 차도록 자동으로 리사이징 속성을 Fill로 변경해 줍니다. 오토레이아웃을 무시하고 위치 절댓값(Absolute Position)으로 삽입하거나, 전체 프레임 내부의 콘텐츠를 오토레이아웃으로 자동 정리해 줄 수 있습니다.

글로벌 UI 키트와 코드 스니펫 개선

UI 키트 제공

피그마는 애플의 UI 키트, 구글 머티리얼 디자인(Material Design), 피그마 디자인 시스템 등 3가지 UI 키트를 기본으로 제공합니다. 기본적으로 각 키트가 가지고 있는 테마나 반응형에 대한 속성도 미리 지정되어 있어서, 다크 모드로 전환하거나 해상도를 늘려도 큰 수정 없이 바로 디자인을 변경할 수 있습니다.

코드 스니펫 통합

기본 UI 키트의 모든 컴포넌트는 바로 개발에 활용할 수 있도록 코드 스니펫이 준비되어 있습니다. 이는 디자인-개발의 비용을 획기적으로 줄이고, 검증과 리서치에 더 많은 시간을 쏟을 수 있게 합니다.

피그마 커넥트

피그마 팀스페이스를 연결하는 ‘피그마 커넥트(Figma Connect)’ 기능을 선보입니다. 각 스페이스에서 파일을 주고받을 수 있으며, 이 기능은 2025년 초에 공개될 예정입니다.

Dev mode 개선

데브 모드는 작년 Config 2023에서 공개된 이후, 디자이너와 개발자 간의 커뮤니케이션을 매우 효율적으로 바꿔줬습니다. 이번 Config 2024에서는 생산성을 더 극대화하고, 디자이너와 개발자가 서로의 관점을 더 잘 이해할 수 있는 협업 시스템 구축에 집중했습니다.

주요 기능 개선

• Mark as ready for dev: 디자인이 완료된 프레임을 표시해, 개발자가 봐야 하는 디자인을 한 번에 파악할 수 있습니다.
• Edited 상태 값 추가: 프레임에 변경된 점이 있음을 알리고, 상태 값을 바꿀 때 메모를 남길 수 있습니다.
• Focus View: Ready for dev 화면을 더 집중적으로 개발자가 체크할 수 있는 기능이 추가됩니다.
• 프로토타입 편의 기능: 프로토타입 창을 좌우로 조정해 실시간으로 반응형 디자인을 확인할 수 있습니다.
• Mark as completed: Ready for dev 상태를 해제하고, 개발이 완료되었음을 알림으로 통지합니다.
• 코드 커넥트: 코드 에디터에서 컴포넌트 코드를 작성하고 피그마의 해당 컴포넌트와 연결할 수 있는 기능이 강화됩니다.

이번 업데이트를 통해 피그마가 단순히 디자인 도구가 아닌 제품 협업 도구로 한 걸음 더 진화한 것을 알 수 있었습니다. 데브 모드 개선 사항 및 UI3는 Config 2024 직후부터 차례대로 적용될 예정입니다.

---

최고의 디자인 동료, Figma AI

피그마(Figma)는 인공지능(AI)을 결합해 생산성을 올리려는 시도를 끊임없이 이어왔습니다. 다양한 플러그인을 통해 와이어프레임 제작, 스켈레톤 UI 제작, UX Writing 등 UX/UI에서 활용할 수 있는 모든 기능들이 포함되었습니다. 이번에는 피그마의 새로운 기능, Figma AI에 대해 살펴보겠습니다.

Figma AI의 주요 기능

1. Make Design

Figma AI의 가장 주목받는 기능은 '메이크 디자인(Make Design)'입니다. 프롬프트를 입력하면 디자인을 생성해 주는 생성형 인공지능으로, 피그마와 UI에 특화된 기능입니다. 오토레이아웃과 레이어 이름까지 모두 정리되어 있으며, 이미지 생성까지 자동으로 처리합니다. 이후 업데이트로 디자인 시스템 컴포넌트를 활용한 디자인 생성도 계획 중입니다.

2. Search Design

디자인 파일이 많이 쌓이면 원하는 화면을 찾기 어려울 때가 많습니다. 'Search for similar' 기능은 이미지와 가장 유사한 프레임을 찾아주며, 프레임 이름, 디자인 안의 문구 등을 통해 검색할 수도 있습니다. 커뮤니티 파일의 프레임을 바로 디자인에 활용할 수도 있습니다.

3. Write & Support

텍스트 번역, 자동 텍스트 생성, 텍스트 교정 등 다양한 텍스트 작업을 지원합니다. 또한, 이미지 배경 제거 기능과 'Rename Layer' 기능을 통해 레이어 이름을 자동으로 지정해줍니다. 네이밍 컨벤션 이해를 바탕으로 보조적으로 사용하는 것이 바람직합니다.

4. Prototyping

피그마의 프로토타이핑 기능은 자동화를 통해 단순하지만 필요한 프로토타입을 쉽게 만들 수 있습니다. '메이크 프로토타입(Make Prototype)' 기능은 화면들의 관계를 자동으로 판단하고 연결해줍니다. 또한, 'Replace Content' 기능을 통해 반복되는 UI의 텍스트를 자동으로 채워줍니다.

인공지능 학습에 대한 우려

피그마 AI는 사용자의 디자인을 학습해 다른 사람에게 인사이트를 제공할 수 있습니다. 대외비 정보가 유출될 위험도 있으므로, 민감 정보를 제거한 후 디자인을 학습시키는 방안을 마련했습니다. 사용자는 자신의 디자인을 학습하게 할지 선택할 수 있습니다.

피그마 AI의 출시가 잠시 보류되었지만, 향후 재출시를 기대할 수 있습니다. 이번 Config 2024는 인공지능 디자인 동료의 등장을 알리는 중요한 행사였습니다.

---

피그마(Figma)의 혁신적인 도약: 피그마 슬라이드(Figma Slides)

피그마는 원래 디자이너를 위한 도구로 널리 알려져 있지만, 이제는 프레젠테이션 슬라이드 제작에서도 그 유용성을 인정받고 있습니다. 이번 Config 2024 기조연설에서 소개된 피그마 슬라이드는 이러한 배경 속에서 탄생한 제품으로, 기존 UI 제작 도구의 한계를 넘어 프레젠테이션 도구로서의 가능성을 보여주었습니다.

피그마 슬라이드의 주요 기능

1. 자동 색상 조정

피그마 슬라이드는 배경색을 밝은색에서 어두운색으로 변경하면 글자 색상도 자동으로 조정됩니다. 이는 사용자가 일일이 글자 색상을 변경할 필요 없이, 배경과 글자의 조화를 자동으로 맞춰줍니다.

2. 슬라이드 순서 조정

피그마 슬라이드에서는 드래그 앤 드롭 방식으로 슬라이드의 순서를 자유롭게 변경할 수 있습니다. 이는 직관적인 인터페이스를 통해 사용자가 손쉽게 슬라이드 순서를 조정할 수 있도록 도와줍니다.

3. 테마 적용

파워포인트와 유사하게 피그마 슬라이드에서도 다양한 테마를 적용하여 프레젠테이션의 디자인 컨셉을 빠르게 바꿀 수 있습니다. 이는 사용자가 원하는 스타일에 맞춰 프레젠테이션을 더욱 세련되게 꾸밀 수 있게 해줍니다.

4. 스마트 애니메이트 기능

피그마 디자인에서 사용하던 스마트 애니메이트 기능을 그대로 사용할 수 있어, 자연스러운 슬라이드 전환 효과를 만들 수 있습니다. 이는 프레젠테이션의 시각적 효과를 극대화하는 데 큰 도움이 됩니다.

5. 인공지능 결합

피그마 슬라이드는 피그마 AI와의 결합을 통해 텍스트 재작성, 톤 조정 등의 기능을 제공합니다. 이는 프레젠테이션의 내용을 더욱 다듬고, 스타일을 조정하는 데 유용합니다.

6. 프로토타입 내장

피그마 디자인에서 만든 프로토타입 링크를 슬라이드에 내장하여, 프레젠테이션 중에도 실시간으로 조작할 수 있습니다. 이는 프레젠테이션의 역동성을 높여줍니다.

7. 라이브 폴(Live Poll) 기능

실시간으로 참여자들에게 투표나 선호도를 받을 수 있는 라이브 폴 기능을 통해, 단순한 프레젠테이션이 아닌 실시간 상호작용을 할 수 있습니다.

피그마 슬라이드의 향후 계획

피그마 슬라이드는 2025년 초까지 무료로 제공되며, 이후 무료 플랜에서는 최대 3개 파일까지 사용할 수 있습니다. 프로 플랜은 인당 월 $3, 그 이상은 인당 월 $5로 제공될 예정입니다. Config 2024 직후 업데이트로 바로 사용할 수 있으니, 관심 있는 분들은 무료 전환 전까지 사용해보는 것을 추천합니다.

결론

피그마 슬라이드는 기존의 피그마 디자인과 피그잼의 강력한 기능을 결합한 혁신적인 도구로, 프레젠테이션 제작의 새로운 표준을 제시합니다. 디자이너뿐만 아니라 다양한 사용자들이 유입될 것으로 기대되며, 앞으로 피그마 슬라이드를 통해 더욱 다양한 프레젠테이션이 선보일 것입니다. Config 2024에서 피그마는 그야말로 협업의 생산성을 극대화하려는 시도를 보여줬고, 앞으로의 업데이트가 더욱 기대됩니다.