Check out our latest release | The Bundle by Grida, A Massive library of 3D Rendered PNGs for UI and Graphics Designs.
Figma、コードで。
Gridaはアプリ開発のためのオープンソースプラットフォームで、皆さんのピグマデザインを開発者にやさしいコードに変換します。
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
FI
TRPLVE
Lauren is listeningTRP
LVE
TRPLVE
TRIPPEMorning Slowbeats - LoFi
SweetMorning Slowbeats - LoFi
LO
FI
FI
SweetMorning Slowbeats - LoFi
デザインは一度だけ、実行はどこでも
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
FI
TRPLVE
Lauren is listeningTRP
LVE
TRPLVE
TRIPPEMorning Slowbeats - LoFi
SweetMorning Slowbeats - LoFi
LO
FI
FI
SweetMorning Slowbeats - LoFi
React.tsx
Flutter.dart
vanilla.html
main
0↓ 1↑
瞬く間に
フレーム全体から小さなコンポーネントまで、Gridaは皆さんのクリックに直ちに反応します。 ヘッドレス作業フローで皆さんの作業をとても早く完了することができます。 プロジェクトのすべてのステップを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;
`;
一つだけに集中します。
GridaはFigmaを完璧にサポートするために作られました。 皆さんに最も発展し、レスポンシブな開発経験を提供するためです。 ピグマからプロダクションまで行くためのあらゆる道具が、ここに集まりました。
Design to code はどのように作動しますか？デモ体験
魔法を見せてあげます。
クリック一回でどれだけ生産性が高くなるか驚くでしょう。
Figmaデザインリンク貼り付け。