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 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

Design une fois, exécutez n'importe où.

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↑

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.

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

Moins est plus.

Grida demo app - design to code
gradient-bg

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
Grida demo app - design to code
gradient

Voir la magie

Boostez votre productivité en un clic.

Collez votre figma design url.

Concentrez-vous sur le noyau

fera le reste

ProductsCodeAssistantCLICloudMondialisationReflect UIVSCode
RessourcesGetting StartedDocsAPI DocsBlogs
PlatformsFigmaReactReact NativeFlutterHTML/CSSReflect UI
EnsembleGithubProjectsSupportRejoignez la communauté SlackReddit
Copyright © 2022 Grida Inc.
CookiesPolitique de confidentialitéTermes et conditions