Figmaでちょっとしたデザインをつくるときに使っているプラグイン8選 - ICS MEDIA
アイコンやスライド作成など、デザイナーに限らずちょっとしたデザインをつくる機会はありませんか？ そんなとき、Figmaのプラグインを使うと、いつもより少し凝ったデザインを手軽につくることができます。 今回は、画像加工やあしらいをつくるときに便利なプラグインを8個紹介します。2024年6月時点で、すべて無料で使用できるので気軽に試してみてください。 Figmaのプラグインを使ったことがないという方は、以下の記事で使い方を紹介していますので参考ください。 『Figmaを使いこなせ! デザイナー必須のおすすめプラグイン15選』 1. Noise & Texture Noise & Texture | Figma 「Noise & Texture」は、ノイズやさまざまなテクスチャーを画像として作成できるプラグインです。 プラグイン実行後、設定パネル内の［Add to Canvas］をクリックすると
Functional UI Kit
Precise Figma & React components. Packed with best practices, unified prop names & consistent design and code. Precise Figma & React components. Packed with best practices, unified prop names & consistent design and code. Precise Figma & React components. Packed with best practices, unified prop names & consistent design and code.
Figma×SVGatorでつくるSVGアニメーション - necco note | necco inc.
今回はFigmaとSVGatorを使ってアニメーションを作る方法をご紹介します。 手軽にアニメーションを作成してみたいと思った時に触れたSVGatorですが、アニメーションの知識があまりない、私でも簡単に作ることができました。 Lottieアニメーションをつくりたい！という方は、下記の記事もおすすめです。 After EffectsとLottieを使ったアニメーションについて、モーションデザイナーの田口さんが記事を書いています。ぜひ合わせてご覧ください。 ウェブサイトやアプリで使えるLottieアニメーションの基本。作成方法や注意点などを解説 Lottieアニメーションの作成に必要な「Bodymovin」のダウンロード・インストール方法 使ったきっかけ 私が入っているコミュニティで、「SVGatorの有料プラン1ヶ月使えるけど使ってみる？」と声をかけていただいたことがきっかけでした。 SV
Figmaの作業を効率化！ 知らないと損するショートカット集 - ICS MEDIA
ウェブ制作における定番になりつつあるデザインツール「Figma」。本記事では、Figmaの知らないと損するショートカットキーを紹介します。 よく使う便利な機能を呼び出すショートカットキーを覚えておくことで、作業効率が上がるのでしっかり覚えていきましょう。 本記事では基本機能のショートカットキーだけでなくマニアックなものまで紹介します。初心者はもちろん普段からFigmaを利用している方にも役立つ内容をまとめています。 ショートカットキー一覧の呼び出し（control+shift+?） Figmaでは、見やすいショートカットキー一覧をいつでも表示できます。ショートカットキーを忘れてしまった場合には、control+shift+?(macOS) /control+shift+?(Windows)を押しましょう。 画面下部にショートカット一覧が表示されます。使ったことのあるショートカットは色が付き
Figmaデザイン管理保守の効率化 〜 PayPayフリマのリファクタリング事例
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。PayPayフリマのデザイナー加藤です。 PayPayフリマはCtoCのフリマサービスです。PayPayで簡単・安心に売り買いできるだけでなく、ユーザー同士が交流・情報交換できる投稿機能や新たな製品情報をユーザー自身が登録できる機能といった他のサービスにはない独自の機能も提供しています。 今回はインターフェースデザインツールFigmaの活用でどのようにUIコンポーネントの管理保守を効率化したのか、PayPayフリマにおけるプロダクト内デザインデータ運用の工夫をご紹介します。 旧Figma運用フローの課題 現在PayPayフリマでは、プロダクト内の画面UIやコンポーネントのデザインデータを、近年リリースされたFigmaの
UI以外でも大活躍！Figmaで修正に強いデザインデータを作る方法
本連載では、SmartBankのデザイナーが「デザイナーの業務効率化」をテーマに、FigmaやNotionを活用した「業務効率改善のTips」を紹介していきます。初回で焦点を当てるのは「Figma & UI以外のデザインデータ」についてです。 こんにちは！SmartBankのデザイナーをしている春山（@yuki930）です。 私たちは、B/43というVisaプリペイドカードと家計簿アプリがひとつになった「家計簿プリカ」という新しいジャンルのサービスを運営しています。 初回となる今回は、「Figma & UI以外のデザインデータ」をテーマに、FigmaのAuto layout機能、Component機能、Component Properties機能を活用した、変更に強いデザインデータの作りかたを解説します。 UI以外をFigmaでデザインするメリット・デメリット 最初に、UI以外のディスプレ
Figmaに公開されている日本のデザインシステム系ファイル
Figmaを絡めて新たなデザインシステム構築を手伝う仕事が生まれそうなので、調査がてらFigmaに公開されているデザインシステム系ファイルの情報をまとめました。 なお、海外のデザインシステムは大量に公開されており、特に有名企業のシステムはどこの記事でも紹介しているので、この記事では日本で公開されているFigma関連のファイルに限定して取り扱います。 検索する限りでは意外と日本企業が公開しているファイルは少ない。 なお、ここに掲載されている以外で公開されているファイルがありましたら@kgsiまでご連絡いただけると嬉しいです。 FALCON by SPEEDA コンポーネントごとにページを分けている VariantsはDefaultやLargeなどアッパーキャメルケースを採用 *書体はHiragino Kaku Gothic Proを指定 SmartHR UI by SmartHR 全コンポー
デザインシステムの作成に便利すぎるFigmaおすすめUIキット【2022年版】
「ウェブの制作コストと時間を節約したい」 「デザインを統一して、一貫性をもたせたい」 「制作に必要なものだけまとめたい」 「シェアしたときのデザインのずれを防ぎたい」 プロジェクトを続けているうちに、ページによってボタンや文字サイズ、余白スペースの幅などがばらばらで、統一感がなくなってしまった、なんて経験があるかもしれません。 さらに、複数のチームによる開発では、デザインのズレだけでなく、同じ作業を繰り返すなど非効率さが目立ち、全体のモチベーションもだだ下がりなんてことに。 一貫したデザイン設計により、技術的な問題を防ぐことができるデザインシステムを作成しようと思いつつ、最初に作るのが時間もかかって大変だから、と導入をあきらめていませんか。 今回は、デザインシステムとしてそのまま使えるFigma用おすすめUIキットをまとめてご紹介します。 プロトタイプ作成に必要なパーツが一式すべて揃い、プ
CSSそこそこわかる人がとりあえず figma で何か作ることになった時の tips 集｜seya
こんにちは。こちらはLinc'wellアドベントカレンダーの24日目です。 最近 figma を使い始めたのですが、私はキャリアとしてはフロントエンドエンジニアとしての歴が長く、何か実現したいデザインが頭に思い浮かんだ時、思考としては 「display:flex の justify-content:space-between なレイアウト作りたいんだけどな〜」とCSSでイメージしてしまいます。 きっと同じ「CSSで言ってくれないと分かんない」という方もいらっしゃるのではないかと思ったので「CSSで言うこれはこんな感じで作る」という情報が役に立つのではないかと思い、今回筆を取りました。 ※ この記事は最初のとりあえずの索引としては有効だとは思いますが、真面目に入門する際には figma の公式チュートリアル動画を一通り手を動かしながら見ることをオススメします。この記事で書いていることは大体カ
デザインツール「Figma」を5名のデザインチームに導入して半年経った振り返りとビジネスメリットについて｜Marino yokoi
はじめまして＆こんにちは！株式会社スペースマーケットデザイン部マネージャーの横井 @rinoside です。 2019年4月にSketchからFigmaへの移行を行い、運用をはじめて約半年が経ちました。会社組織で移行を検討している方に少しでも参考になればと思い、移行した経緯やそのメリット・デメリットなどの振り返りをまとめてみました。 主に金銭面などのビジネス的なメリットや移行時・運用時の振り返りをメインとしているため、基本的な使い方などの解説は省いています。 ある程度Figmaの知識がある方で、組織導入を検討している方・どうやって導入・説得するか悩んでる方に参考にしていただければ幸いです。 ※この記事はスペースマーケットアカウントのマガジンにまとめられます Figmaの前に使っていたツールFigmaの前はSketchを使っていました。といってもSketchも実はその年にPhotoshopか
【まずやること編】 #Sketch から #Figma にお引越し｜nozoe | conoito
・・・ ノゾエ（@conoito）です。 今日は、みてねのデザインデータが移行されるまでをご紹介します。 移行完了までのイメージを掴むための参考にどうぞ！ ・・・ 今年3月頃に、SketchからFigmaに、UIまわりのデータの移行を行いました。 あれから半年が経った9月現在、特に大きな問題もなく快適に本運用を行なうことができています。 この記事が、みなさまの快適Figmaライフへの第1歩となりますように、約半月 で行なった、 試験運用 〜 移行完了 するまでの過程を3ステップでご紹介します。 ● この記事をお勧めする人 - Figmaへの乗り換えを検討している => Figma、いいですよ！この記事にメリットたくさんまとめたので見ていってください！ - まず何から始めればいいかわからない => 1. ファイルの階層を計画する から読み進めましょう！ - 実際のところ、崩れとかでデータ移行
ウェブ制作がすご楽に！便利な最新オンラインツール33個まとめ
この記事では、日常行っているWebデザインやグラフィックデザインの制作が格段スピードアップする、便利な最新オンラインツールをまとめてご紹介しています。 カテゴリ分けされたこれらのツールやサービスを利用することで、面倒な作業を自動化し、生産性をアップすることができるでしょう。一度使いはじめると「これなしじゃ考えられない。」、そんな便利ツールが揃います。 コンテンツ目次 1. デザインコレクション 2. イラスト系ライブラリ 3. モックアップツール 4. デザインからコードへの変換ツール 5. プロトタイプツール 6. 生産性アップツール ウェブ制作がすご楽！便利な最新オンラインツールまとめ デザインコレクション SVG Arista このツールはCSSコードを使って、アップロードしたSVGファイルのstrokeとfillプロパティのアニメーションを作成するAnimistaのスピンオフ・プロ
Figma FAQ 、 よくある質問 #01｜HikaruTayama
どうもです、Figma が気になるみなさん。 Figma コミュニティで色々質問 & 回答いただきました。 なんと約 60 種類！知らなかった解決策とか発見できて楽しいですね。 Slack だと流れていってしまうので、よくある質問や便利と思った解決策をまとめていこうと思います。 今回のテーマは始めたてに引っかかる『意外と知らないこと 10 選』です。 Q1. オブジェクトとオブジェクトの隙間を知りたい ・オブジェクトを選択 ・知りたいものにマウスカーソルを重ねて option を押すZeplin などにもある隙間の距離を表示する機能です。Photoshop もあるんですがわざわざ押さないので、知られてなかったりしますね。 Q2. ネスト化されたファイルの中からダイレクトで選択したい ・Command 押しながら選択意外と知られてないシリーズ、Frame や Group 内でも直接選択できま
FigmaにPluginがついに来たのでよさそうなものをご紹介｜ふじけん / kenshir0f
こんにちは。 Figma plugin の beta版の開発の招待が来なくて悲しんでいましたが、日本時間の2019年8月2日(金)に公式でリリースされました🎉 これを書いているのはプラグインローンチ時刻の深夜2時なので、朝起きて仕事でちょっと触ってみたいという方に向けて、いくつか良さそうなプラグインを紹介したいと思います。 Pluginのインストール方法Figmaのデスクトップアプリをアップデートし、画面左上のPluginsを選択します。 あとはPlugin一覧から入れたいプラグインの Install を押すだけです。 あまりにもインストールが速いし、簡単にアンインストールできるので気軽にトライできます。 Autoflow画面遷移図を自動で書き出してくれるプラグインです。 シンプルな一本の線のみで描画されますが、Frameを追従することはありません。よくFrameを移動するときに重宝され
Chapter 5: プロトタイピング｜ふじけん / kenshir0f
はじめにこの記事は、UIデザインツール「Figma」の解説記事の第5章になります。 概要や過去の解説記事は下のマガジンからどうぞ。 今回はFigmaのプロトタイピングについて紹介します。 前回は記事はこちら プロトタイピングとはアプリやWebなどのUIデザインではプロトタイピングは非常に重要です。 プロトタイプはUIを確認するだけでなく、さまざまなアイデアを試したり、インタラクションや画面遷移を体験したり、周りの人にデザインを共有してデザインを練り直したりするための素晴らしい方法です。 この記事ではFigmaのプロトタイピングのやり方と機能を紹介します。 準備1: 画面の用意まずはプロトタイピングする画面を用意します。 今回は↓の図のように2つの画面(Frame)を用意し、ボタンそれぞれ1つずつ置いたシンプルな画面で試してみます。 Frameの名前は分かりやすいよう「白い画面」「青い画面」
Chapter 4: コンポーネントとスタイル｜ふじけん / kenshir0f
はじめにこの記事は、UIデザインツール「Figma」の解説記事の第4章になります。 概要や過去の解説記事は下のマガジンからどうぞ。 今回はコンポーネントとスタイルについて紹介します。 前回はこちら コンポーネントとはUIデザインにおけるコンポーネントとは、デザイン全体で再利用できるUIの要素のことをいいます。ボタンやアイコン、ヘッダー、フッターなど、同じデザインの要素を各ページで毎回つくるのではなく、再利用することで作業時間の短縮、プロジェクトで一貫したデザインの作成、また、メンテナンスしやすいデザインデータを作ることができます。 この章では具体的なUIを作りながら、コンポーネントのメリットを体感してみたいと思います。 コンポーネント化するUI要素を用意するまずはUIで最もよく使われる要素のひとつであるボタンをコンポーネント化していきましょう。 図のように、四角形の要素(Rectangle
Chapter 3: Figmaのレイヤーを扱う｜ふじけん / kenshir0f
はじめにこの記事は、UIデザインツール「Figma」の解説記事の第3章になります。 概要や過去の解説記事は下のマガジンからどうぞ。 今回はレイヤーの概念と扱い方について紹介します。 レイヤーの概念を知る下の画像のように、Frameの上に四角形のオブジェクト(Rectangle)とテキストで作られたボタンがある例で見ていきます。 (例は前回の第2章で作ったものをそのまま使います) 画面左のレイヤーパネルでは、 iPhone X の下にボタン(Text)とRectangleがやや右によって表示されているのが確認できます。これは、iPhone X というFrameの中に要素が入っている状態を表しており、この状態をFrameの中に要素がネストしているとも呼びます。 このレイヤーを横から見てみるとこのようなイメージです。 Frameの中にRectangleがあり、Rectangleの位置より上にTe
Chapter 2: Figmaの基本操作｜ふじけん / kenshir0f
はじめにこの記事は、これからFigmaを使おうと思っている方や効果的な使い方を知りたい方に向けた、Figmaの使い方の解説記事になります。 前回の記事では概要とセットアップの仕方を書きましたが、今回の第2章では「Figmaの基本操作」についてご紹介します。 noteをマガジンにまとめているので、よろしければこちらもどうぞ。 今回はUIを作りながらFigmaの操作に慣れていきたいと思います。 UIデザインする画面を開く前回の最後にダウンロードした「Figmaのデスクトップアプリ」を開き、自身のプロジェクトを選択して、ファイルをクリックします。 ↓の何もない画面が表示されると思います。 デザインはここからスタートです。頑張っていきましょう。 画面の見方を知るUIデザインをつくるこの画面は、主に4つの要素でできています。 ① Layer Panel (レイヤーパネル) ② Canvas (キャン
Chapter 1: Figmaの概要とセットアップ｜ふじけん / kenshir0f
はじめにSketchやAdobeXDなど、様々なUIデザインツールが業務の中に取り入れられている中で、Figmaの登場によってデザイン環境がガラッと変わりつつあります。 従来のデザイン製作フローとは異なる同期的なスピード感のある開発環境へと変化し、ディレクターやエンジニアによるUIデザインレビュー、デザインスプリントでの複数人によるプロトタイプ作成など、デザイナー以外の方や様々な状況で大きなメリットがあり、他のツールと一線を画する存在となっています。 この記事では、これからFigmaを使おうと思っている方やFigmaの効果的な使い方を知りたい方に向けて、アカウント登録から基本的な操作方法、コンポーネントの作り方やコミュニケーションでの工夫など、基本から応用まで幅広い内容をまとめてマガジンにしてお届けします。 第一章は主にFigmaを初めて目にする方向けの「Figmaの概要とセットアップ」に
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
✏️ Learn & Dev：Starkとは？ Figma Pluginを使って簡単にアクセシビリティ・チェックしよう！｜noko｜note