피그마, 코드로.

Grida 는 앱개발을 위한 오픈소스 플렛폼으로, 여러분의 피그마 디자인을 개발자 친화적인 코드로 변환합니다.
Saturday Morning Miximage of AvatarSource
Here are some tunes for you to start your morning. Mostly quiet and slow-beat, some of them are mood changer.
LO
FI
Morning Slowbeats - LoFi
image of Rectangle825
Sweet nothings
image of Rectangle825TRP
LVE
TRP LIVE
Lauren is listening
image of Rectangle825TRP
LVE
TRIPPEMorning Slowbeats - LoFi
image of Rectangle825
SweetMorning Slowbeats - LoFi
LO
FI
SweetMorning Slowbeats - LoFi
image of IconsMdiHomeimage of IconsMdiShowChartimage of IconsMdiSearch

디자인은 한번만, 실행은 어디에서나

grida
Saturday Morning Miximage of AvatarSource
Here are some tunes for you to start your morning. Mostly quiet and slow-beat, some of them are mood changer.
LO
FI
Morning Slowbeats - LoFi
image of Rectangle825
Sweet nothings
image of Rectangle825TRP
LVE
TRP LIVE
Lauren is listening
image of Rectangle825TRP
LVE
TRIPPEMorning Slowbeats - LoFi
image of Rectangle825
SweetMorning Slowbeats - LoFi
LO
FI
SweetMorning Slowbeats - LoFi
image of IconsMdiHomeimage of IconsMdiShowChartimage of IconsMdiSearch
reactReact.tsx
flutterFlutter.dart
htmlvanilla.html
main
0↓ 1↑

눈 깜짝할 사이에

프레임 전체에서 부터 작은 컴포넌트 까지, Grida 는 여러분의 클릭에 즉시 반응합니다. 헤드레스 작업플로우로 여러분의 작업을 굉장히 빠르게 완료할수 있습니다. 프로젝트의 모든 스텝을 Grida 로 부스트 해보세요.

Grida supported design platforms
Grida supported platfrom iconsGrida supported platfrom iconsGrida supported platfrom icons
Grida supported design patforms
Grida supported platform iconsGrida supported platform iconsGrida supported platform icons
function CardMusicItem({
  artwork,
  musicName,
}: {
  artwork: string | JSX.Element;
  musicName: string;
}) => {
  return (
    <CardWrapper>
      <ArtworkContainer>
        {artwork}
        <MusicPlayButton icon={"play"} />
      </ArtworkContainer>
      <MusicName>{musicName}</MusicName>
    </CardWrapper>
  );
};

const CardWrapper = styled.div`
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  align-items: start;
  flex: none;
  gap: 4px;
  width: 138px;
  height: 180px;
  box-sizing: border-box;
`;

const ArtworkContainer = styled.div`
  height: 144px;
  position: relative;
  align-self: stretch;
`;


const MusicName = styled.span`
  color: rgba(164, 164, 164, 1);
  text-overflow: ellipsis;
  font-size: 14px;
  font-family: Roboto, sans-serif;
  font-weight: 400;
  text-align: left;
  align-self: stretch;
`;

Grida supported platforms iconGrida supported platforms iconGrida supported platforms icon
function CardMusicItem({
  artwork,
  musicName,
}: {
  artwork: string | JSX.Element;
  musicName: string;
}) => {
  return (
    <CardWrapper>
      <ArtworkContainer>
        {artwork}
        <MusicPlayButton icon={"play"} />
      </ArtworkContainer>
      <MusicName>{musicName}</MusicName>
    </CardWrapper>
  );
};

const CardWrapper = styled.div`
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  align-items: start;
  flex: none;
  gap: 4px;
  width: 138px;
  height: 180px;
  box-sizing: border-box;
`;

const ArtworkContainer = styled.div`
  height: 144px;
  position: relative;
  align-self: stretch;
`;


const MusicName = styled.span`
  color: rgba(164, 164, 164, 1);
  text-overflow: ellipsis;
  font-size: 14px;
  font-family: Roboto, sans-serif;
  font-weight: 400;
  text-align: left;
  align-self: stretch;
`;

Grida supported design platformsGrida supported design platformsGrida supported design platforms

하나에만 집중합니다.

Grida demo app - design to code
gradient-bg

Grida 는 오직 Figma 를 완벽 지원하기 위하여 만들어졌습니다. 여러분께 가장 발전되고, 리스폰시브한 개발 경험을 제공하기 위함이죠. 피그마에서 프로덕션까지 가기 위한 모든 도구가, 이곳에 모였습니다.

Design to code 는 어떻게 작동하나요?
데모 체험
Grida demo app - design to code
gradient

마법을 보여줄게요

클릭 한번으로 얼마나 생산성이 높아질수 있는지 놀라실 겁니다.

피그마 디자인 링크 붙여넣기.

본질에만 집중하세요

가 나머지를 할게요

제품코드AssistantCLI클라우드현지화Reflect UIVSCode
리소스Getting Started문서API 문서블로그
플랫폼FigmaReactReact NativeFlutterHTML/CSSReflect UI
함께해요깃허브프로젝트지원슬랙에서 이야기 해요레딧
Copyright © 2022 Grida Inc.
쿠키 정책개인정보 정책이용약관