ブラウザ上で簡単にデザインができるFigmaですが、人気の理由のひとつがプラグインを活用すれば自分好みにカスタマイズできる点でしょう。 たとえば、「できるだけ効率よく作業時間を短縮したい」というクリエイターの願いを叶えるAI機能を生かしたプラグインや、統一感のあるWebサイトに欠かせないデザインシステム作成プラグインなど用途によってさまざまです。 しかし、いざ探してみると、どこから見つけていいのか迷ってしまうほど膨大な数が公開されています。 そこでこの記事では、デザインをつくるときに役立つFigmaプラグインに絞り、リスト形式でご紹介します。 しかも、どれも無料。気になるアイテムはどんどん試してみましょう。きっとこれまで以上楽にデザインを作成できますよ。 このリストはこんな人におすすめ デザインのアクセントになる「あしらい」をさくっと作りたい どのプラグインを使えばよいか迷っている まわり
仕事が早い人は使っている最新Web便利ツール34選
「Webサイト制作がもっと楽になる方法ってないの？」 「Web制作の最新ツールを試してみたい」 そんな方へオススしたい、Webデザイン制作に役立つツールや素材をまとめてご紹介します。 「これ、もっと早く知りたかった」と思うような便利ツールを中心にセレクトしています。 2024年のデザイントレンドにもぴったりな新Webテクニックを、次のプロジェクトに活用してみてはいかがでしょう。 一緒に最新デザイン素材やツールも目を通しておくと良いでしょう、特に今回は豊作でした。 コピペ系CSSツール 60 CSS 3D Buttons Free Collection CSSとHTMLのみで作られた3Dボタンと、本物そっくりな見た目の「スキューモーフィック」ボタンのコレクション。クリックするとコピーできます。 275 CSS Gradients Collection 美しいCSSグラデーション250カラーが
2023/11/18(土)で開催されたフロントエンドカンファレンス沖縄 2023に関する、現時点での公開資料と X アカウントリンクをまとめました。 よろしければご活用ください。 はじめに 登壇者名は敬称略させていただいています。 スライドについては、ご本人がツイートで展開されていたり、スライドサービスにアップロードされているものを記載。 Discord の方だけで公開されている方は、勝手に公開しない方がよいかと思いましたので、記載しておりません。 X アカウントについては、資料に記載されていたり、資料公開のツイートで分かった方のみ記載。 リンクの間違い等ありましたらコメントいただけると助かります🙏 アーカイブ 本イベントは YouTube で配信されていて、アーカイブが残るようです。 タイムテーブル 10:10 [ゲストセッション]Figmaプロトタイプ入門〜インタラクションイメージの
iOSプロジェクトに対してモジュール分割しながらSwiftUIを部分適用している事例 - Mirrativ Tech Blog
こんにちは、クライアントエンジニアの竹澤(@to4iki)です。 MirrativのiOSチームでは、開発効率の最大化を狙い以下に取り組んでいます。 データフローの単方向化 (Fluxアーキテクチャの強制) 宣言的UIによるView実装 (SwiftUIの部分適用) 責務分割 (モジュール分割) 今回の記事では、どのような構成でSwiftUIを適用し始めたか、また、MirrativのiOSプロジェクトの構成やプロダクト特性の課題感からセットでモジュール分割を進めている点を紹介します。 背景 前提となるプロジェクト構成 導入に向けて決めたこと SwiftUIでどこまで実装するか 本体アプリではなくSwiftPackageを活用する 垂直分割するか水平分割するか 方針やTipsを明文化し育てる 新規開発部分のUI開発をFeatureモジュールで行う SwiftPackage: SwiftUI.
「Lottieロッティー」はベクター画像のアニメーションを実現できる技術・ファイルフォーマットです。 Lottieアニメーションの作り方編の記事（Figma編、After Effects編）では、Lottieの概要から作り方、ファイルの書き出し方までを紹介しました。本記事では、Lottieアニメーションの実装方法について紹介します。 Lottieの組み込みはプラットフォームに応じたさまざまな実装方法が用意されていますが、一般的なウェブの方法を例に紹介します。実装編の前編となる本記事では、手軽に組み込むことができるLottie-Playerを使用して実装します。 iOS、Androidアプリケーション等のそのほかの実装方法は公式ドキュメントを参照ください。 アニメーションの実装 ウェブ向けの実装方法は大きく2パターンあります。HTMLメインの方法と、JavaScriptメインで実装する方法で
Sneak Peek
Get in depth look into the Figma files of designers at top companies like Perplexity AI, Bezi, Lottie Files and more
ブラウザ上で共同編集ができ、業界のデファクトスタンダードと言っても過言ではないデザインツールのFigma。今回は、プロトタイプ機能のスマートアニメートのイージングに注目して解説します。 Figmaのイージングは、プリセットが豊富なうえに、カスタマイズが可能でアニメーションをこだわりたい方でもしっかり作り込める機能です。 プロトタイプ上での設定方法からウェブへの実装方法まで紹介していますので、デザイナーの方はもちろん、エンジニアの方にもおすすめの記事です。 用意されているイージング 前提知識として、イージングはアニメーションの変化の仕方を表現するものです。適切なイージングを設定することで、アニメーションの動きをより自然に表現できます。 Figmaでイージングを設定するには、プロトタイプ機能のスマートアニメートを利用します。スマートアニメートについては、以下の記事で詳しく紹介していますので、合
「Lottieロッティー」はAirbnb社が開発した、ベクター画像をアニメーションさせることができる技術・ファイルフォーマットです。 画質の劣化を伴わないLottieによるアニメーションの導入は、UI改善・コンテンツの没入感の形成・リッチな体験を提供する効果が期待できます。 本記事ではLottieの概要から、まずはデザインツール「Figma」を使ってお手軽にLottieを作る方法を紹介します。 ▼Lottieの作例 サンプルを別ウインドウで開く ソースコードを確認する Lottieとは ベクターとラスター まず、画像形式について少し整理しておきましょう。画像形式はベクターとラスターの2種類に分けられます。ベクターとラスターの違いについては記事『SVGで始めるマイクロインタラクション入門』で解説していますが、簡単にいうと拡大しても高い解像度を保ちボケないのがベクター画像、ボケるのがラスター画
「Lottieロッティー」はベクター画像のアニメーションを実現できる技術・ファイルフォーマットです。 Lottieアニメーションの作り方編の記事（Figma編、After Effects編）では、Lottieの概要から作り方、ファイルの書き出し方を紹介しました。そして、実装編の前編となる記事では、HTMLメインで実装できるお手軽な実装方法を紹介しました。 実装編の後編となる本記事では、JavaScriptメインに実装する方法の基本事項、およびパフォーマンス考慮についてのポイントを紹介します。 「Lottie=軽い」と思っていませんか？ 一般的にウェブサイトの「軽い」「重い」には、読み込みデータ量の大小を指す場合と、動作負荷でのもたつきを指す場合の2つの意味があります。確かにデータ量的にはLottieは軽いといえますが、実はLottieのアニメーションは表示や動作の負荷的に重くなりがちです。
これはno plan inc.の Advent Calendar 2023の11日目の記事です。 どもー、no plan inc.のおかむーです。 LottieというアニメーションファイルをSTUDIOのノーコードで実装してみたので、 今回も知見を共有できればと思います！！ この記事でわかること LottieアニメーションをSTUDIOで動かす方法がわかります 先に結論 STUDIO(ノーコード)でこんな感じのパリピなアニメーションが爆速で入れられます 中央上(ペンギンさん) サイド下(踊っている人々) Lottieとは Lottieは、JSONベースのアニメーションファイル形式です。これを使うと、静止画アセットを配信するのと同じくらい簡単に、アニメーションをあらゆるプラットフォームに配信できます。Lottieはどんなデバイスでも動作するサイズの小さなファイルで、ピクセル化を起こさずに拡大
昔作ったUnityのゲームアプリ、なぜか娘が楽しそうに遊んでいて、 Flutterでリメイクしてみよ！と思い立ち、無事リリースできたので、 構成とかをまとめてみました(*´ω｀*) どんなゲーム？ 鯖(サバ)の中から鮪(マグロ)を探す かわいいお気軽タッチゲーム🐟 実際のプレイ画面はこんな感じに せっかくリメイクするので、 「親子で一緒にたのしめるシンプルなゲーム」 にしたいな〜とおもい、子供でもできるシンプルなルールで、 大人も楽しめる難易度になるようがんばってます！ システム構成 全体の構成はこんな感じ Flutter(アプリ) Nuxt.js(LPサイト) unjs/nitro(OGP生成など) Firebase(Auth/Firestore) Cloudflare R2(OGP保存) TypeSpec(Dart/TS間でのモデル共通化) Cloud Run + Firebase
サーバーサイドの画像編集処理でメモリ使用量を抑える方法 | Raccoon Tech Blog [株式会社ラクーンホールディングス 技術戦略部ブログ]
株式会社ラクーンホールディングスのエンジニア/デザイナーから技術情報をはじめ、世の中のためになることや社内のことなどを発信してます。 こんにちは、開発チームの山下です。 業務ではスーパーデリバリーの開発を担当しています。 今回は私がスーパーデリバリーの開発で関わったサーバーサイドにおける画像編集処理でメモリ不足を防ぐノウハウを共有したいと思います。スーパーデリバリーではユーザーが任意の画像をアップロードできる機能があるため、まれに想定以上の高解像度画像が処理されてサーバーが Out Of Memory エラーを発生させることがありました。 そこで私が任されたタスクが「画像編集処理でメモリ不足を避けるために、バリデーションを追加する」です。 TL;DR サーバーサイドでの画像編集はメモリ使用量が高い操作です。 なぜなら処理される画像データはメモリ上に非圧縮のビットマップとして展開されるた
![サーバーサイドの画像編集処理でメモリ使用量を抑える方法 | Raccoon Tech Blog [株式会社ラクーンホールディングス 技術戦略部ブログ]](https://cdn-ak-scissors.b.st-hatena.com/image/square/1ba30738775f08153659422c29d77c3d32b19144/height=288;version=1;width=512/https%3A%2F%2Ftechblog.raccoon.ne.jp%2Fwp-content%2Fuploads%2F2023%2F07%2Fsmartphone_camera_bijin.png)
「Lottieロッティー」はAirbnb社が開発した、ベクター画像をアニメーションさせることができる技術・ファイルフォーマットです。 前回の記事では、Lottieの概要から、Figmaを使った作り方、LottieFilesを用いた書き出し方法を紹介しました。 本記事ではAdobe After Effectsを使ったLottieの作成方法から書き出し方、表示確認までを紹介します。 ▼Lottieの作例 サンプルを別ウインドウで開く ソースコードを確認する 作り方 - Bodymovinで書き出し After Effectsでアニメーションを作成し、After Effectsの拡張機能「Bodymovin」を使って書き出す方法と、「LottieFiles」で書き出す2種類の方法を紹介します。 ▼Lottieの作成・書き出し・実装までの一連の流れ 完成品のサンプルを別ウインドウで開く アニメーシ
コーポレートサイトをAstro3とmicroCMSとCloudflareをつかってリニューアルしました｜noco株式会社 note編集部
概要nocoの取締役CPOの多田と申します。 今回、gulpとejsでできていたコーポレートサイトを、Astro3を使ってリニューアルしました。 インフラはCloudflareを使い、コンテンツ管理にはmicroCMSを利用しました。CI/CDを完備し、TypeScriptによる素晴らしい開発体験の仕組みができたので共有します。 新しいコーポレートサイト背景弊社のコーポレートサイトは、2022年以前STUDIOを使ってノーコードで作成されていました。 STUDIOは手軽にかっこいいサイトが作れるため重宝していましたが、2022年の前半にいくつかの課題があり、gulpをつかって静的なサイトとしてリニューアルしました。 最大の課題は、「オウンドメディアをサブディレクトリで運用したい」というものでした。この手のサービスは「サブドメイン」を自由に設定することはできますが、リバースプロキシなどを駆使
はじめに 先日、社内で開催した「モバイルエンジニア向けの社内勉強会」が凄く実りがあったので、それについて書きました。 他の地銀や固い雰囲気のある会社さんで働いていらっしゃる方も、ぜひ社内で勉強会などをプレゼンするときに「北國銀行はやってますよ！」みたいに、この記事を積極的に使っていただけると嬉しいです。 どんな会社？ 我々デジタルバリューは金沢に本店がある「北國銀行」をはじめとする北國フィナンシャルホールディングスの一員で、システム開発を中心に仕事をしています。 銀行というと「半沢直樹」のイメージが強いかも知れませんが、北國銀行は全くそんなことがありません。 少し例を出すと、こんな感じです。 頭取とも会話する機会がある（何ならコーヒー飲みながら立ち話をすることもある） UNIQLOのTシャツとか髪染めもOK（勿論、お客様に失礼のないように言動は注意する） ただ求められるセキュリティ水準など
フロントエンド技術選定のヒント 【令和五年度版】 - KAKEHASHI Tech Blog
こちらの記事は カケハシ Advent Calendar 2023 の 4日目の記事になります。 こんにちは。カケハシでエンジニアをしている今川です。 今回はこれからフロントエンドの技術選定をする方向けに、どんな技術・ツールを使えばいいかのヒントになるような記事を書いていきたいと思います。 ただし、本記事では個人的な好みというよりは、npm trendsやGitHub Star Historyなど客観的な指標からどんな技術が世間に受け入れられているかの比較にしていきたいです。 もちろん数値などの比較以外に、ドキュメントを読んだり使ってみたりすることも重要だということは言うまでもないと思います。あくまでも今回の記事が知らないライブラリを知る機会だったり、ヒントになれば幸いです。 もくじ パッケージマネージャ ランタイム フロントエンドフレームワーク レンダリングフレームワーク ビルドツール
こんにちは、デザイナー・モーションデザイナーの田口です（@fuyuna_design）。 「ウェブサイトで使うアイコン・イラストを動かしたい」 「Lottieを作ってみたいけど、After Effectsはむずかしそう」 そう思っている方は多いのではないでしょうか？ これまでLottieといえばAfter Effectsで作るのが主流でしたが、いまはFigmaのプロトタイプとプラグインを使って作成できます！ この記事では、Figmaを使ったLottieの作成方法を解説します。プロトタイプ機能を使ったことがない人でも簡単に作れるので、ぜひチャレンジしてみてください。 FigmaでLottieを作るメリット Lottieは軽量かつ美しいアニメーションを手軽に実装できるライブラリです。FigmaでLottieを作成することで、次のようなメリットがあります。 After Effectsを使えなくて
gsapのScrollTriggerプラグインとlottie-reactを利用したスクロールアニメーションの実装について｜nap5
実装のポイントとしては2点あります。 1つ目はサイズをレスポンシブに調節することです。 emotionのcss文字列内挿でクラス指定できるのがハンディです。 // https://lottiereact.com/hooks/useLottie#params const {goToAndStop, animationContainerRef, View, animationItem} = useLottie( { animationData, loop: false, autoplay: false, className: css` width: 400px; height: 400px; @media (max-width: 768px) { width: 300px; height: 300px; } `, }, {} ); もう一つはScrollTriggerのハンドリングをPCとSP
はじめに こんにちは、計測プラットフォーム開発本部iOSブロックの中岡です。普段はZOZOMAT/ZOZOGLASSの運用・保守や計測技術を使った新規事業の開発をしています。 目次 はじめに 目次 計測フレームワークとは Swift Package Managerへの移行の経緯 Swift Package Managerへの移行 移行作業でハマったこと まとめ 計測フレームワークとは 私たちのチームは、ZOZOMAT/ZOZOGLASSの機能を開発し、それらをライブラリとしてZOZOTOWN iOSチームに提供しています。このライブラリのことを私たちは計測フレームワークと呼んでいます。そしてこのライブラリの提供方法として今まではCocoaPodsを利用していました。元々はCarthageを利用していたのですが、Apple silicon導入に伴いCocoaPodsへ移行しています。そちらの
はじめに こんにちは。カナリーでソフトウェアエンジニアをしている @snamiki1212 です。 私たちは 【もっといい「当たり前」をつくる】 をミッションに掲げている不動産テックカンパニーです。弊社では、現在下記のプロダクトを運用しています。 「CANARY」: BtoC のお部屋探しポータル（アプリ/Web） 「CANARY Cloud」: BtoB SaaS（不動産の仲介会社様向けの顧客管理システム） この記事では、 CANARY のアプリで利用している技術スタックについてまとめています。 （この記事は自分含めてアプリの開発をメインで行っていたエンジニア @yoshi-jr / @centerfield77 と共同で執筆しています） この記事を読んでわかること CANARY のアプリについて技術スタックの全体像・概要が理解できる 話すこと CANARY のアプリのアーキテクチャ C
GitHub - LottieFiles/dotlottie-rs: A universal, high-performance Lottie and dotLottie player built with Rust. Offers smooth rendering across platforms, low resource consumption, and extensive compatibility. Features FFI bindings for Kotlin, Swift, and WAS
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
魅せろ！ Flutter で目を惹く UI デザインを実装する - enechain Tech Blog
はじめに こんにちは、enechain でソフトウェアエンジニアをしている @tomohiko-tanihata です。 先日、国内最大級の Flutter カンファレンスである FlutterKaigi2023 が開催されました。私たち enechain は、モバイルアプリに Flutter を採用しており、昨年に引き続き、今年も FlutterKaigi の Silver スポンサーとして協賛しました！ チームのみんなでセッションに応募したところ、私のセッションが採択され、登壇する機会を得ました 🎉 セッションのタイトルは「魅せろ！Flutter で目を惹く UI デザインを実装する」で、目を惹く UI デザインを実現するための 4 つの方法について紹介しました。 当日の発表資料には GIF をたくさん貼っており、PDF で公開するのに不向きなスライドになっていたので、記事として F
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Figmaのデザイン制作が楽になる時短プラグイン30選
フロントエンドカンファレンス沖縄 2023 公開資料・Xアカウントリンクまとめ
最新版！ Lottieアニメーションの実装方法 - Lottie-Player編 - ICS MEDIA
Figmaでイージングを理解しよう！ プロトタイプの基礎から実装方法の紹介 - ICS MEDIA
最新版！ Lottieアニメーションの作り方 - Figma編 - ICS MEDIA
JSでLottieを配置する方法 - パフォーマンスの最適化方法も紹介！ - ICS MEDIA
【パリピ注意】LottieというアニメーションファイルをSTUDIOのノーコードで実装してみた - Qiita
娘のためにFlutterでゲームを作ってみた with Nuxt.js
最新版！ Lottieアニメーションの作り方 - After Effects編 - ICS MEDIA
地方銀行でモバイルエンジニア向け社内勉強会を実施してみた - Qiita
FigmaでLottieアニメーションを作ってみよう！作成方法やメリット、注意点を解説 - necco note | necco inc.
計測フレームワークのSwift Package Manager導入への道のり - ZOZO TECH BLOG
2024年｜CANARY アプリの技術スタック