デザインがほぼそのままWebサイトになる時代が来てるぞ...! / Framer,WebflowでFigmaからそのままWebサイトを公開してみる

  Рет қаралды 32,425

カイクン-デザイン解説@BONO

カイクン-デザイン解説@BONO

Күн бұрын

Figmaはコードとの融合が強いですね〜。
元々グラフィックツールというより、コードベースのデザインの垣根をなくすツールとして開発されているのでこの流れはすごく良いな〜と思います。
Figmaのオートレイアウト/コンポーネント機能を、一緒にUIトレースしながら学べるチュートリアル解説動画、ただ今製作中です...(コメントで応援して下さい)
❐ 紹介したサービス&使ったもの
-------------------------------------------
Figmaのデータ
www.figma.com/file/gHV5s00f34...
紹介したキャリアの動画はこれです
• UIデザイナーの出世キャリアを整理したら、全...
Webflow
webflow.com/
Framer
www.framer.com/
Bitfrost
/ 1625185603808821251
❐ BONOとは UIとUXのコミュニティ『BONO』
-------------------------------------------
デザイナーになりたい、デザインをもっと伸ばしたい。
成長速度は現場のプロに聞いて、仕事を見て学べば倍以上になります。し、同じ気持ちのメンバーと一緒に成長すればさらに上がります。
詳しくはこちら!参加お待ちしてます
www.bo-no.design/?...
❐ 目次
-------------------------------------------
00:00 Figmaすげー!
01:03 紹介するサービス
02:06 今回使うFigmaのデータ
02:33 Framer:コピペでWebサイト
05:57 Webflow:コピペでWebに
11:19 流れは実際のコードでも
12:39 作るだけやりたい人はコード理解必須です。
❐ 未経験からデザイナーになった人のインタビュー集
-------------------------------------------
BONOのメンバーのインタビューです。
こちらも参考に。
• BONOな人-インタビュー
❐ UI/UXデザイナーになるためのロードマップ
-------------------------------------------
紹介したコンテンツはこちらにあります〜!
最初の「はじめてのUIデザイン」までは無料でできます💡
www.bo-no.design/rdm/roadmap-...
#Webデザイン #figma #webデザイナー

Пікірлер: 20
@eikosato3265
@eikosato3265 Жыл бұрын
良いコンテンツありがとうございます。役立ちました。
@-bono2271
@-bono2271 Жыл бұрын
ありがとうございます!
@Nsho2480
@Nsho2480 8 ай бұрын
最近webサイトをfigumaで作成しようとしていたので最高でした!チャンネル登録しましたー framerの使い方も教えてくれる動画待ってます!
@-bono2271
@-bono2271 8 ай бұрын
Framerは日本だとSTUDIOがあるから 多分流行らないんですよね〜〜〜〜〜〜 今のところFramerの方が機能的に便利そうですが!
@kennygo5053
@kennygo5053 4 ай бұрын
the best
@R-ef9sd
@R-ef9sd 4 ай бұрын
しゅげぇ…のところで笑いましたー本当にしゅげぇですね!!! (1年かけてやっと実装できるようになった後にこの動画を見たので、なんかショックでした~泣) これからFramerとWebflow触ってみます! カイクンの動画を見るだけで、かなりスキルアップできています! ためになる情報、本当にありがとうございます!!
@-bono2271
@-bono2271 4 ай бұрын
ありがとうです!この辺に関しては今年で随分とまた進みそうなので 時が来たらまた紹介します🙋
@user-fm5tk7pc1g
@user-fm5tk7pc1g Жыл бұрын
いつも拝見させてもらってますm(_ _)m 個人的に2者択一で言ったらwebflowの方かなぁと。 動的な部分はコードを生成した後で、それをゴニョゴニョと修正する形なんですかね。 今すぐにでもインストールして試してみたいのですが、また英語表記の仕様にしばらくは悪戦苦闘しそうです(^_^;)
@-bono2271
@-bono2271 Жыл бұрын
なんか細かい部分は多少調整しないといけないような気はします(か、ツールに適合すればなくなるケースはありそうです) 英語使えると幅広がるので個人的には臆せず気になったら触ってみてもらいたい...!
@love4AI
@love4AI Жыл бұрын
Figmaが気になり出してからずっと動画拝見しています! どうせならFigmaで作ったものがそのままwebページになれば良いのになぁ…って思っていたら、ついに実現されるようになったんですね🥺 すごいです👏✨ いつもわかりやすい動画ありがとうございます🙇‍♀️ これからも動画見ながら勉強させて頂きます!!
@-bono2271
@-bono2271 Жыл бұрын
ありがとうございます!! GenerativeAIも出てきたしこの領域はもう1段階ぐらい進んでくれる気がしてます!
@user-to1ow3uj2g
@user-to1ow3uj2g 3 ай бұрын
ノーコードでWebサイトを作ろうと考えているのですがfigmaからframerにデータを移した後、figma上でのプロトタイプの動きを再現するにはコードが必要になるのでしょうか??
@-bono2271
@-bono2271 3 ай бұрын
もちです!
@kaniggia
@kaniggia Жыл бұрын
これはwebflowの場合、有料プランしか読み込みできないのでしょうか?
@-bono2271
@-bono2271 Жыл бұрын
いや、多分大丈夫なんじゃないかな〜と思います。 詳細ページにプランの内容はなかったです university.webflow.com/lesson/figma-to-webflow-plugin
@kaniggia
@kaniggia Жыл бұрын
ありがとうございます! 試してみます。
@dmcreatorjapan
@dmcreatorjapan Жыл бұрын
この手のツールは疑心暗鬼しかない。 ・細かい部分の調整はできるのか ・長い目でみたとき、メンテナンスを考えたら結局コードで管理した方が安全 ・海外のサービスに依存するのは危険すぎる ・GAタグは? 使えるとしたら ・単発イベントの告知 ・テンプレート的なWebサイトでいい場合
@-bono2271
@-bono2271 Жыл бұрын
まあ自分で作れるに越したことはないですよん
@user-wo2gm1dj9g
@user-wo2gm1dj9g 19 күн бұрын
figmaでデザインしたものをコピペしようとしたら文字以外コピペ出来ません。どうしてでしょうか?
@-bono2271
@-bono2271 7 күн бұрын
プラグインの話ですか? コピペできない時にエラーが出てると思うのでそれをちゃんと読んでください。 オートレイアウトじゃなかったり、コンポーネントがあるとWebflowのは動かないです
Figmaのプラグインを使ってSTUDIOの構築をする方法
14:51
動画でWebデザインにtorikumu
Рет қаралды 2,1 М.
Can You Draw A PERFECTLY Dotted Line?
00:55
Stokes Twins
Рет қаралды 99 МЛН
ОДИН ДЕНЬ ИЗ ДЕТСТВА❤️ #shorts
00:59
BATEK_OFFICIAL
Рет қаралды 9 МЛН
【UX/UIデザイナー】カナダでWEBデザイナーとして働くSHOHEIさんに密着
11:02
カナダ留学アカデミー | エンジョイカナダ
Рет қаралды 11 М.
[Tips and Tricks] Figma's Infinite Canvas App "Figjam" is Amazing!
14:15
Webflow Conf 2023 Keynote
1:10:24
Webflow
Рет қаралды 118 М.
【スキルアップ】Figmaを極めろ!実践的なFigmaの使い方
18:54
HIROCODE.ヒロコード
Рет қаралды 33 М.
Can You Draw A PERFECTLY Dotted Line?
00:55
Stokes Twins
Рет қаралды 99 МЛН