ノーコーダーの 栗田かえで です。
これから【Figma編】では、Figmaを用いてTwitterUIを作成していきます。
今回はまず導入として、環境を整えていきましょう!
ハードルはとっても低いので、すぐできちゃいますよ👍
「そもそもFigmaって何?」と思われた方は、まずこちらの記事をご覧ください
それでは始めていこーう
アカウント新規登録
まずはアカウント登録から行っていきましょう!
こちらのリンクにアクセスして、画面右上の「Sign up」をタップ!

そして、この画面が出るのを確認してください

①メールアドレス
②パスワード
を入力
③「Create account」をタップ!
次にこの画面が出てきたら、

①Figma上で使いたい自分のユーザー名
②Figmaを用いて何をするか()
を入力!
②では、最終的にbubbleと連携させたいので、私はSoftware Developmentを選択しました。
すると以下のような画面が表示されるはずです。
今回はチームではなく、個人で開発するのを想定しているため、「Do this later」をタップでOKです。

⭐️もし「チュートリアル」が始まったら、右上の×ボタンを押してください。
たったら〜〜〜

ついにFigmaさんとお会いすることができました!👏
今からすごいものを作り始める雰囲気がありますね
にやけちゃいます(近づくな危険)
一応、今のうちにホーム画面も確認しておきましょう
左上のハンバーガーメニュー > 「Back to Files」をタップ!

この画面が出てきましたか??

ここからプロジェクトを変更したり、プラグインを追加したりできます!
使う時がきたら、また詳しくご説明します☺️
デスクトップアプリをダウンロード
Figmaにはweb版があるため、そちらで作業を行っても問題ありません。
しかし、web版だと機能が制限されてしまう部分が少しあるのと、デスクトップ版の方が操作性に優れているという理由から、ダウンロードを推奨します
では早速、こちらからデスクトップで使えるアプリケーションをダウンロードしましょう!
この画面が出てきたら、左側のそれぞれ自分のパソコンにあったリンクをタップ!

ダウンロードされたファイルを開いてみましょう!
※私の場合(Macユーザー)、ダウンロードフォルダで開くとアラートが出てきて「’アプリケーションフォルダ’で開いてね」と言われました
慌てずアプリケーションフォルダにダウンロードしたものを移行したら、開けるようになりますよ👍
開いたら、先ほどweb版のFigma上で見たものと同じような画面が出てくるはずです!

黒になっててかっこいい✨
特に感動したのが、データ量の軽さ!ダウンロードに1分もかかりませんでした。
他のデザインツールと比較してみても、その差は歴然です。
Figmaさん、すごいっす、、
まとめ
今回は、これからFigmaを使っていくために事前準備をしました!
真っ白なフレームにわくわくした方も多かったのではないでしょうか?
次回からは実際にツールを触っていきますので、一緒に頑張っていきましょう☺️
それではEnjoy NoCode!
コメント