Grida
Docs
Blog
Github
Slack
image of HeroGradientBgArtwork

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 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 once, Run anywhere.

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

Grida supported design platforms
Grida supported platfrom icons
Grida supported platfrom icons
Grida supported platfrom icons
Grida supported design patforms
Grida supported platform icons
Grida supported platform icons
Grida 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 icon
Grida supported platforms icon
Grida 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 platforms
Grida supported design platforms
Grida supported design platforms

Less is more.

Grida demo app - design to code
gradient-bg

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

See the magic

Supercharge your productivity with one click.

Paste your figma design url.

Focus on the core

will do the rest

Products
Code
Assistant
CLI
Cloud
Globalization
Reflect UI
VSCode
Resources
Gettiing Started
Docs
API Docs
Papers
Blogs
Platforms
Figma
React
React Native
Flutter
HTML/CSS
Reflect UI
Together
Github
Projects
Support
Join us on Slack
Reddit
Copyright © 2022 Grida.co
CookiesPrivacy policyTerms and conditions