ノーコーダーの 栗田かえで です。
これから【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！
コメント