💻 코드와 디자인의 간극을 확 줄인 피그마의 대규모 업데이트 🎉 CSS를 배우다 보면 이런 의문이 생기곤 했는데요. 코드에서는 margin 값, 혹은 padding 값을 상, 하, 좌, 우에 각각 줄 수 있는데 왜 디자인 툴에서는 불가능할까? 코드에서는 동일한 컴포넌트로 상태값만 바뀔 뿐인데, 왜 디자인 툴에서는 hover, active, disabled 상태를 따로 컴포넌트화해야 할까? 피그마는 이번 Config Europe에서 대규모 업데이트를 발표했는데요. 이번 업데이트로 디자인과 코드의 다른 구현 방식에서 오는 간극을 엄청나게 줄여줄 예정입니다. 1️⃣ Variant (11월 릴리즈 예정) 이제 더이상 여러개의 컴포넌트를 만들 필요가 없습니다. 하나의 컴포넌트 안에 여러 개의 속성이 존재할 수 있습니다. 예를 들면, Button 컴포넌트에 Primary/Seondary 속성을 만들 수 있습니다. 그리고 이 버튼은 단일한 컴포넌트로 존재합니다. 마치 코드에서처럼요! 2️⃣ Interactive Component (내년 1월 릴리즈 예정) 이제 피그마가 프로토타입 기능에도 본격적으로 힘을 쏟는 모양입니다. 이제 피그마에서도 컴포넌트를 '작동시킬' 수 있어요! 기존에는 페이지 단위로만 애니메이션을 적용할 수 있었다면, 이 기능은 컴포넌트 단위에 애니메이션을 적용시킬 수 있습니다. 이런 방향의 업데이트가 계속 된다면 결국엔 별도의 프로토타입 툴을 사용할 필요 없이 피그마에서 모든 디자인 작업을 하게 될 수 있지 않을까 생각됩니다. 3️⃣ 더 업그레이드 된 Auto Layout (11월 릴리즈 예정) CSS의 Box model, Flexbox 기능을 그대로 재현한 강력해진 Auto Layout이 업데이트될 예정입니다. Auto Layout 된 프레임 안에 요소를 넣고 fill content를 누르면, 프레임의 너비에 맞춰 자동으로 각각의 요소들이 일정하게 너비를 나눠 갖습니다. 또, 기존에는 상-하, 좌-우 padding 값을 한꺼번에 변경할 수밖에 없었죠. 이제는 상, 하, 좌, 우의 padding 값을 따로 지정할 수 있다고 합니다. 그 외에도 컴포넌트 검색, Inspect 기능이 훨씬 더 직관적이고 편리하게 개선되어 현재 적용 되었다고 합니다. 저는 특히 Variant가 정말 마음에 드는데요. 컴포넌트 개수가 훨씬 줄어들고 깔끔하게 관리할 수 있을 것 같아 기대가 됩니다!