Check out our latest release | The Bundle by Grida, A Massive library of 3D Rendered PNGs for UI and Graphics Designs.
Figma à Code.
Grida est une plate-forme gratuite et open source qui transformera automatiquement votre désign Figma en code adapté aux développeurs pour les applications Web et mobiles.
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 une fois, exécutez n'importe où.
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↑
Tout Instantané.
Des frames entiers à un seul component, Grida répondra instantanément à votre clic. Le headless workflow rendra votre travail encore plus rapide. Accélérez chaque étape de votre projet avec 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;
`;
Moins est plus.
Grida est uniquement dédié à la plate-forme Figma pour vous offrir l'expérience de développement la plus avancée et la plus réactive qui soit. Vous trouverez tout ce dont vous avez besoin pour passer à l'antenne avec Figma.
Comment fonctionne le Design to Code ?Essayez la démo
Voir la magie
Boostez votre productivité en un clic.
Collez votre figma design url.
Concentrez-vous sur le noyau
fera le reste
Copyright © 2024 Grida Inc.