figma-sites

5 개의 포스트

figma

Config 2025의 비 (새 탭에서 열림)

Figma는 Config 2025의 브랜드를 고정된 스타일이 아니라 다양한 매체와 상황에 유연하게 적용되는 시각 시스템으로 설계했다. 기본 도형에서 출발한 애니메이션 글리프와 컴포넌트 라이브러리를 활용해 컨퍼런스의 주제인 창작, 표현, 변화, 적응성을 표현했다. 그 결과 무대 화면부터 공간 장식, 소셜 콘텐츠, 배지와 굿즈까지 일관되면서도 확장 가능한 몰입형 경험을 구축했다. ## 대규모 행사를 위한 유연한 브랜드 시스템 - Config는 샌프란시스코와 런던에서 1만 명 이상이 참석하고, 온라인으로 수만 명이 시청하는 대형 사용자 컨퍼런스다. - Brand Studio 팀은 행사 시작 약 10개월 전부터 시각 아이덴티티 개발에 착수했다. - 브랜드 작업 범위는 다음과 같이 넓었다. - 메인 스테이지 화면 - 디지털 콘텐츠와 소셜 미디어 - 행사장 공간 경험 - 참석자 배지 - 굿즈와 각종 인쇄물 - 행사가 진행되며 요구사항과 제약이 달라질 수 있으므로, 처음부터 여러 환경에 대응할 수 있는 시스템을 만드는 것이 중요했다. ## 기본 도형에서 출발한 글리프 콘셉트 - Figma 브랜드의 핵심인 형태, 글리프, 프리미티브를 Config의 시각 언어로 확장했다. - 초기 단계에서는 무드보드나 구체적인 스타일보다 콘셉트 자체를 먼저 탐색했다. - 실행 방식을 지나치게 일찍 제한하면 결과물이 뻔하고 평면적으로 보일 수 있기 때문에, 콘셉트는 명확히 하되 표현 방식은 열어두었다. - 시각 콘셉트는 소셜 게시물, 대형 디지털 스크린, 실제 공간 설치물 등 서로 다른 크기와 매체에 적용될 수 있어야 했다. ## ‘늘어나고 흔들리는’ 글리프의 구조 - 각 글리프는 내부 요소와 외부 요소로 구성되며, 두 요소가 서로 반응하도록 설계됐다. - 글리프와 구성 요소의 변화는 창작 과정에서 나타나는 역동성, 변화, 적응성을 상징한다. - 정적인 그래픽에 그치지 않고 움직임을 통해 시각적 에너지를 강화했다. - 하나의 글리프가 움직이면 주변에 파동을 일으킨다. - 파동은 전체 구성을 변화시키며 연쇄적인 움직임을 만든다. - 이 구조 덕분에 같은 시각 언어를 사용하면서도 각 화면과 공간에서 서로 다른 조합과 움직임을 구현할 수 있었다. ## 컴포넌트 기반의 협업과 확장 - 팀은 Figma 안에서 글리프 라이브러리를 만들었다. - 글리프를 컴포넌트로 제작해 파트너와 외부 제작업체가 쉽게 재사용하고 수정할 수 있도록 했다. - 컴포넌트 기반 시스템의 장점은 다음과 같다. - 여러 표면과 매체에 빠르게 적용 가능 - 구성 요소를 교체하거나 커스터마이즈하기 쉬움 - 행사 전체의 시각적 일관성 유지 - 새로운 요구사항이 생겨도 기존 시스템 안에서 대응 가능 ## 제품 출시와 연결된 창작의 메시지 - Config 2025에서는 Figma Draw와 Figma Sites 등 사용자의 창의적 표현을 확장하는 제품 출시가 예정되어 있었다. - 이에 따라 시각 콘셉트도 단순한 장식보다 “더 자유롭고 예상 밖의 방식으로 자신을 표현한다”는 메시지에 초점을 맞췄다. - 글리프의 유기적인 움직임과 다양한 조합은 제품이 사용자의 창작 가능성을 넓힌다는 의미와 연결됐다. ## 새 Figma 브랜드 요소의 적용 - Config 2025는 Figma가 최근 진행한 브랜드 리프레시의 색상 체계와 새 서체인 Figma Sans를 활용할 수 있는 시점에 진행됐다. - 기존 브랜드 요소를 그대로 복사한 것이 아니라 Config의 행사 목적과 분위기에 맞게 변형해 사용했다. - 이를 통해 Config만의 표현력을 확보하면서도 Figma 전체 브랜드와의 연결성을 유지했다. Config처럼 규모가 크고 여러 채널에서 동시에 운영되는 행사는 처음부터 완성된 이미지 하나를 만드는 것보다, 재조합과 변형이 가능한 디자인 시스템을 구축하는 편이 효과적이다. 명확한 콘셉트, 컴포넌트화된 자산, 애니메이션 규칙을 함께 설계하면 행사 규모가 커져도 일관성과 창의성을 동시에 유지할 수 있다.

figma

코드 레이어로 사이트를 인터랙티브 (새 탭에서 열림)

피그마(Figma)는 디자인 환경 내에서 커스텀 리액트(React) 코드를 활용해 역동적인 상호작용을 구현할 수 있는 ‘코드 레이어(Code Layers)’ 기능을 출시했습니다. 이 기능을 통해 디자이너는 복잡한 개발 지식 없이도 AI 채팅이나 직접적인 코드 수정을 통해 정적인 디자인을 실제 작동하는 웹 요소로 변환하고 실험할 수 있습니다. 결과적으로 디자인과 실제 제품 구현 사이의 장벽을 허물어, 별도의 개발 전달 과정 없이도 고도화된 애니메이션이나 기능적 컴포넌트를 피그마 사이츠(Figma Sites)에서 즉시 빌드할 수 있게 되었습니다. **코드 레이어를 활용한 인터랙션 구현** * 코드 레이어는 리액트 코드를 기반으로 구동되는 상호작용 요소로, 피그마 사이츠 내에서 기존 컴포넌트를 코드로 변환하거나 새롭게 생성할 수 있습니다. * 피그마 메이크(Figma Make)의 AI 기술을 활용하여 "꽃 이미지를 무한히 복제해서 드래그할 수 있게 해줘"와 같은 자연어 프롬프트만으로 복잡한 로직을 생성합니다. * 캔버스 위에서 바로 코드 레이어를 복제(Cmd + D)하여 여러 버전의 상호작용을 나란히 비교하고 실험하는 유연한 워크플로우를 제공합니다. **기존 디자인의 동적 변환 및 제작 방식** * 작업 중인 요소에 애니메이션(회전, 바운스 등)을 추가하거나, 마우스 호버 시 색상이 변하는 리플 효과 등 정적 이미지에 생명력을 불어넣을 수 있습니다. * 대출 계산기, 가격 추정기, 실시간 통계 카운터와 같이 단순한 프로토타입을 넘어 실제 로직이 작동하는 유틸리티 컴포넌트를 제작할 수 있습니다. * 단축키(E)를 사용하여 캔버스에 즉석에서 코드 레이어를 그려 넣고, AI에게 이모지 파티클 생성이나 이미지 갤러리 구축 등을 요청하여 빠르게 아이디어를 시각화합니다. **개발자 수준의 확장성과 재사용성** * **커스텀 속성 편집:** AI가 코드 기반의 속성(문자열, 숫자 등)을 자동으로 생성하며, 사용자는 코드 수정 없이도 패널에서 직접 값을 조정해 레이어의 동작을 변경할 수 있습니다. * **컴포넌트화:** 일반적인 피그마 프레임처럼 코드 레이어도 재사용 가능한 컴포넌트로 전환하여 여러 페이지나 팀 프로젝트에 공유할 수 있습니다. * **npm 패키지 지원:** `motion`이나 `@react-three/fiber`와 같은 외부 노드 패키지 매니저(npm) 라이브러리를 임포트하여 고난도의 3D 렌더링이나 정교한 모션 그래픽을 구현할 수 있습니다. 웹 디자인의 한계를 넓히고자 하는 디자이너라면 피그마 사이츠에서 제공되는 코드 레이어를 적극적으로 활용해 보시기 바랍니다. 특히 AI 프롬프트를 통해 기초 코드를 생성한 뒤, npm 패키지를 결합해 시중의 템플릿으로는 불가능했던 독창적인 사용자 경험을 직접 구축해 보는 것을 추천합니다.

figma

Payload의 Figma 팀 합류를 (새 탭에서 열림)

피그마(Figma)는 오픈소스 헤드리스 CMS이자 애플리케이션 프레임워크인 페이로드(Payload) 팀을 인수하여 디자인과 개발의 경계를 허무는 행보를 가속화합니다. 이번 인수는 최근 발표된 '피그마 사이트(Figma Sites)'와 시너지를 내어 개발자들에게 더욱 강력하고 유연한 도구를 제공하는 데 목적이 있습니다. 피그마는 이를 통해 디자인뿐만 아니라 실제 제품의 빌드와 배포까지 생태계 내에서 직접 수행할 수 있는 중앙 허브로 거듭날 계획입니다. **Figma Sites와 Payload의 기술적 시너지** - Config 2025에서 발표된 '피그마 사이트'와 결합하여, 디자인에서 실제 프로덕션 웹사이트 제작까지의 과정을 비약적으로 단축합니다. - Payload가 제공하는 높은 커스터마이징 자유도와 확장성을 활용해, 개발자들이 기존의 제한적인 CMS 환경에서 벗어나 더 나은 DX(개발자 경험)를 누릴 수 있도록 지원합니다. - 포춘 100대 기업들이 이미 도입하여 신뢰성을 검증받은 Payload의 기술력을 피그마 플랫폼에 이식함으로써 엔터프라이즈급 개발 환경을 구축합니다. **오픈소스 생태계 유지와 커뮤니티 협업** - Payload는 인수 후에도 오픈소스 프로젝트로 유지되며, 기존 사용자들은 현재와 동일하게 서비스를 이용할 수 있도록 독립성을 보장합니다. - 피그마의 협업 중심 철학과 Payload의 오픈소스 커뮤니티 지향점이 결합되어, 사용자 피드백을 기반으로 한 제품 로드맵을 투명하게 공유할 예정입니다. - 피그마는 오픈소스 프로젝트에 지속적으로 투자하여 개발자들이 지식을 공유하고 기술을 발전시킬 수 있는 생태계를 확장하는 데 집중할 계획입니다. **디자인-개발 통합을 통한 제품 제작 가속화** - AI의 발전으로 코드와 콘텐츠 생성이 쉬워진 환경에 발맞추어, 배포 채널을 직접 제어하고 사용자 경험을 세밀하게 튜닝할 수 있는 제어권을 강화합니다. - 단순히 디자인 결과물을 공유하는 단계를 넘어, 피그마 생태계 내에서 직접 디지털 제품을 구축하고 배포할 수 있는 환경을 조성합니다. - 디자인과 개발 사이에 전통적으로 존재해 왔던 간극을 좁힘으로써 제품 제작 팀의 전체적인 생산성을 높이는 것을 최종 목표로 삼고 있습니다. 디자이너와 개발자가 긴밀하게 협업해야 하는 조직이라면 향후 피그마 사이트와 페이로드의 통합 기능을 주목할 필요가 있습니다. 디자인 시스템을 기반으로 실제 웹 서비스를 신속하게 배포하고 관리하려는 팀에게 이번 인수는 매우 강력한 생산성 도구의 탄생을 예고합니다.

figma

Figma의 디자인과 크 (새 탭에서 열림)

Figma의 『Practice』는 좋은 결과물이 반복적인 연습, 실패, 관찰, 정교함을 통해 만들어진다는 생각을 담은 Config 2025의 세 번째 잡지다. 이 책은 기술적 숙련을 전통적 장인정신과 연결하면서도, 새로운 도구와 기술에 맞춰 craft가 계속 변화한다고 말한다. 중요한 것은 단순히 “작동하는가”가 아니라 “어떻게 작동하는가”이다. ## 『Practice』의 주제와 제작 배경 - 책의 중심 주제는 의도를 가지고 무언가를 만드는 **craft**다. - 숙련에는 다음과 같은 과정이 필요하다고 설명한다. - 반복적인 시도와 연습 - 실패를 통한 학습 - 더 뛰어난 사람에게 배우기 - 위험을 감수하고 새로운 방식 시도하기 - 세부 사항을 관찰하고 정밀하게 다듬기 - Figma CEO Dylan Field는 결과의 기능 여부뿐 아니라 구현 방식과 과정이 중요하다고 강조한다. - 책에는 디자인, 기술, 창작 도구, 제작자의 태도에 관한 인터뷰와 에세이가 포함됐다. ## 전통과 현대 기술의 결합 - 디자인 스튜디오 Other Means는 윌리엄 모리스와 Kelmscott Press의 장인적 책 제작 방식에서 영감을 얻었다. - Kelmscott Press가 추구한 “본질적인 품질과 예술적 취향”을 현대적인 편집 디자인으로 재해석했다. - 이니셜 대문자, 플뢰롱, 장식 테두리, 드롭캡 같은 전통적 조판 요소를 현대적으로 활용했다. - 서체 디자이너 Kia Tasbihgou가 만든 드롭캡은 역사적인 타이포그래피 전통을 반영한다. - 화면, 픽셀, 데이터 중심으로 작업하는 현대 디자이너들도 다른 분야의 장인들과 인내, 관찰, 의도성이라는 공통 기반을 공유한다고 본다. ## 책을 넘어선 서체와 디지털 경험 - 『Practice』의 드롭캡 디자인을 확장해 하나의 완전한 서체를 제작했다. - 책에서 사용한 독특한 문자를 알파벳 전체로 발전시켜 타입페이스로 공개했다. - Figma Sites를 활용해 서체 견본 페이지를 만들고, 온라인에서 서체를 감상하고 내려받을 수 있도록 했다. - 이는 책의 물리적 디자인을 디지털 환경으로 확장한 사례다. ## 장인정신의 네 가지 관점 책은 craft를 다음 네 가지 관점에서 다룬다. - **적응(Adaptation)**: 변화하는 기술과 환경에 맞춰 제작 방식과 도구를 조정하는 과정 - **반복(Iteration)**: 시도와 실패를 거듭하며 결과를 개선하는 과정 - **적용(Application)**: 익힌 기술과 원칙을 실제 문제와 다양한 분야에 적용하는 방식 - **가치(Value)**: 정성과 숙련이 결과물의 품질과 의미를 어떻게 높이는지에 대한 고찰 『Practice』는 디지털 도구가 발전하더라도 숙련과 판단, 세부 사항에 대한 관심은 여전히 중요하다고 말한다. 새로운 기술을 활용하되 결과만 빠르게 얻는 데 그치지 말고, 반복과 관찰을 통해 작업의 완성도와 작동 방식을 함께 다듬는 태도가 실용적인 교훈이다.

figma

Figma Sites로 웹 (새 탭에서 열림)

Figma Sites는 Figma 안에서 웹사이트를 디자인하고, 반응형 동작과 인터랙션을 적용한 뒤 바로 게시할 수 있는 올인원 도구다. 기존의 디자인·프로토타이핑·개발·배포로 이어지는 선형 작업을 하나의 반복적인 흐름으로 통합해, 개발 도구나 별도 협업 과정 없이 실제 웹사이트를 제작하도록 돕는다. 템플릿과 디자인 시스템 연동, 반응형 레이아웃, 다양한 애니메이션 기능을 통해 디자이너와 소규모 팀도 표현력 있는 사이트를 만들 수 있다. ## 디자인부터 게시까지 하나의 작업 흐름 - 기존 웹 제작은 Figma에서 디자인한 뒤 프로토타입을 만들고, 브레이크포인트를 설정하며, 디자인을 코드로 변환하고 테스트·배포하는 수작업과 도구 전환이 필요했다. - Figma Sites에서는 Figma를 떠나지 않고 디자인, 인터랙션 구현, 반응형 조정, 웹 게시를 수행할 수 있다. - 포트폴리오, 이벤트 사이트, 제품 랜딩 페이지 등 다양한 목적의 실제 동작하는 웹사이트를 제작할 수 있다. - 템플릿, 반응형 웹 요소, 사전 제작된 인터랙션을 제공해 디자인·개발 인력이 제한적인 팀도 빠르게 시작할 수 있다. - 향후 Figma Make 기반의 채팅-투-코드 기능을 통해 원하는 애니메이션이나 인터랙션을 자연어로 설명하고 생성할 수 있게 될 예정이다. ## 템플릿과 디자인 시스템 연동 - Inserts 패널을 통해 게시된 디자인 라이브러리를 사이트에 연결할 수 있다. - 팀의 컴포넌트와 스타일을 재사용해 제작 속도와 일관성을 높일 수 있다. - 별도의 디자인 시스템이 없는 경우에도 내비게이션, 히어로 섹션, 전체 페이지 같은 기본 블록을 활용할 수 있다. - 디자인 시스템을 처음부터 구축하지 않아도 검증된 구성 요소를 조합해 사이트를 만들 수 있다. ## 다양한 화면에 대응하는 반응형 디자인 - 레이아웃, 텍스트, 디자인이 화면 크기와 브레이크포인트에 맞춰 자동으로 조정된다. - Multi-edit 기능으로 여러 화면 크기의 요소를 한 번에 수정할 수 있다. - 텍스트 스타일마다 브레이크포인트별 글자 크기와 간격을 설정할 수 있으며, 별도의 변수를 사용하지 않아도 된다. - 자동 조정 기능을 기반으로 하면서도 세부 요소는 수동으로 조정해 정교하게 다듬을 수 있다. - 미리보기 창의 크기를 바꾸면서 레이아웃 재배치와 브레이크포인트 전환을 확인할 수 있다. ## 웹사이트 수준의 프로토타이핑과 검수 - 협업자에게 인터랙티브한 라이브 웹사이트 미리보기를 공유하고 피드백을 받을 수 있다. - 미리보기는 HTML과 CSS로 렌더링되므로 일반적인 Figma 프로토타입보다 실제 게시 환경에 가까운 결과를 확인할 수 있다. - 반응형 동작뿐 아니라 웹사이트에 특화된 인터랙션도 게시 전에 테스트할 수 있다. ## 기본 제공되는 애니메이션과 인터랙션 - 마우스 패럴랙스: 커서 움직임에 따라 객체를 이동시킨다. - 라이트박스: 이미지를 강조하고 배경을 어둡게 처리한다. - 스핀: 객체를 무한 회전시킨다. - 드래그 가능 요소: 페이지 안의 요소를 자유롭게 이동시킨다. - 타자기 효과: 텍스트를 한 글자씩 표시한다. - 스크램블 텍스트: 문자를 무작위로 보여준 뒤 원래 텍스트를 드러낸다. - 마키, 리빌, 스크롤 패럴랙스 같은 사전 제작 효과도 제공된다. ## Figma Sites만의 확장 기능 - Figma Design에는 아직 없는 스크롤 패럴랙스와 스크롤 변환 기능을 지원한다. - 인터랙티브 컴포넌트를 별도로 만들지 않아도 호버 상태와 눌림 상태를 구현할 수 있다. - 향후 코드 레이어를 사용해 플러그인이나 외부 도구 없이 더 복잡한 인터랙션을 추가할 수 있다. - AI 채팅을 이용해 드래그 가능한 목록이나 실제 지리 정보를 반영한 시계처럼 복잡한 동작을 설명만으로 생성할 수 있게 될 예정이다. - 생성한 코드 레이어는 Figma Design의 라이브러리처럼 재사용·공유 가능한 컴포넌트와 인스턴스로 만들 수 있다. Figma Sites는 단순히 디자인을 웹으로 내보내는 기능보다, 디자인·반응형 구현·프로토타이핑·게시를 통합한 제작 환경에 가깝다. 빠르게 랜딩 페이지나 이벤트 사이트를 제작해야 하는 팀, 개발 리소스가 적은 디자이너에게 특히 유용하며, 복잡한 서비스 기능이나 세밀한 코드 제어가 필요한 경우에는 향후 코드 레이어 기능의 성숙도를 함께 확인하는 것이 좋다.