Check out our latest release | The Bundle by Grida, A Massive library of 3D Rendered PNGs for UI and Graphics Designs.
Figma to Code.
Grida is a Free and Open-source platform that will automatically transform your Figma design to developer-friendly code for Web & Mobile apps.
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
Design once, Run anywhere.
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↑
Everything Instant.
From entire frames to a single component, Grida will respond to your click instantly. The headless workflow will make your job even faster. Speed up every step of your project with 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;
`;
Less is more.
Grida is solely dedicated to Figma platform to bring you the most advanced, responsive development experience ever. You will find everything you need to go on-air with Figma.
How does Design to code work?Try the demo
See the magic
Supercharge your productivity with one click.
Paste your figma design url.