Figma

【Figma】たった6分で事前準備をしよう

事前準備をしよう

ノーコーダーの 栗田かえで です。

これから【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!

ABOUT ME
Nekobun
ぱっぱらぱーなモブキャラ系JK。

COMMENT

メールアドレスが公開されることはありません。