디자인시스템을 자동으로 만들어주는 피그마 플러그인
AI플러그인으로 사이트 빌드업부터 디자인 시스템 구축까지 한 번에
디자인 시스템의 중요성은 날이 갈수록 커지고 있습니다.
이제는 많은 디자인 팀 내에 디자인 시스템 전담 파트가 생겨날 정도로, 서비스의 일관성을 유지하고 업무 효율을 높이기 위해 디자인 시스템은 필수가 되었죠.
물론 디자인 시스템을 구축하는 데도 많은 리소스가 들지만, 그만큼 가이드라인을 체계적으로 정리하고 유지하는 일도 상당한 노력이 필요합니다.
요즘은 Supernova 같은 툴을 활용해 디자인 시스템을 효율적으로 관리하고 업데이트할 수 있지만,
오늘은 Figma 플러그인을 활용해 디자인 시스템을 더욱 스마트하게 구축하는 방법을 소개해보려고 합니다.
내가 만든 디자인 파일을 자동으로 스캔해 디자인 시스템화해주는 기능부터,
디자인을 시작하기 전 AI와 함께 스타일과 컴포넌트를 선구축하는 기능까지.
디자인 시스템을 훨씬 빠르고 체계적으로 만드는 데 도움이 되는 Figma 플러그인들을 함께 살펴보겠습니다.
1. 빠르게 사이트부터 만들어보겠습니다.
필요 플러그인 : html. to. design
html to design 플러그인을 사용하면 내가 원하는 스타일의 사이트를 바로 피그마 이미지로 만들 수 있습니다.
갑작스럽게 이런 경우들이 있죠
'apple 홈페이지 같은 스타일로 메인 화면 만들어줘, 내일까지 필요해'
예전 같으면 참고로 준 사이트를 캡처해서 비슷하게 이미지를 만들어야 했습니다.
물론 이번에 업데이트된 figma make에 해당 이미지를 붙여 넣고 사이트를 만들어 달라고 프롬프트를 작성해도 되지만 현재 figma make는 피그마 디자인 소스로 추출을 할 수 없고 코드로만 배포될 수 있기 때문에
이번엔 html to design을 사용합니다.
해당 플러그인에 원하는 사이트 도메인 주소를 넣으면 짜잔! 피그마에 해당 링크의 디자인이 만들어집니다.
이미지 형태가 아닌 모두 수정이 가능한 디자인 파일로 말이죠
참 쉽죠?�
2. 디자인시스템을 만들어보겠습니다.
필요 플러그인 : flgr
figr플러그인을 제가 모두 설명하는 것보다 무료이기 때문에 하나씩 실험해 보시면서 이런 기능이 있구나 하고 실습해 보며 체득하시는 걸 추천드립니다.
저는 세 가지 기능 중에 상단에 있는 기존 디자인에서 디자인시스템을 자동으로 만들어주는 기능을 사용해 보겠습니다.
위에서 만든 애플 사이트 페이지를 클릭하고 import from figma 버튼을 눌러 디자인시스템을 만들어볼게요
이제 버튼을 누르고 잠시 기다리면
자동으로 디자인 시스템 파일이 만들어지고
이렇게 가이드 파일도 만들어줍니다
또 지금 만들어진 시스템을
create typography in styles in figma 버튼을 누르면
스타일에도 적용이 됩니다.
그리고 파일에는 없더라도 Build Component에 있는 요소들을 눌러 컴포넌트를 만들 수도 있습니다.
원하는 사이트를 만들고 디자인 시스템을 구축하는 데 채 1시간도 걸리지 않았습니다.
물론 여기서 끝나는 건 아닙니다. 이후에는 세부적인 디테일을 조정하는 작업이 필요하죠.
하지만 처음부터 디자인을 시작해서 시스템을 만들고, 가이드라인까지 정리하는 전체 과정을 생각해보면
앞서 소개한 플러그인들은 정말 혁신적이라고 할 수 있습니다.�
특히 간단한 사이트 시연, 원페이지 디자인 등을 빠르게 구성할 때, 이 두 가지 플러그인을 활용해보세요.
작업 시간을 확실히 절약할 수 있을 뿐만 아니라, 디자인 시스템을 기반으로 추후 운영과 개발까지 효율적으로 이어갈 수 있다는 점에서 큰 장점이 있습니다.
혹시 여러분이 알고 있는 디자인 시스템 구축에 유용한 플러그인이나 AI 도구가 있다면 댓글로도 알려주세요 :)
