「忙しいデザインや開発の現場で、新しいツールを試す時間がなくて…」そんな悩みを抱える方も多いのではないでしょうか？ でも、ツールの選択ひとつで、プロジェクトの効 […] Webデザイナー＆開発者必見！2024年公開の神ツール総まとめ80選はPhotoshopVIPで公開された投稿です。

🎄この記事はenechain Advent Calendar 2024の18日目の記事です🎅 こんにちは！enechainデザイナーのET(@et_universe)です！ JTC総合職やデザインファームでの経験ののち、今年の10月からenechainで働いています。 enechainでは、有志のエンジニアとプロダクトデザイナーによるデザインシステムチームが活動しており、私も入社直後からデザインシステムチームに参加しました。現在はFigmaのUIコンポーネントライブラリのページ構成や使いやすいコンポーネントの作りについて考え改善をしています。 ※デザインシステムについて、今までの経緯などはメンバーの記事が詳しいです！ techblog.enechain.com はじめに この記事では、「Figmaコンポーネントライブラリで便利なページ構成ってなんなんだろう？」「理想的なUIコンポーネン

Untitled UIブログで公開された「The Ultimate Guide to Creating Color Palettes in Figma (free Figma file)」より、許可をもらい日本語抄訳しています。 無料のFigmaライブラリとこの完全ガイドで、理想のカラーパレットを作ろう！ 色彩理論やアクセシビリティの基本、さらにオンラインやFigma内で使える便利な配色ツールを一挙にご紹介します。 「配色ツールを使ってみたけど、なんだかなんだかしっくりこない…」 そんな経験、ありませんか？私も同じ悩みを抱えていました。 そこで、Figmaで理想のカラーパレットを作れるように、実践的なガイドを用意しました。 このガイドでは、色彩理論やアクセシビリティ、色のコントラストなどの基本から、WebやUIデザインで役立つカラーパレットのつくり方まで、すべて網羅しています。 さあ、一緒

今のデザイン作業で、無駄な手間や時間を感じていませんか？ 忙しい毎日のデザイン作業において、時間がかかる平凡なタスクや反復作業はできるだけ省きたいですよね。 プロも初心者も関係なく、「これさえあれば」と思うツールがいくつもあります。 今回は、作業をシンプル化し、生産性を最大化するために役立つ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］をクリックすると

Information ArchitectureFintech DesignAI DesignDesign SystemsBrand DesignContent DesignDesign SprintMobile DesignEnterprise DesignSolo DesignerAccessibility DesignGrowth Design

この記事について この記事は、スマートフォン時代の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です。どのジャンルでもそうですが、完全に任せるのではな

FigmaでAI検索を構築する過程においては、コストを抑えつつ、機能強化に向けて何十億もの埋め込みを生成し、インデックス化するなど、多くの技術的ハードルに取り組む必要がありました。

65インチ4K有機ELレグザがまさかの半額に!年末年始は映画にゲーム三昧もいいかも #Amazonセール

こんにちは。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が提供している全ての機能、コンポーネントを使うことが可能です。 有償での販売となってい