Grida
Docs
Github
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
icon
Morning Slowbeats - LoFi
image of Rectangle825image of Union
icon
Sweet nothings
image of Rectangle825TRP
LVE
icon
TRP LIVE
Lauren is listening
image of Rectangle825TRP
LVE
TRIPPEMorning Slowbeats - LoFi
icon
image of Rectangle825image of Union
SweetMorning Slowbeats - LoFi
icon
LO
FI
SweetMorning Slowbeats - LoFi
icon
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
icon
Morning Slowbeats - LoFi
image of Rectangle825image of Union
icon
Sweet nothings
image of Rectangle825TRP
LVE
icon
TRP LIVE
Lauren is listening
image of Rectangle825TRP
LVE
TRIPPEMorning Slowbeats - LoFi
icon
image of Rectangle825image of Union
SweetMorning Slowbeats - LoFi
icon
LO
FI
SweetMorning Slowbeats - LoFi
icon
image of IconsMdiHomeimage of IconsMdiShowChartimage of IconsMdiSearch
React.tsx
Flutter.dart
vanilla.html
main
0↓ 1↑

Everything Instant.

From entire frame to a single component, Grida responds to your click. The headless, light-weight workflow will make your work even faster. Make every step of your work instant.

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 you productivity with one click.

Start free now

Focus on the Core

will do the rest

Products
Cloud
Globalization
Reflect
Surf
Assistant
Console
Appbox
Solutions
Showcase
Handoff
Get Started
Resources
Gettiing Started
Docs
API Docs
Papers
Blogs
Platforms
Figma
Sketch
XD
React
Flutter
Vue
Svelte
HTML/CSS
Reflect
Together
Let's create together
How to contribute
Github
Projects
Join us on Slack
Meetups
Reddit
Copyright © 2021 Grida.co
CookiesPrivacy policyTerms and conditions