今のデザイン作業で、無駄な手間や時間を感じていませんか？ 忙しい毎日のデザイン作業において、時間がかかる平凡なタスクや反復作業はできるだけ省きたいですよね。 プロも初心者も関係なく、「これさえあれば」と思うツールがいくつもあります。 今回は、作業をシンプル化し、生産性を最大化するために役立つFigmaプラグインをご紹介します。 作業を効率化するプラグイン：プラグインを活用すれば、細かな調整や手間がぐっと減ります。 初心者にも優しい使いやすさ：どのプラグインも操作がシンプルで、すぐに使いこなせるのがポイントです。 SEOにも効果的：効率を高めるだけでなく、コンテンツの質も底上げできます。

デザイントークンとは、UI要素のスタイルに関する値を定義したものです。デザイナー、開発者、プロジェクトマネージャーなど、プロダクトに関わる関係者がトークンを使用することで、コミュニケーションコストを削減し、正確な情報共有を実現できます。また、変化に強いコンポーネントを作成するためにも欠かせない要素です。 デザイントークンについて詳しく知りたい方はAdobe Blogに掲載されている以下の記事が参考になります。 デザイナーと開発者の連携を効率化するデザイントークンとは何か？ | アドビUX道場 #UXDojo 今回は、Figmaのプラグイン「Tokens Studio for Figma」（デザイントークン管理ツール）の基本編について書いてみたいと思います。本記事は、2024年8月時点の無料版に基づいたレビューです。 tokens studio公式サイト トークンの作成・定義 Primiti

リリース以来数多くのアップデートが行われ、多機能になっていくFigma。今回はそんなFigmaの基本機能を使用した、簡単なデザイン作成やあしらいづくりに活かせる表現TIPSを紹介します。 テキストの表現 マスク機能やエフェクト、そしてレイヤーのブレンドモードを使用したテキストの表現をいくつか紹介します。 TIPS：画像をテキストでマスクする マスク機能を使用して、画像をテキストの形に切り抜きます。 以下の手順で切り抜きます。 画像とテキストレイヤーを用意 画像が前面になるようにして、画像とテキストレイヤーを重ねる 両方のレイヤーを選択状態にして、右クリックメニューから［マスクとして使用］を選択（ショートカットキーは、Mac：control + command + M、Windows：Ctrl + Alt + M） マスクした後も、テキストレイヤーは編集可能です。 さらに画像をレイヤーブラー

みなさま、こんにちは🐰 株式会社Rabeeでデザイナーをしているkoppiです🐝 2023年6月頃に登場したFigmaのvariables(バリアブル)、なんだか難しそうで尻込みしていましたが、挑戦してみました。 今回はColorについて、手探りながら分かったことをここにまとめます。 variablesって聞いたことあるけど、何ができるの？ Figmaでどうやって設定するの？ という疑問をお持ちの、まだvariablesに触れたことのない方向けの内容になっています。 variables(変数)ってなに？ある値(カラーコードやサイズなど)を箱に入れて、名前をつけたものです。 これを使うと、何度も同じ色やサイズを使うときに、簡単に一度に変更できるようになります。 variableのイメージvariablesで管理できる4つのタイプ今回はColorについて取り上げますが、variablesで

ブラウザ上で簡単にデザインができるFigmaですが、人気の理由のひとつがプラグインを活用すれば自分好みにカスタマイズできる点でしょう。 たとえば、「できるだけ効率よく作業時間を短縮したい」というクリエイターの願いを叶えるAI機能を生かしたプラグインや、統一感のあるWebサイトに欠かせないデザインシステム作成プラグインなど用途によってさまざまです。 しかし、いざ探してみると、どこから見つけていいのか迷ってしまうほど膨大な数が公開されています。 そこでこの記事では、デザインをつくるときに役立つFigmaプラグインに絞り、リスト形式でご紹介します。 しかも、どれも無料。気になるアイテムはどんどん試してみましょう。きっとこれまで以上楽にデザインを作成できますよ。 このリストはこんな人におすすめ デザインのアクセントになる「あしらい」をさくっと作りたい どのプラグインを使えばよいか迷っている まわり

アイコンやスライド作成など、デザイナーに限らずちょっとしたデザインをつくる機会はありませんか？　そんなとき、Figmaのプラグインを使うと、いつもより少し凝ったデザインを手軽につくることができます。 今回は、画像加工やあしらいをつくるときに便利なプラグインを8個紹介します。2024年6月時点で、すべて無料で使用できるので気軽に試してみてください。 Figmaのプラグインを使ったことがないという方は、以下の記事で使い方を紹介していますので参考ください。 『Figmaを使いこなせ! デザイナー必須のおすすめプラグイン15選』 1. Noise & Texture Noise & Texture | Figma 「Noise & Texture」は、ノイズやさまざまなテクスチャーを画像として作成できるプラグインです。 プラグイン実行後、設定パネル内の［Add to Canvas］をクリックすると

Sneak Peek into Figma files of top designers for FREE

この記事について この記事は、スマートフォン時代のWebデザインスクール や Web制作の基礎から学べる「Webコーディングスクール」 の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 最近はスマホで見ることを前提にデザインされたWebサイトも増えてきていますが、そのようなWebサイトでもPCでみた時にも違和感のないデザインになっています。 また、総務省の「通信利用動向調査」を見ると、スマートフォンでもパソコンでもインターネットが利用されている事がわかります。 利用状況 2022年のインターネット利用率（個人）は84.9％となっており（図表4-11-1-2）、端末別のインターネット利用率（個人）は、「スマートフォン」（71.2％）が「パソコン」（48.5％）を22.6ポイント上回っている。 （出典）総務省「通信利用動向調査」 このようにスマホ、PCどのデバイスでも見ることが

こんにちは！株式会社Rabeeでデザイナーをしています、nanamiです🌿 今回は、日本時間の今日（2024.3.7）発表されたばかりのFigma新機能、マルチ編集機能について、その機能概要や使いどころを公式解説をもとにまとめました。 はじめに現在、Figma Community上ではこちらの公式解説が公開されています。 Figmaの公式解説は、実際に手を動かしてみる用の作業場も準備されていて作りが丁寧なので、こちらを読めば内容は理解できるのですが、この機能に関わらず、原則英語のFigmaデータしかない！ ということで、こちらの公式解説を和訳しながら噛み砕いた内容をまとめましたので、「機能の概要が知りたいけど、英語の解説を読むのに抵抗があって止まっている」という方の参考になると嬉しいです！ 機能概要｜ざっくり何ができるのかマルチ編集機能は、複数フレーム内の共通レイヤーを一気に選択し、それ

Web to Figma is the ultimate plugin to collect and save, design inspirations into Figma as flawless components. Farewell, screenshots! Web to Figma is the ultimate plugin to collect and save, design inspirations into Figma as flawless components. Farewell, screenshots!

2023年、当サイトで公開した記事の中からPocketにたくさん保存された記事やXにポストされた記事をジャンル別にまとめました。今年を振り返りつつ、来年のWeb制作にも役立つオススメです。 Web制作全般 UI/UX関連 デザインのテクニック・インスピレーション Photoshop, XD, Figma, VSCodeなどツール フォント・タイポグラフィ カラー HTML CSS: 基礎知識 CSS: 実装テクニック JavaScript フレームワーク・ライブラリ 無料素材 便利ツール・サービス 当サイトの購読は、RSS Feedを利用すると便利です。 コリスのRSS Feed ※旧Feedに登録されている人がまだ多いので変更をお願いします。 Web制作全般 2023年のもっとも大きなニュースの一つは、ChatGPTをはじめとするAIです。どのジャンルでもそうですが、完全に任せるのではな

Dev Modeをデザインシステムのワークフローに統合した後、私はチームがこの強力なツールを使いこなすのに役立つ、いくつかの洞察を得ました。ここでは、私の主な学びを紹介します。

ムードボードからスライドまでつくれる！テンプレ集Mood Board Templates：視覚的なアイデア・イメージを詰めるツールクリックして画像を拡大Screenshot: 酒井麻里子 via Figmaアイデア、デザインのイメージを膨らませたいときに活躍するFigJamテンプレート。 画像のプレースホルダー（枠）をクリックして、画像を置き換えることができます。 テンプレートを使ってみる＞＞SWOT Analysis：自己分析をはじめたい人にピッタリのフォーマットクリックして画像を拡大Screenshot: 酒井麻里子 via Figma4象限でSWOT分析（強み・弱み・機会・脅威）をするためのFigJamテンプレート（具体的なやり方は第二回でご紹介しています）。 内部要因と外部要因・プラス要因・マイナス要因の軸で分けたエリアがすでに用意されているので、ふせんを貼っていくだけですぐに使え

こんにちは。Technology部のいとしゅんです。 生成AIやノーコードツールなどの発達によりWeb制作の手段が増えている昨今ですが、海外で注目されている「Webflow」をご存じでしょうか？ 今回は、ノーコードツールWebflowの基本操作と応用的な使い方について紹介したいと思います。 Webflowとは？ Webflowは、実装者向けのノーコードツールといえます。 ノーコードというとプログラミング知識のない人向けのイメージを持ってる方も多いですが、本来は実装者の負担を減らし、効率よく実装するために作られたツールです。 Webflowはまだまだ機能的に充実しているわけではありません。ですが、CSSプロパティやインタラクションなど細部の設定ができるようになっており、実装の負担を減らすことに期待が持てます。 アカウント登録 Webflowの作業は全てブラウザ上で操作が可能です。利用するには

Technology部の菊池です。 今回はAWS Amplify Studio（以下、Amplify Studio）を使って、Figma to code並びにModelとBindする方法を解説します。 この方法をうまく活用すれば、Webサイト制作でCSM的な形で運用することも可能かと思います。ぜひご参考になさってください。 Figma to Codeとは Figma to CodeとはFigmaで作成したコンポーネントをReactのコンポーネントに変換し、AmplifyのUI Libraryに取り込むための機能です。 その他にも、画像や文字に関する情報をAmplify Studioで管理し、ReactのコンポーネントとBindingしたり、onClickなどの各種アクションイベントをノーコードで設定したりと、多様な用途があります。 事前準備：ローカル環境の構築 Figma to codeを

WebデザイナーやUIデザイナー、クリエイターのみなさんは、日々デザイン作業に追われています。 アイデア出し、レイアウト、アニメーションなど、さまざまな作業に時間と労力を割かなければなりません。 さらに常に変化するデザインの流行や新しい知識、技術を身につける時間も必要。 「できるだけ効率よく作業時間を短縮したい」と思っている人も多いでしょう。 そんな悩みを解決するのが、AIを活用したFigmaプラグインです。 今回紹介するAIプラグインを使えば、以下のようないままで時間のかかっていた作業を自動化、一瞬で作成できます。 デザインのアイデア出し レイアウトの自動生成 デザインをコードに変換 アニメーションの自動生成 デザインの品質チェック AIプラグインは、デザイン作業の「自動化」と「効率化」を実現できます。 これにより、デザイナーは、インスピレーションやアイデアを考える時間や、新しい知識や技

概要 私が開発しているWebアプリケーションではUIライブラリとして MUI を使っています。 そのMUIがFigma用のUI Kitを公式に提供しています。 FigmaのUI Kitとは定義済みのUIコンポーネントが沢山入ったFigmaファイルの事を指しています。 コーディングにおけるライブラリの様なもので、オリジナルのデザインをFigmaで作成する時にUI Kitで定義されたUIコンポーネントを再利用することで、典型的なデザインを自分で作る必要が無く、結果的に高品質なデザインをより短時間で作成できるメリットが期待できます。 実際に私もこのUI Kitを使っていて、とても気に入っているので紹介します。 導入方法 MUIのFigma UI KitはMUIストアで販売されています。 こちらのKitではMUIが提供している全ての機能、コンポーネントを使うことが可能です。 有償での販売となってい

みなさん、デザインツールの Figma を使っていますか？ 私はまだ「使っている」と言えるほど使えていません というわけで勉強会を開催して勉強します Figma とは 公式の紹介文は以下のとおりです デザインの追求からプロトタイプ作成、制作物のコーディングまで、Figmaはチームがコラボレーションして製品開発するためのプラットフォームです 本記事のタイトルと同じように、「デザインからデモ・実装までチームで製品開発できる」旨が書かれています まさにその通りで、ブラウザ上で UI をデザインし、そのまま動かしてみることができ、最終的にはコードの生成までできてしまうツールです Figma の人気 2022年に世界中のデザイン関係者を対象としたアンケートでも Figma は圧倒的な人気です いずれのランキングでも2位の10倍以上の得票数になっています メインで使っている UI デザインツール第1位

ブラウザ上で共同編集ができ、業界のデファクトスタンダードと言っても過言ではないデザインツールのFigma。今回は、プロトタイプ機能のスマートアニメートのイージングに注目して解説します。 Figmaのイージングは、プリセットが豊富なうえに、カスタマイズが可能でアニメーションをこだわりたい方でもしっかり作り込める機能です。 プロトタイプ上での設定方法からウェブへの実装方法まで紹介していますので、デザイナーの方はもちろん、エンジニアの方にもおすすめの記事です。 用意されているイージング 前提知識として、イージングはアニメーションの変化の仕方を表現するものです。適切なイージングを設定することで、アニメーションの動きをより自然に表現できます。 Figmaでイージングを設定するには、プロトタイプ機能のスマートアニメートを利用します。スマートアニメートについては、以下の記事で詳しく紹介していますので、合

「Lottieロッティー」はAirbnb社が開発した、ベクター画像をアニメーションさせることができる技術・ファイルフォーマットです。 画質の劣化を伴わないLottieによるアニメーションの導入は、UI改善・コンテンツの没入感の形成・リッチな体験を提供する効果が期待できます。 本記事ではLottieの概要から、まずはデザインツール「Figma」を使ってお手軽にLottieを作る方法を紹介します。 ▼Lottieの作例 サンプルを別ウインドウで開く ソースコードを確認する Lottieとは ベクターとラスター まず、画像形式について少し整理しておきましょう。画像形式はベクターとラスターの2種類に分けられます。ベクターとラスターの違いについては記事『SVGで始めるマイクロインタラクション入門』で解説していますが、簡単にいうと拡大しても高い解像度を保ちボケないのがベクター画像、ボケるのがラスター画