Figma 변수로 레이아웃 50% 단축

UI 라이브러리 변수로 Figma에서 프론트엔드 개발 속도 높이기

개발자들은 Figma 디자인 스펙을 해석하는 데 하루의 50% 이상을 쓴다: 모호한 용어인 flow, 중복된 여백과 색상 값, 코드베이스와의 직접적인 연결 없음. 해결책은? 기존 UI 라이브러리(타일윈드 CSS, 부트스트랩, MUI 등)의 변수를 그대로 Figma에 도입하는 것이다. 이렇게 하면 디자인이 살아있는 시스템이 되고, 프론트엔드 개발은 유틸리티 클래스 적용만으로 간단해진다.

예를 들어, 제목, 부제목, 입력 필드, 버튼이 포함된 모달을 생각해보자. 변수 없이 디자이너는 padding: 32px, background: #F9F9F9를 보게 된다. 개발자는 수동으로 HEX 코드를 코드에 복사해야 한다.

<div class="modal-window">
  <h1 class="modal-title">중요한 내용 놓치지 마세요!</h1>
  <p class="modal-subtitle">아래 이메일을 입력하고 "전송" 버튼을 클릭하세요</p>
  <input type="email" class="modal-input" placeholder="[email protected]" />
  <button class="modal-button">전송</button>
</div>

.modal-window {
  width: 600px;
  padding: 32px;
  background: #F9F9F9;
  border: 1px solid #F2F2F2;
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.modal-title {
  color: #323232;
  font-size: 20px;
  font-weight: 500;
}
/* 기타 요소 스타일도 유사하게 */

중복된 스타일은 변경 시 파일 전체를 수동으로 업데이트해야 한다.

전통적 접근 방식의 문제점

프론트엔드 개발자는 각 컴포넌트 디자인을 처음부터 재해석한다:

• 모호한 이름: radius 대신 border-radius, flow 대신 flex-direction
• 속성 무시: width는 중요하지만 height/top/left는 무시됨
• 중복 값: border 1px solid가 여러 번 반복됨
• 시스템 통합 부재: 디자인 값이 실제 라이브러리와 연결되지 않음

10개의 모달이 있다면, 변경 사항을 찾고 해석하며 모든 파일에 복사해야 한다. 반복 작업은 배포 속도를 늦추고 확장성을 어렵게 만든다.

규칙: 재사용 가능한 모든 값은 변수로 만들어야 한다.

타일윈드 CSS 변수 적용하기

라이브러리를 기준으로 삼는다. 타일윈드는 패딩, 색상, 모서리 반경에 대한 유틸리티 클래스를 제공한다.

단계 1: 변수 수집

색상:

• white-100: #FFFFFF
• white-200: #F2F2F2
• blue-500: #066BE8

여백:

• p-3: 12px
• p-4: 16px
• p-6: 24px
• p-8: 32px

둥근 모서리:

• rounded-lg: 8px
• rounded-3xl: 24px

테두리: border: 1px

값이 없으면 일관된 이름으로 추가 (예: p-9: 36px)

단계 2: Figma에 가져오기

변수 그룹을 생성한다. 동기화 후 Figma는 컴포넌트에 직접 값을 표시한다(패딩, 반경 등).

단계 3: 디자인에 적용하기

모달: p-8, bg-white-400, border, rounded-3xl

입력 필드: bg-white-100, border, rounded-lg, p-4 (16px × 12px)

버튼: bg-blue-500, rounded-lg, p-3 (12px × 36px)

개발자는 p-8 bg-white-400 rounded-3xl을 보고 다음과 같이 작성한다:

<div class="p-8 bg-white-400 border rounded-3xl flex flex-col gap-6">

HEX 코드도, 측정값도 필요 없다. 깔끔한 유틸리티 클래스만 있으면 된다.

다른 라이브러리에 맞춰 조정하기

부트스트랩:

p-3, bg-light, border, text-primary

<div class="p-3 bg-light border border-1 rounded">
  <h5 class="text-primary">제목</h5>
  <button class="btn btn-primary">전송</button>
</div>

Material UI:

theme.spacing(4), grey.100

import { Box, Button, TextField } from "@mui/material";

export default function Modal() {
  return (
    <Box sx={{ p: 4, backgroundColor: "grey.100", border: "1px solid", borderColor: "grey.200", borderRadius: 3, display: "flex", flexDirection: "column", gap: 3 }}>
      <TextField placeholder="이메일" />
      <Button variant="contained" color="primary">전송</Button>
    </Box>
  );
}

차크라 UI:

p="8", bg="gray.100"

import { Box, Button, Input } from "@chakra-ui/react";

export default function Modal() {
  return (
    <Box p="8" bg="gray.100" border="1px" borderColor="gray.200" borderRadius="3xl" display="flex" flexDirection="column" gap="6">
      <Input placeholder="이메일" />
      <Button colorScheme="blue">전송</Button>
    </Box>
  );
}

SASS/SCSS로 커스텀 변수 만들기

프레임워크 없이 프로젝트를 진행할 경우, 전처리기를 사용한다:

$white-100: #FFFFFF;
$p-8: 32px;
$rounded-3xl: 24px;

@mixin modal-base {
  padding: $p-8;
  background: $white-400;
  border: 1px solid $white-200;
  border-radius: $rounded-3xl;
}

.modal {
  @include modal-base;
  display: flex;
  flex-direction: column;
  gap: $gap-6;
}

믹스인은 컴포넌트를 표준화하고, 변수는 값을 중앙 집중화한다.

핵심 포인트

• 라이브러리 기반 변수는 중복과 오해를 제거해 개발 속도를 최대 50% 향상시킨다.
• Figma + 타일윈드/MUI: 디자이너는 클래스를 적용하고, 개발자는 그걸 복사한다.
• 확장성: 하나의 변수만 바꾸면 전체 프로젝트가 업데이트된다.
• 중급/고급 개발자에게는 작업에 매몰되지 않고 시스템 중심 사고를 할 수 있다.
• 부가 기능: Figma는 변수의 실시간 숫자 값을 표시한다.

— Editorial Team