Figmaが気になったので始めてみた
はじめに
今回は自分の備忘録とアウトプットを兼ねて、Figmaを触ってみた感想等を綴ってみました。
自己紹介
こんにちは、Fenです。
初めましての記事となります。
フロントエンドは勉強中です。
触ろうと思ったきっかけ
先日、翔泳社主催のDevelopers Summit 2023に申し込みをさせていただき、様々なセッションを観させていただきました。
その中で、Figmaをご紹介している方のセッションを拝見し視覚的に見ても面白そう！と思い実際に触ってみたレポートです。
※Developers Summit 2023は終わっておりますが、私にきっかけをくださった方のセッションリンクを貼らせていただきます。
今回は、セッションでご紹介してくださったFigmaとLocofyに触ってみたいと思います。
Figmaって？
FigmaはWebブラウザで操作が可能なデザインツールです。
デザイナーの方に主に使用されていますが、エンジニアの方も最近使っている方が増えてきたな、と思ってます。
私自身が知ったきっかけは社内での勉強会で触っている方のレポートを拝見したりしておりました。
FigJam
FigJamはWebブラウザで操作可能なホワイトボードツールです。
似たようなものにMiro等がありますが、FigJamはスタンプやエモートなどのコミュニケーション機能が最も印象に残りました。
そしてこれがFigJamテンプレート、、、滅茶苦茶充実しとる。。。なんと300を超えるみたいです
Locofy
こちらは拝見させていただいたセッションで紹介されていたものです。 LocofyはFigma・Adobe XDでデザインしたものから、自動的に「React」「HTML・css」「Gatsby」「Next.js」「React Native」に変換しコードを出力してくれる優れモノです。
まずはともあれ、触ってみよう
まあ何はともあれまず触ってみないと何も分からないですよね。
FigmaはGoogleアカウントからサクっと登録できるので、フットワークもとても軽いです。
そして、メニューが表示され、、、英語！！！！！
まあ、英語でもいいのですが日本語に直しました。（右下の？マークからChange languagesで日本語を選べます）
今回はMaterial 3 Design Kitを使用させていただきました。
ここから色々と配置していきます。左カラムにあるところからいじれるのかな～？
Componentsの中にはBadgeやMenu等種類が豊富で、ドラッグ&ドロップで置けちゃいます。
いや～分かりやすい。
とりあえずありもので作ってみました。
もうちょっといじりたい...もっといじらせて...となりましたが今回は時間が取れず。
Locofyにコード化してもらおう
Locofyに登録しよう。右の「Try for Free BETA」から登録します。
色々聞かれますが、答えます。
Figma用のPluginを取得できるので取得します。
「試す」をクリック
Demo画面に移りますが、先ほどの作った場所に戻ります。
上にある「T」マークの右にあるアイコンからプラグインを選択します。
Locofy FREE BETAを実行します。
連携を求めまれますので、連携を実施します。Locofyに登録していれば、自動でやってくれます。
フレームワーク等を設定する画面がでますので、好きなように入力してください。
要素をクリックしてそれぞれにタグを設定します。
レイアウトによってもそれぞれ変更ができます。エフェクトもつけられるっぽいです。
Previewを押すとどんな画面か確認できます。
準備ができたら、View CodeをクリックしView Code in Builderをクリックします。
作成されると以下の画面がでますので、見てみましょう
こんな画面がでます、思ったより本格的！
keyframe等もきちんと反映がされており、すごいですね...。
右上にあるExportからTypescriptファイルやcssを出力できますので、あとはローカル環境でいじりましょう！
最後に
今回はちょっと触ってみた、だけとなりますがFigma APIなどまだまだやりたいことがあるので次回できればやっていきたいと思います。
Locofyは奥が深く、もっとやりたい気持ちがたくさんです。
普段は触る機会がなく趣味程度ではありますが、休日などに触ってどのデザインが美しいか、など触って知見を深めていければなと思います。
Discussion