デザインシステム入門！Web制作初心者が知るべき基本原則とFigma活用法
この記事について この記事は、スマートフォン時代のWebデザインスクール や Web制作の基礎から学べる「Webコーディングスクール」 の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 emiと申します。USAGI DESIGN emi.というサイトでWebデザインやコーディング練習用のデザインデータを配布しています。Webデザインをメインにストックイラストレータ、グッズデザインなどしております。 私が最近学んでいること、「デザインシステム」について書きたいと思います。 なぜデザインシステムを学んでいるのか。ですが、デザインの制作時にFigmaを使う機会が増えて、今までPhotoshopやXDで作業していたときよりも、コンポーネントを意識するようになったからです。 まだWeb制作を学び始めたばかりだから、デザインシステムとか難しそう。と思っている人もいるかもしれませんが、学
明日からできる、爆速Figma活用術 - エムスリーテックブログ
こんにちは、エムスリーデザイングループでチームリーダーをやりながらエンジニアリングGも兼務しているプロダクトデザイナーの大月です。 私が所属しているエムスリーのデザイン組織は以下２つの強みがあります。 多様性 スピード 特に日々の業務では"スピード"をとても大切にしており、 デザインを早くすることで、検証回数を増やし、PDCAを多く回し、価値創造を加速することを意識しています。 こうしたエムスリーのスピード文化から、日々の業務を効率化できるFigma活用法もデザイナーのみんなで学びあっています。 今回は、エムスリーのデザイナー間で話題になった、意外と知らなかった、知っているだけで日々の業務が一気に楽になった！というFigma活用術を紹介します。 少しでもFigmaでのデザイン作業をスピードアップさせたい方の参考になれば幸いです！ 爆速のための3種の神器 1. 秩序をつくる ファイル構成とコ
UIデザイン用のシンプルにデザインされた高品質なSVGアイコンが2000種類以上！ 改変・再配布も可の太っ腹ライセンス -Atlas Icons
WebサイトやスマホアプリのさまざまなUIデザインに適した、シンプルなデザインのSVGアイコンが完全無料で利用できるAtlas Iconsを紹介します。 UIデザインをはじめ、ビジネス、ソーシャル、ハンドジェスチャー、ガジェット、エコロジー、フィットネス、食べ物・飲食物、医療など、33種類のカテゴリに2,000種類以上のアイコンがセットになっており、個人でも商用プロジェクトでも完全に無料で使用できます。 SVGアイコンだけでなく、Webフォント、Figma用なども揃っているので、使い勝手もよく、非常に便利です。 Atlas Icons Atlas Icons -GitHub Atlas Iconsの特徴 Atlas Iconsのダウンロード Atlas Iconsのアイコン Atlas Iconsの特徴 Atlas Iconsは、WebサイトやスマホアプリのUI用にシンプルにデザインされた
もっと早く読んでおけばよかった！ Figmaの一歩踏み込んだ実践的な使い方まで、詳しくていねいに解説された良書 -Figma for UIデザイン
Web制作やUIデザインの必須ツール「Figma」は2022年7月に日本語版がリリースされ、9月にはAdobeの傘下になることが発表され、今後もますます必須ツールとして欠かせないものなるでしょう。 Figmaの基本的な使い方をはじめ、実践的なUIデザインの制作、Figmaならではの生産性を上げ効率的なテクニックなどを詳しく解説した解説書を紹介します。 本書はリファレンスとプラクティス両方の側面があり、Figmaをこれから始める人にも、Figmaをもっと使いこなしたい人にもお勧めの一冊です。 本書は、Figma日本語版に対応した解説書です。インストール・セットアップをはじめ、基本的な使い方、Figmaならではの生産性を上げる機能の解説だけでなく、ワイヤーフレームやプロトタイプや詳細デザインの作成など実践的な作業フローまで学べます。チュートリアルに使用されるファイルは、サポートサイトからダウン
全部無料！Figmaで使える良質UIテンプレート50選（ウェブ＆アプリ素材）
無料で利用できるFigmaは、はじめての人にもオススメのUI作成ツールです。 ブラウザ上で利用できたり、他の人とリアルタイムで同時編集、プラグインによるカスタマイズなど、Figmaの基本的な使い方を押さえておけば、すぐに美しいUIデザインを作成できるのも人気の理由でしょう。 この記事では、Figmaで利用できる無料UIキット＆テンプレート素材をまとめています。 ウェブサイトやスマホアプリの作成に必要なパーツを揃えた、UIキットを使えば、より素早く効率的にWebサイトやスマホアプリのデザインを作成できます。 各素材はカテゴリ別に分けています、今後も随時アップデート予定です。 コンテンツ目次 1. Webデザイン便利ツール 2. 配色ツール 3. デザインツール 4. プロトタイプ・アイコンツール 5. フォント・書体ツール 6. クリエイティブ・面白ツール Figma 無料UIキット Car
FigmaとNotionでUML・経理処理・デザインまでAll in oneな仕様書を書いて、更新・共有を楽にしてる話 - Qiita
前提としての情報 単に「Figmaで要件定義のためのUMLも、外部設計のためのデザインも、内部設計のためのERDも全部つくるよ〜〜」という話をすると、ERD書くならデザインツールなんて使わないで、DBMSから自動生成できるツールとか使った方がいいじゃん、みたいな疑問が出るのは重々承知なので、そもそもこの形式に落ち着いた前提事項を書いておきたいと思います。 ご興味がなければ読み飛ばしてください。 筆者の仕事範囲 さて、冒頭で「事業会社でデザイナーとPMの狭間みたいな仕事をしてます」と書きました。キャリアの背景的には受託のPMっぽい仕事（厳密には違うんですが、本旨ではないので割愛します）→事業会社のインハウスデザイナー→現職という感じで、外渉から手を動かす所まで、必要ならなんでもします。 ざっくりいうと、機能の起案をして、経理などの関連部署に相談して、WBS引いて、UML書いて、画面遷移図書い
【開発チームのUX改善】Figma導入で感じた5つのメリット | 株式会社PLAN-B
PLAN-BでUIデザイナーをしています、栗田といいます。 私は普段「Figmaユーザー」なのですが、所属するプロダクトではPhotoshop・XDを用いてデザイン制作がされていました。 ＼Figmaの方が好き／ という軽率な気持ちでFigma導入を進めると、予想以上にチームメンバーから良いフィードバックを貰えたので、実例を交えつつFigmaで感じた5つのメリットを紹介したいと思います。 コメント機能で開発コミュニケーションが楽にFigmaのコメント機能はデザイン上に吹き出しアイコンを残せるため、どこのことを話しているかが直感的に分かりやすくなっています。 私たちのチームでは、コミュニケーションの度にしていた pngを書き出して… メモを記入して… チャットして… という手間を一度に省くことができました。 チャットでのコミュニケーションだとログを辿るのが大変です。「いつごろ話したか？どんな
Figmaを使いこなせ! デザイナー必須のおすすめプラグイン15選 - ICS MEDIA
ICS MEDIAでは「Figma」の機能紹介記事を多く公開しています。Figmaは標準でも十分な機能が備わっていますがプラグインを利用することでより便利にカスタマイズ可能です。 今回の記事では、プラグインの使い方とオススメのプラグインを紹介します。Figmaは他のデザインツールと比べ、プラグインを利用するまでのハードルが低く、とても使いやすくなっています。まだ使ったことがない人や便利なプラグインをもっと知りたいという方にオススメの記事です。 Figmaプラグインの使い方 Figmaのプラグインを見つけるにはFigmaコミュニティが便利です。Figmaアプリのホーム画面の「コミュニティ」ボタンから、Figmaコミュニティへアクセスしましょう。 プルダウンから「プラグイン」を選択すると、コミュニティに公開されているプラグインの検索が可能です。 プラグインアイコンの右下のマークで、対応している
Figmaリンク集まとめ！【Figma】 - Qiita
はじめまして、ますみです！ Figmaとは？ 1. 公式ページ A better way to design. Design, prototype, and collaborate all in the browser—with Figma. 要するに、ブラウザ上でデザインして、プロトタイプして、チーム開発をするのに向いているデザインツールです。 2. Sketch はもういらない？ デザインツール Figma の紹介 こちらの記事は、わかりやすく要点だけ抑えていて、最初は読みやすいと思います！ 入門編！ 3. サクッと始めるウェブデザイン【Figma】 こちらの本では、一冊のウェブ本として無料で配布しているチュートリアルになります。 実際に業務委託などの仕事の現場でFigmaを使ってきた私自身の知識と経験を活かして、作成しています。 4. Figmaの基本【これからはじめるFigma】
応募者全員がもらえる🎉 ノンデザイナーズ・デザインブックの特典PDF「Figmaで実践する デザイン4つの基本原則」
不朽のデザイン書「ノンデザイナーズ・デザインブック」 今年も2022年のキャンペーンが期間限定で開催です！ なんと応募者全員が、「Figmaで実践する デザイン4つの基本原則」の特典PDFをもらえる太っ腹キャンペーンです。毎回当ブログで紹介しているので、前回以前のPDFを入手している人は欠かせませんね。もちろん、今回が初めてでも大丈夫！ 応募の対象となる人は、「ノンデザイナーズ・デザインブック」の愛読者限定。 さっそく、PDFの入手方法から紹介します。 手順は、3ステップです。 Twitter、Instagram、Facebook、note、個人ブログなどで『ノンデザイナーズ・デザインブック』に関するコメントを投稿。その際ハッシュタグ「#ノンデザイナーズ・デザインブック」を入れてください。 特典申込みフォームに必要事項を入力し、送信。 ※ノンデザイナーズ・デザインブックを購入した方のみ（自
AdobeのFigma買収とAdobe XDのこれから
2022年9月15日に、AdobeがUIザインツール「Figma」を買収する意向であることが発表されました。 これに関してWebデザイン勉強中の方などが「これからFigmaとAdobe XDのどちらを勉強するべき？」と困っているツイートを拝見したのでそれに対する私なりの回答と、 Webデザイナー・UIデザイナーたちの反応や温度感 Web業界の方が意外と見落としている事 脱Adobeしたい方のためのガイド などについてまとめてお話ししたいと思います。 なおこの記事に関しては事実だけでなく、私の予想や、私の周囲のWeb制作者の方の反応や予想なども含まれることをあらかじめご了承ください。 追記: Adobeの製品一覧からXDが消滅し、Adobe XD公式ページは消滅 「Adobeのすべての製品一覧」から #AdobeXD が消えました。「XD」で検索しても出てきません。 Dreamweaverで
デザインシステム｜デジタル庁
デジタル庁サービスデザインユニットでは、一貫したデザインや操作性でウェブサイトやアプリを提供するための仕組み「デザインシステム」の構築に取り組んでいます。どなたでも構築中のデザインシステムのデザインデータを閲覧することができます。 更新情報2023年12月26日 [バージョン1.4.1]スタイルやコンポーネントの修正・更新を行いました 2023年10月18日 [バージョン1.4.0]スタイルやコンポーネントの追加・修正・更新を行いました 2023年8月31日 [バージョン1.3.4]スタイルやコンポーネントの修正・更新を行いました 2023年7月31日 [バージョン1.3.3]新規コンポーネントを追加、スタイルやアセットなどについて修正と更新を行いました 2023年6月29日 [バージョン1.3.2]コンポーネントを追加、テンプレートやガイドラインの一部修正と更新を行いました 2023年6
Web・アプリ開発のエンジニアが知っておきたい、デザインツール「Figma」の基本 - JMDC TECH BLOG
JMDCでアプリのデザインを5月から担当しているはんざわです。 Webやアプリのフロント開発者のみなさんはデザインツール Figmaをご存知でしょうか？ JMDCではこれまでAdobe XDをメインで使用していました、今年からFigmaに乗り換えました。 乗り換えに伴い、デザイナー以外のメンバーにもFigmaを操作できるようになるべく、勉強会を開催しました。 勉強会はオンラインで開催。Figmaで資料を作成、参加者に資料を開きながらGoogle Meetを繋げて詳細を説明していきました。 勉強会で使用した資料はFigmaのCommunityにアップしているのでぜひ見てみてくださいね。 www.figma.com エンジニアがFigmaを触れるようになることのメリット 基本知識と基本操作 実装するために使う デザインシステムについて そのほか便利な機能 さいごに エンジニアがFigmaを触れ
エンジニアのための Figma 知識
本記事の多くは Inspect モードを前提に解説しています。 下記に Dev Mode に対応した解説を書いてみたのであわせてご参照ください。 https://codezine.jp/article/detail/18000 エンジニアにデザインツールの知識・習熟は必要か？ しなくても仕事はできると思うのですが、あるとよりクオリティの高い仕事ができることは間違いありません。 という訳でエンジニアがエンジニアとしての仕事をしていく上で「Figma のこういうことを知っておくと良さそう」という知識をまとめてみました。 ユースケースを考える まず始めにデザインは作らないはずのエンジニアが Figma を使う時にどんなユースケースがありそうかを考えてみます。 デザインを元に実装する時 デザインから何かを生成したい時(コードとか画像とか) 自分でちょこっとデザイン修正しちゃう この辺りがあるかな〜
Adobe to Acquire Figma
Combination of Adobe and Figma Will Usher in New Era of Collaborative Creativity SAN JOSE, Calif.--(BUSINESS WIRE)-- Today, Adobe (Nasdaq:ADBE) announced it has entered into a definitive merger agreement to acquire Figma, a leading web-first collaborative design platform, for approximately $20 billion in cash and stock. The combination of Adobe and Figma will usher in a new era of collaborative cr
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vaadin Design System | Figma
Figma 入門｜ふじけん / kenshir0f｜note
UI/UXデザインツール『Figma』入門 | chot.design
Adobe、Figmaを約200億ドルで買収 ～WebベースのUI共同デザインツール／「Adobe XD」の競合製品
Design Systems For Figma
