Uisual: Free Figma, Framer, & Tailwind CSS Components & Templates
タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
Uisual: Free Figma, Framer, & Tailwind CSS Components & Templates
Uisual: Free Figma, Framer, & Tailwind CSS Components & Templates
How to replicate the Zelda BOTW interface with React, Tailwind and Framer-motion: Part 1
Zelda BOTW starter Complete demo https://www.gameuionweb.com/zelda-botw Articles links: Part 1 Part 2 Part 3 Stack React Tailwind Framer-motion (beta) Useful links for Tailwind: Cheatsheet VS Auto completion plugin Intellij Auto completion plugin Credits Items Data: Zelda Gamepedia Font: Reddit user /75thTrombone The repository is set up with Typescript but no obligation here, you can use either t
AI Tools in Framer
Elevate your website’s impact with powerful AI tools. Harness the capabilities of the best AI website builder, featuring AI Translation for seamless multilingual experiences, Text Rewrite for polished content, and AI Style to precisely define your brand tone. Elevate your website’s impact with powerful AI tools. Harness the capabilities of the best AI website builder, featuring AI Translation for
React + TypeScript: Framer MotionのvariantsでDOMツリーに調和したアニメーションを加える - Qiita
React + TypeScript: Framer MotionのvariantsでDOMツリーに調和したアニメーションを加えるJavaScriptTypeScriptECMAScriptReactframer-motion Framer Motionは、本番環境に対応したReact用のモーションライブラリです。構文は宣言的で、複雑なアニメーションのコードも簡潔に書けます。つまり、コードベースが読みやすく、保守しやすいということです。 ライブラリの基本的な使い方については「React + TypeScript: Framer Motionでアニメーションを加える」をお読みください。本稿は、公式サイト「Animation」の「Variants」について解説します。つぎのサンプル001が、公式作例を参考にしたプルダウンメニューです。 サンプル001■React + TypeScript: F
デザインツール「Framer」からReactへComponentとしてimportできる新機能handshakeのレビュー
デザインツール「Framer」からReactへComponentとしてimportできる新機能handshakeのレビュー FramerはXDでもFigmaの様なデザイン・プロトタイピングツールです。国内ではまだまだ採用事例は少なそうですが、Webフロントエンド…特にReactを採用している場合においてはかなりUIデザインとフロントエンド実装の連携が取りやすいツールであると言えます。 そんなFramerに「Handshake」という機能が追加されました（2021年10月現在ではAlpha版）。 これは、Framer上で作成したコンポーネントを既存のReactプロジェクトにimportできる機能です。 Framerってなに？ Framerは内部的にはReactを活用しています。Framer上でデザイナーがベクターなどを活用して作るComponentをSmart Component（= Des
Reactアニメーションライブラリ Framer MotionのHooksを試してみた | DevelopersIO
こんにちは。データアナリティクス事業本部 サービスソリューション部の北川です。 今回は、Framer Motionで提供されているhooksを使用してみたいと思います。 Framer Framerとは、コードベースのUIデザインツールになります。Framer側、React側それぞれでデザインをインポートし、取り込めるのが特徴です。 以下の記事がわかりやすいです。 Framer Motion Framer Motionは、Framerで作成したコンポーネントに対応したReactアニメーションライブラリです。 基本的な動作については、こちらの記事で紹介されています。 Framer Motionにはコンポーネントに渡すprops以外にも、面白いhooksを提供しています。 今回は以下の３つを試してみました。 useCycle useReducedMotion useDragControls 使用
Framerにブラウザ版が登場！Figmaとの違いは？改めて特徴をまとめてみた | Web Design Trends
Framerは、人気のUIデザインツールの1つです。日本でのシェアはあまり高くないかもしれませんが、機能が豊富で非常に魅力的な点も多いです。 そんなFramerですが、先日ブラウザ上で動作するWeb版が登場しました。ブラウザ上で動作するUIデザインツールと言えば、真っ先に思いつくのがFigmaです。 今回は、改めてFramerの特徴と、Figmaとの違いについてまとめてみました。 Framerとは Framerは、もともとプロトタイピングツールとして開発が進められてきたツールです。2018年に「Framer X」という名称で、現在のようなUIデザインツール＋プロトタイピングツールという形のツールとなりました。 現在では、公式サイト上で「Framer X」という表記は無くなっており、名称は「Framer」とされているようです。 FigmaやSketch、Adobe XDのようにUIデザイン制
Framer Motion React用アニメーションライブラリ「Framer Motion」 様々なアニメーションを比較的容易に実装できそうです 関連エントリ タイプライターアニメーション「type-this」 美しい背景アニメーション集「Ambient Canvas Backgrounds」 なめらかでFlashみたいなテキストアニメーション「TextyleFLIP.js」
FramerWeb先日本リリースとなり、これまでのFramerシリーズの集大成になりそうなFramer Web. ・Figmaのようにweb上で同時編集できる ・Figmaのデザインを直接インポートとして動かせる ・旧Framer（classic）の柔軟さと、Framer Xのコンポーネント部品の使いまわしやすさが融合など良い点はたくさんあるのはわかってたんですが、CoffeeScriptからReactベースになり、いまいちキャッチアップできてなかったので、連休中のお勉強も兼ねて、CheatSheetを作成しました。この記事ではこのCheatSheetを作ったいとについて触れたいと思います。 👇CheatSheetのファイルはこちらから。 ⚠️注意： このプロジェクトでは古い記法を用いています。 最新の記法との違いをご確認のうえ、お使いください基本コンセプト：デザインをちょっと動かしたい
Proud to present you Fakeflix, a Netflix Clone built with React, Redux, Firebase & Framer Motion
Proud to present you Fakeflix, a Netflix Clone built with React, Redux, Firebase & Framer Motion Hi guys, I'm proud to present you my latest project: Fakeflix. I have started this project with the purpose of learning how to structure a Web App of a mid-level complexity integrating the Redux logic and experiment with things like Redux Thunk, Redux Saga, Firebase and Framer Motion. It's a Netflix cl
How to Use Framer Motion with React to Build Progressive Web Applications
This article discusses the process and code of using Framer Motion with React to build Progressive Web Applications (PWA). Whether it’s a personal project or a professional one, building a fast-growing application, there are a lot of nuances to building features. Sometimes, you want to get that hover effect up and running without making many CSS changes. Or you don’t want to spend hours debugging
How to build a portfolio website using Next.js, Chakra UI, Framer Motion, and Three.js
Hello. I'm Takuya Matsuyama from Osaka, Japan, an indie developer making a Markdown note-taking app called Inkdrop. In this video, I share how I built my portfolio website using Next.js, Chakra UI, Framer Motion, and Three.js. I hope you enjoy it! ▶ Check out my product: Inkdrop - Markdown note-taking app https://www.inkdrop.app/?utm_source=devaslife&utm_medium=youtube&utm_campaign=vlog&utm_conte
まえがき React のアニメーションライブラリである Framer Motion を利用してページ遷移アニメーションを実装した際に、いくつか引っかかった点があったので、備忘録として残しておこうと思います。 バージョン Next.js v12.1.1 Framer Motion v7.6.1 今回実装するもの ↑ こんな感じのふんわりしたフェードイン / フェードアウトを実装します。 手順 1. アンマウント時のアニメーションを有効にする import { AnimatePresence } from 'framer-motion' import type { AppProps } from 'next/app' import 'styles/globals.css' const MyApp = ({ Component, pageProps, router }: AppProps) =>
🎅 メリークリスマス 🎄 この記事はGoodpatch Advent Calendar 2020 24日目の記事です。 Goodpatchのクライアントワークでは、エンジニアもデザインプロセスに参加し、一緒にアイデアを考えたり、プロトタイプを作って仮説検証を行うことがあります。普段はデザイナーがProttなどを使って、クリックスルーのプロトタイプを作るケースが多いですが、場合によってはエンジニアがコードを書いて実際に動作するプロトタイプを作ることもあります。 しかし、コードを書いてプロトタイプを作る場合、環境構築やライブラリ選定などを含めるとそれなりに時間も必要です。特に使い捨て型のプロトタイプを作る場合、プロトタイプの作成に時間をかけすぎないようにしたいので、そのようなケースではプロトタイピングツールを使うことでコードを書くよりも素早くプロトタイプをつくることができます。 今回ご紹介
はじめまして、こんにちは普段はアプリのUIデザインや施策を考えたりしています @kazkobayです！先日こんなツイートをしました。 Framer web理解してきた。既に存在するスニペットとコンポーネントを知っておく事と、必要なタイミングで呼び出していじるだけで、今までより早くプロトできそう。日本語解説ブログ無いから書いてみようかな？ — 小林 和央 / dely (@kazkobay) May 30, 2020 という事で、有限実行。Framer webを実際に実務で使った上で、よかったところ、改善して欲しいところを書いていきます。 これと合わせて友人の中島くんが最高のnoteを出していたので、これを利用して一緒に高速でいい感じのプロトタイプを作る方法を今回のnoteを書いてみたいと思います。 ✍️ このnoteを読めばできるようになるもの こんな感じのインタラクションやユーザのアクシ
Everything about Framer Motion layout animations - Maxime Heckel's Blog
March 8, 2022 / 17 min read Last Updated: August 6, 2022 Framer Motion has changed a lot since I last wrote about it. So much so that I recently got a bit lost trying to build a specific layout animation and my own blog post that actually looked into this specific type of animation was far from helpful 😅. Despite the updated section I added back in November, it still felt like I was not touching
デザインツール「Framer」の「Handshake」機能をNext.jsで試してみた | DevelopersIO
こんにちは！DA(データアナリティクス)事業本部 サービスソリューション部の大高です。 「Framer」というデザインツールには、デザインしたコンポーネントをそのままコードにインポートできる「Handshake」という機能があります。（2021年12月現在はベータ版） 今回は、公式サイトや以下の記事を参考にさせていただきつつ実際に「Handshake」機能をNext.jsで試してみたいと思います。 前準備 まずは、先にNext.jsのプロジェクトを以下のように作成しておきます。今回は「hello-framer-handshake」というプロジェクトにしました。 % npx create-next-app@latest --typescript Need to install the following packages: create-next-app@latest Ok to proce
The best responsive website templatesBuild stunning sites with top-notch Framer templates.
Figmaを脅かすウェブ制作ツール「Framer」 苦境を救った方向転換 | Forbes JAPAN 公式サイト（フォーブス ジャパン）
デザインソフトウェアを開発するオランダのスタートアップ、Framer（フレーマー）の共同創業者であるヨルン・ファン・ダイクとクーン・ボックは2021年4月、厳しい現実に直面していた。 アプリやウェブサイトの詳細なモックアップを作成する同社のプロトタイピング・ツールは、少数のデザイナーの人気を得ていたものの、売上高は2019年後半に記録した400万ドルをピークに低迷を続けていた。 フェイスブックの元デザイナーである2人は、アムステルダムのカフェで昼食をとりながらある結論にたどり着いた。それは、モックアップを実際のウェブサイトとして構築できるようにソフトを進化させることだった。 「Framerでウェブサイトをデザインし、パブリッシュボタンをクリックすればウェブサイトが完成し、われわれがホスティングもする」とボックは説明する。 ウェブサイトの作成を支援するWixやSquareSpace、ワードプ
Drams - Framer components inspired by Dieter Rams' principles
InnovativeUsefulAestheticUnderstandableUnobtrusiveHonestLong-lastingThoroughEnvironmentally friendlyLittle design
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
React用アニメーションライブラリ「Framer Motion」:phpspot開発日誌
Framer Web CheatSheetを制作しました｜Shintaro Nakajima
Next.js + Framer Motion でページ遷移アニメーションを実装する - Qiita
インタラクティブなプロトタイプのためのFramer入門｜Goodpatch Blog グッドパッチブログ
実務で使える！Framer webで高速プロトタイピング術｜kazkobay
Choose from 1000+ Framer HTML website templates
hochi.news
gravurezasshi9.doorblog.jp
tocotomo.hatenablog.com
hazakura60.hatenablog.jp
onryo-pawapro.hatenablog.com
www.jcp.or.jp