CSS

Expo

Flutter

Framer motion

Headless UI

HTML

Jetpack Compose

Material UI

NextJS

NuxtJS

Preact

React

Scss

SolidJS

Storybook

Svelte

Swift UI

Tailwind CSS

Vue

Web Components

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

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

CookiesPrivacy policyTerms and conditions