Check out our latest release | The Bundle by Grida, A Massive library of 3D Rendered PNGs for UI and Graphics Designs.
피그마, 코드로.
Grida 는 앱개발을 위한 오픈소스 플렛폼으로, 여러분의 피그마 디자인을 개발자 친화적인 코드로 변환합니다.
Saturday Morning Mix
Here are some tunes for you to start your morning. Mostly quiet and slow-beat, some of them are mood changer.LO
FI
FI
TRPLVE
Lauren is listeningTRP
LVE
TRPLVE
TRIPPEMorning Slowbeats - LoFi
SweetMorning Slowbeats - LoFi
LO
FI
FI
SweetMorning Slowbeats - LoFi
디자인은 한번만, 실행은 어디에서나
Saturday Morning Mix
Here are some tunes for you to start your morning. Mostly quiet and slow-beat, some of them are mood changer.LO
FI
FI
TRPLVE
Lauren is listeningTRP
LVE
TRPLVE
TRIPPEMorning Slowbeats - LoFi
SweetMorning Slowbeats - LoFi
LO
FI
FI
SweetMorning Slowbeats - LoFi
React.tsx
Flutter.dart
vanilla.html
main
0↓ 1↑
눈 깜짝할 사이에
프레임 전체에서 부터 작은 컴포넌트 까지, Grida 는 여러분의 클릭에 즉시 반응합니다. 헤드레스 작업플로우로 여러분의 작업을 굉장히 빠르게 완료할수 있습니다. 프로젝트의 모든 스텝을 Grida 로 부스트 해보세요.
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;
`;
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 는 오직 Figma 를 완벽 지원하기 위하여 만들어졌습니다. 여러분께 가장 발전되고, 리스폰시브한 개발 경험을 제공하기 위함이죠. 피그마에서 프로덕션까지 가기 위한 모든 도구가, 이곳에 모였습니다.
Design to code 는 어떻게 작동하나요?데모 체험
마법을 보여줄게요
클릭 한번으로 얼마나 생산성이 높아질수 있는지 놀라실 겁니다.
피그마 디자인 링크 붙여넣기.