brunch

You can make anything
by writing

- C.S.Lewis -

by eddward park May 23. 2021

피그마 디자인을 코드로 만드는 방법

개발환경 설정없이 시작하는 코딩

피그마로 디자인을 완성하면 inspect창을 통해 실제 개발에 적용할 수 있는 코드를 확인할 수 있다.


완성된 디자인을 개발에 적용하는 과정은 각 컴포넌트들의 class name을 정하고 피그마 inspect창의 코드를 복사하여 붙여 넣는다.


이렇게 붙여넣기만 하면 짠~ 하고 디자인과 똑같이 브라우저에 나타날것이라 예상되지만 실제로는 어느정도 코드의 수정이 필요하게 된다.


필자의 개인적인 경험으로 보면 특히 position 과 display 설정들을 수정하는 경우가 많았다.


이 두 설정값의 특징은 부모와 자식 컴포넌트의 관계를 설정하는 것이다.



POSITION

https://brunch.co.kr/@eddwardpark/10



DISPLAY: FLEX

https://brunch.co.kr/@eddwardpark/51



코드의 수정을 디자이너가 직접 할 수 있다면 프로젝트의 생산성은 향상될거다.


그런데 실제 디자이너가 코드 에디터(Atom, VScode)를 설치하고 프로젝트에 필요한 개발 환경을 설정하고 필요한 플러그인들까지 설치하는것 자체가 큰 허들인것이다.


실제 코드를 만지기도 전에 개발에 대한 두려움을 가지게 된다.


https://codepen.io/https://codesandbox.io/ 이 두 서비스는 개발에 필요한 환경들이 준비되어 있어서 디자이너들이 바로 코드만 작성하면 결과를 브라우저 상에서 바로 확인할 수 있다.



codepen.io

https://codesandbox.io/s/figma-zerm5?file=/src/App.js



codesandbox.io

https://codepen.io/ace-subido/pen/Cuiep



자신이 만든 디자인을 직접 코드로 작성하고자 한다면 위에 소개한 두가지 서비스중 한가지를 이용해 도전해 보자.


codepen은 html, css, js를 사용해서 퓨어한 개발을 진행할 수 있고, codesandbox는 react, vue, angular등 최근 인기있는 프론트엔트 라이브러리의 개발환경 설정에 대한 부담없이 바로 코드를 작성할 수 있다.

매거진의 이전글 개발 구조를 만드는 피그마 플러그인

매거진 선택

키워드 선택 0 / 3 0

댓글여부

afliean
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari