Figma、コードで。

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

デザインは一度だけ、実行はどこでも

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↑

瞬く間に

フレーム全体から小さなコンポーネントまで、Gridaは皆さんのクリックに直ちに反応します。 ヘッドレス作業フローで皆さんの作業をとても早く完了することができます。 プロジェクトのすべてのステップを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

一つだけに集中します。

Grida demo app - design to code
gradient-bg

GridaはFigmaを完璧にサポートするために作られました。 皆さんに最も発展し、レスポンシブな開発経験を提供するためです。 ピグマからプロダクションまで行くためのあらゆる道具が、ここに集まりました。

Design to code はどのように作動しますか?
デモ体験
Grida demo app - design to code
gradient

魔法を見せてあげます。

クリック一回でどれだけ生産性が高くなるか驚くでしょう。

Figmaデザインリンク貼り付け。

本質だけに集中してください。

が残りをやります。

製品コードアシスタントCLICloudグローバリゼーションReflect UIVSCode
リソースGetting Started文書API 文書ブログ
プラットホームFigmaReactReact NativeFlutterHTML/CSSReflect UI
一緒にする。GithubプロジェクトサポートSlackに参加してくださいレディット
Copyright © 2022 Grida Inc.
クッキー政策個人情報政策契約条件