はじめに
記事の目的
デザイナーがせっかくfigmaを丁寧に作っても、開発者がデザインを無視して開発しちゃうことよくあるよね😭まじ悲しい！
もう少し簡単に協力する仕組みがあれば、もう少しマシになるはずです！
なので、FigmaとReactの連携方法を紹介して初心者でも簡単に相互にやり取りする方法をまとめます！
対象読者
フロントエンド開発者、UI/UXデザイナー、プロダクトマネージャー
必要な前提知識
基本的なFigmaの操作やReactの基礎知識
必要なツールと環境の準備
Figmaアカウントの作成と基本設定
Anima(figma plugin)
React開発環境の構築codesandboxが手軽
Figmaでのデザイン作成
こんな感じのログイン画面を作りたいです。
そのためにはテキスト、ボタン、インプットが必要です。
なので、適当にそのcomponentを作成します。
autolayoutを駆使するとあとでいい感じになります。
デザインとテキストは分けて作ります。
ボタンなら、これらが必要です。
色味(variant)
中身の要素(children)→テキストのことだと思ってもらえると。
inputならこれらが必要です。
ラベル(label)
中のテキスト(value)
必要に応じて色味のvariantも追加しましょう
デザインからReactコンポーネントへの変換
animaを起動します。(ログインが必須です。)
画像のように適当なコンポーネントを選択するといい感じにreact-componentを出力してくれます。
codesandboxに入力する
とりあえずreact-tsのテンプレから構築
component dirを切って適当にファイル作成、さっき生成したコードを貼り付け
app.tsxに構造化
import "./styles.css";
import { Input } from "./components/Input";
import { Button } from "./components/Button";
import { Text } from "./components/Text";
import { useState } from "react";
export default function App() {
const [email, setEmail] = useState<string>("test@example.com");
const [password, setPassword] = useState<string>("********");
return (
<div className="container">
<Text style="header">ログイン</Text>
<Input placeholder="email" value={email} setValue={setEmail} />
<Input placeholder="password" value={password} setValue={setPassword} />
<Text style="text">サインアップはこちら</Text>
<Button variant="primary">ログインする</Button>
</div>
);
}
するとこんな感じに表示されます
でも、ちょっとデザイン崩れがある。
なので、width:100%とか、text-align:leftとか追加すると..?
ウルトラ上手にできました〜〜⭐️
コンポーネントの最適化とリファクタリング
なんか自動生成されたやつは<div />だった。<input />に変更
setValueのようなreact依存のものは生成ができなかったので、いい感じにPropsを調整
まとめ
なんかいい感じにできました〜〜
html to figmaのように既存のwebページからfigmaへ移すことも可能です！
いい感じにデザイナーと開発者をsyncできる仕組みが整ってきていい感じですね〜
今年の抱負
メディカルフォースをデカくします！
Discussion