【bubble&Figma】bubble と Figma の関係性

初めまして！ノーコーダーの栗田かえでです。

今回は初登場 Figma についてお話しできたらと思います。

そもそも ‘Figma’ って？

Figmaとは一言で言うと「ブラウザ上で簡単にデザインができるツール」です。主にスマートフォンアプリやwebサイトを作るときに使われます。

ワイヤーフレーム_※1やプロトタイプなど_※2を作る際に必要なツールが揃っているため、誰でも手軽にデザインできるという特徴があります。

以前デザイナーの間では「Adobeツール」が主流でしたが、近年ではその手軽さから「Figma」が波に乗ってきているそうです。

※1…Webサイトやアプリにおけるレイアウトを定めたもの。
※2…ワイヤーフレームに動き(画面遷移の流れ、アニメーションなど)をつけたもの。

Figmaが人気な理由は手軽さ以外にもたくさんあります。
その中でも特に私が感動した人気の秘訣を3点挙げていきたいと思います。

web上で作業をするため、パソコンとスマホどちらからも編集できるというメリットがあります。また、複数人で同時に編集できるというところもポイントです。

「コンポーネント機能」とは、頻繁に使う部品をどの画面でも共通で使えるようにしておく機能のこと。要素の配置が楽になります。
また、共通化しておくことで一斉更新が可能になります。
例えば、全画面共通で使っていたボタンのスタイルを変更するとなったとき、変更がとても容易になります。

戻りたい日時を指定して、その時点でのデザインに戻すことが可能だそう。
新旧デザインを比較するときにも使えるし、データを全消ししちゃった時の救済にもなりそうですね。
まるで私のためにあるような機能だ←よくやらかす人

ここまでご覧になった皆さんの中にはこう疑問に思った方がいらっしゃるはず。

「なんでNoCodeの学習サイトでFigmaの説明をしているの？」

その質問、お答えしましょう。

ずばり！
bubbleとFigmaは連携することができます(拍手喝采)

Figmaで作ったデザインを用いてbubbleでアプリを作ることができるとは、なんて便利なんでしょう！

本当に連携できるのか調べるために、これから【Figma】編ではTwitterUIを作って最終的にbubbleと連携させるところまでできたらいいなと思っています。

(あえてTwitterを選んだ理由は、誰でも完成形が想像しやすいからです。)

最後まで暖かい目でお付き合いください☺️

ワイヤーフレーム_※1やプロトタイプなど_※2を作る際に必要なツールが揃っているため、誰でも手軽にデザインできるという特徴があります。

そんなに簡単ならぱぱっとTwitterUIを作ってしまって、さっさと連携させてしまいましょう！

、、ちょっと待ってください！！

調べたところ、既に TwitterUI のテンプレートも無料で配布されていました。

それがこちら。

作るも何も、もう完成してますやん、、！！

実際にbubbleでTwitter cloneを作るときは、こんな完璧なテンプレートがあるので、わざわざTwitterのUIを一から作る必要はないです。

しかし！

オリジナルのアプリを作る際はデザインを自分で作る必要があります。

NoCode Walkerでは一からアプリを作成できるよう、Figmaを用いたデザインの仕方からしっかり取り上げていこうと思います！

Figmaさんとお友達になるまでの道のり、よーいStart！

今回はFigmaとは何者なのか、またbubbleとの関係性についてお話ししました。Figma初心者の方、ぜひ一緒に慣れていきましょう☺️

それでは次の記事でまたお会いしましょう！
Enjoy NoCode！