Grida

Docs

Github

Slack

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

Morning Slowbeats - LoFi

Sweet nothings

TRP
LVE

TRP LIVE

Lauren is listening

TRP
LVE

TRIPPEMorning Slowbeats - LoFi

SweetMorning Slowbeats - LoFi

LO
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

Morning Slowbeats - LoFi

Sweet nothings

TRP
LVE

TRP LIVE

Lauren is listening

TRP
LVE

TRIPPEMorning Slowbeats - LoFi

SweetMorning Slowbeats - LoFi

LO
FI

SweetMorning Slowbeats - LoFi

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.

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

Paste your figma design url.

Focus on the Core

will do the rest

Products

Cloud

Globalization

Reflect UI

Assistant

VSCode

Console

Surf

Solutions

Showcase

Handoff

Resources

Gettiing Started

Docs

API Docs

Papers

Blogs

Platforms

Figma

Sketch

React

Flutter

Vue

Svelte

HTML/CSS

Reflect

Together

Projects

Join us on Slack

CookiesPrivacy policyTerms and conditions