無料で利用できるFigmaは、はじめての人にもオススメのUI作成ツールです。 ブラウザ上で利用できたり、他の人とリアルタイムで同時編集、プラグインによるカスタマイズなど、Figmaの基本的な使い方を押さえておけば、すぐに美しいUIデザインを作成できるのも人気の理由でしょう。 この記事では、Figmaで利用できる無料UIキット＆テンプレート素材をまとめています。 ウェブサイトやスマホアプリの作成に必要なパーツを揃えた、UIキットを使えば、より素早く効率的にWebサイトやスマホアプリのデザインを作成できます。 各素材はカテゴリ別に分けています、今後も随時アップデート予定です。 コンテンツ目次 1. Webデザイン便利ツール 2. 配色ツール 3. デザインツール 4. プロトタイプ・アイコンツール 5. フォント・書体ツール 6. クリエイティブ・面白ツール Figma 無料UIキット Car
メルカリの2023年技術研修DevDojoの資料と動画を公開します！ | メルカリエンジニアリング
こんにちは！メルカリ Engineering Office チームの@aisakaです。 メルカリのエンジニア組織は、メンバーが相互に学び合い、メンバー自身が自走し、成長できる組織を目指し、「互いに学び合い、成長し合う文化」の醸成を行っています。 こうしたメルカリの「互いに学び合い、成長し合う文化」を体現する仕組みの一つが、社内技術研修「DevDojo」シリーズです。 昨年から、一部のDevDojoシリーズを外部公開(参考)していますが、今回さらに新しいコンテンツを公開することになりました！ 今日のブログでは公開するセッションとその内容をご紹介します！ Learning materials Website 技術研修DevDojoとは DevDojoは、技術開発を学ぶ場として「Development」と「Dojo(道場)」をかけ合わせて名付けられた完全In-houseの社内研修シリーズです。
特集:Visual Studio Code早分かりガイド | Insider.NET > Insider.NET 全記事一覧 - ＠IT
最終更新日： 2018年12月28日 Visual Studio Code TIPS（2018/12/28） VS CodeでMarkdownをプレビューするには？VS CodeでMarkdownをHTMLやPDFに変換するには？VS Codeでテキストを矩形選択するにはVS Codeで表示言語を変更するにはVS Codeでエンコーディングを変更、自動判別するにはVS Codeでファイルを比較し、差分（diff）を表示するにはVS Codeで指定範囲をコメントにしたり戻したりするにはVS Codeの［エクスプローラー］ビューに表示するファイルを制御するにはVS Codeのファイルアイコンを変更するにはVS Codeのサイドバーの表示をキーボードで切り替えるにはVS Codeを持ち運ぶには（ポータブルモード）VS Codeでテキストの折り返しを設定するにはVS Codeでウィンドウサイズを制
メルカリCTO名村が目指す「統率のとれた有機的な組織」とは？ Developers Summit 2019 Summerレポート | mercan (メルカン)
メルカリCTO名村が目指す「統率のとれた有機的な組織」とは？ Developers Summit 2019 Summerレポート 2019年7月2日に開催された、アプリケーション開発を支えるエンジニアたちが登壇するイベント「Developers Summit 2019 Summer」。今回は、テクノロジーやプロダクト、開発プロセス、エンジニア組織をテーマに、登壇企業それぞれの知見が共有されました。 メルカリからはCTOである名村卓と、VP of Backendの田中慎司が登壇。2018年7月に導入を発表したマイクロサービスについて「どういった背景でマイクロサービス化に踏み切ったのか」「どのようなエンジニア組織を目指しているのか」「具体的なマイクロサービス化への道のり」を、組織編成や技術的な事例を交えて発表しました。 そこで今回は、名村が登壇したイベントレポートを公開。名村が感じる「メルカリ
クイックサマリー ‐ 私たちは一連の短い記事で開発者とデザイナーにとって有用なツールやテクニックを紹介しており、直近の記事ではCSS監査ツールとCSSジェネレータを取り上げました。この記事ではタブやテーブルからトグルやツールチップまで、信頼性の高いアクセシブルなコンポーネントを見ていきます。 目次 以下にすべてのアクセシブルなコンポーネントをアルファベット順に記載しました。目次をスキップするか、スクロールして1つずつお読みください。 :focus styles autocomplete buttons carousels "close" buttons content sliders checkboxes color systems color palettes comics component libraries cookie consent prompts dark mode data
基本機能からプロトタイプ制作まで！用途別・Sketchのおすすめプラグイン50選｜Goodpatch Blog グッドパッチブログ
こんにちは、UIデザイナーのサイです。私が普段のデザイン作業で使っているツールはいくつもありますが、使う頻度がもっとも高いのはSketchです。UIデザインに特化した機能のほか、便利なプラグインがあることもSketchの魅力のひとつです。この記事では、Sketchのおすすめプラグインを用途別でご紹介します。 1. 基本機能の強化 Find and Replace Text plugin for Sketch https://github.com/thierryc/Sketch-Find-And-Replace 選んだレイヤーの中のテキスト、あるいはファイルの中にあるすべてのテキストを検索と置換できるプラグインです。検索の範囲は自分で設定できるので、間違えてテキストを置換することを防げます。シンボルのOverridesのテキストもサポートするので、たくさんシンボルを使っても心配なく使えます。
この記事は、Mercari Bold Challenge Monthの1日目の記事です。 こんにちは、MercariのArchitectチームでDesign Systemに取り組んでいる@usagi-fです。 Design Systemはただのスタイルガイドラインではなく、会社として保持するデザインフィロソフィーから実装コードに落とし込まれたUIコンポーネントまで、広い範囲をさす言葉として認知されてきています。 現在私たちは本格的に構築へ着手しており、少しずつ進捗が見えてきました。この記事では主にDesign Systemにおける「UIコンポーネントの定義と実装」の部分に焦点をあて、私が担当しているWeb Frontendの事例を紹介していきます。 MercariにおけるDesign System Mercariでは将来的な組織規模の拡大に向けて様々な取り組みを行っていますが、Design
SmartHRに頻出する、表形式で一覧表示するUIのパターンまとめています。 SmartHRでは、表形式で一覧表示するUIを「よくあるテーブル」と呼びます。 OOUIにおけるコレクションと、コレクションに関連するアクションやフォームをまとめた総称を指します。 構成よくあるテーブルは、次の要素で構成されています。必須項目以外は任意の表示項目です。 テーブルオブジェクト名（必須）オブジェクトの情報オブジェクトの操作タイトルエリアテーブル操作エリア一時操作エリア 1. テーブルよくあるテーブルは、多くの場合「1項目1行の1次元リスト」のテーブルを含みます。 オブジェクト名オブジェクトの名前を指します。行を識別するために必須要素として設定します。 移動リンクのスタイルオブジェクトの詳細ビューへ移動する場合、オブジェクト名にリンクを設定します。 テキストリンクによる移動は「オブジェクトの操作」にはあ
ContentsWeb Inspector ExtensionsContainer QueriesWeb Push for macOSSubgridFlexbox InspectorAccessibility ImprovementsAnimation ImprovementsOverscroll BehaviorShared WorkerAnd moreFeedback WebKit has had a big year, with over 162 new features and improvements shipping in WebKit browsers — including Safari 15.2, Safari 15.4, and Safari 15.5. Features from earlier this year include dialog element, la
成熟期に入ったUIデザインとデザインシステム
先進的から最適化へ 3年前、Facebook が今までのニュースフィードを完全に変えた「Paper」というアプリをリリースしました。ネイティブコンポーネントが使われていないオリジナルの UI とインタラクション。今までありそうでなかった新しい操作方法を提案していました。Paper をはじめ、様々な実験的なアプリを Creative Labs としてリリースを続けていましたが、2015 年にラボは閉鎖され、その半年後には Paper も配信停止されました。 今でも Things 3 for iOS のように新鮮な UI とインタラクションが生まれる場があるものの、あまり見かけなくなりました。今のアプリ UI デザインは、目新しいものを作るより、今まで培われたノウハウを基に使いやすさ、見やすさを磨き上げるフェイズに来ています。斬新なアニメーションと目新しい形状のメニューを作るより、ガイドライン
この記事では、「もっと早く知りたかった」と思ってしまう、Web制作が加速する便利な最新オンラインツールをまとめてご紹介します。 面倒な設定をコピペで利用できるCSSツールや配色ツール、人工知能を使った便利ツールなどが数多く公開されており、ますますクリエイティブな表現が広がりそうなものばかり。 自分のワークフローにうまくツールを導入することで、制作時間の短縮につながるだけでなく、ストレスの少ない快適な作業フローを実現してみてはいかがでしょう。 カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. Webデザイン便利ツール 2. 配色ツール 3. デザインツール 4. プロトタイプ・アイコンツール 5. フォント・書体ツール 6. クリエイティブ・面白ツール 2021年のベストツールも一緒にどうぞ。 Web制作を変える！2021年の便利オンライ
Minimal CSS Framework for Semantic HTMLA minimalist and lightweight starter kit that prioritizes semantic syntax, making every HTML element responsive and elegant by default. Write HTML, Add Pico CSS, and Voilà! 12.1K GitHub Stars 74.1K Monthly Npm Downloads (Last month) 3.2M Monthly JSDelivr Requests (Last month) A Superpowered HTML ResetWith just the right amount of everything, Pico is a great s
自社サービス『ツクリンク』はリリースから7年が経ちました。 直近でAtomic Designをベースにしたデザインシステムの作成と、CSS設計の変更をしたので紹介します📛 CSSの変遷現在の設計の話をする前にこれまでのCSSを紹介。 Ver１ 初回リリース時 昔懐かしいCSSです。Sassも使わずベタ書き。 #main .articles p { } #main .articles .header { }実は今でも一部で生きています。反省してます。探さないでください。 Ver２ リニューアル リニューアルをしたタイミングでCSS設計にはMindBEMdingを採用、SCSSを使い格段に書きやすくなりました。ファイルはBlockごとに分け、クラスの衝突を防いでいました。 # _block.scss .block { &__element { &--modifier {} } } # ディレ
Figmaなら簡単！デザインシステムの作り方を詳しく解説
WebサイトやスマホアプリのデザインシステムをUI/UXデザインのコラボレーションツール「Figma」で制作する手順を紹介します。 カラーパレットをはじめ、タイポグラフィ、シャドー、アイコン、コンポーネントなど、Figmaでデザインシステムに必要なものをどのように制作するか解説します。 Creating a Design System in Figma. by Marc Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Figmaのワイヤーフレーム素材は、以前の記事をご覧ください。 Figmaで簡単に作成できる！ワイヤーフレーム・フローチャート・プロトタイプ素材のまとめ はじめに 1. 何よりもまず、強力なカラーパレットを作るべき理由 2. デスクトップとスマホの両方に対応するタイポグラフィ 3. 忘れてはならないの
デジタル庁では、将来的に省庁サイト等への適用も視野に入れた「デザインシステム」の構築を行っています。 その一環として、デザインシステムについてのご意見をいただくため、7月29日に有識者を集めたデザインシステム勉強会を開催しました。 デザインシステムとは？ 現状、各省庁の Web サイトは個別に構築されており、各 Web サイトの情報構造や見た目がそれぞれ異なっています。 利用者にとっての使いやすさ・求める情報へのたどり着きやすさ、また開発の効率化・管理コスト削減の観点で改善の余地が大きいと考えています。 その解決に向けて、デザインやコンテンツ構成等の標準化・統一化を図るためのデザイン原則案を策定することが、「デジタル社会の実現に向けた重点計画」にも定められました。 「各府省庁のウェブサイトのデザインやコンテンツ構成等の標準化・統一化を図る。令和3年 (2021年) 秋までに、各府省庁のウェ
この記事では、デザインシステムを作成するときの基本ガイドをまとめています。 この記事は3つのパートで構成されています。 デザインシステムを理解する（デザインシステムとは何か、いつ作るべきか？） デザインシステムの作成（作成プロセスとやっておきたい項目） デザインシステムの具体的なサンプル例（デザイナーとデベロッパー、それぞれの観点より） デザインシステム追加の検討事項（その他のコンセプトや参考文献など） *この記事では、Webサイトやアプリ、オンラインサービスなどを表す包括的な用語として、「プロダクト（Product）」という言葉を使用しています。 この記事のコンセプトをイラスト化するために作成した、デザインシステムを公開しています。ご自由にお使いください。 Basic Design System – Figmaファイル デザインシステムを理解しよう デザインシステムとは？ デザインシステ
CrowdWorks Advent Calendar 2017 の17日目の記事です。 こんにちは。 UXデザイングループのデザイナー上田です。 突然ですが、「レガシーユーザーインターフェース」と聞いて、皆さん何を思い浮かべるでしょうか？ 自社サービスやクライアントのWebサイトなど、担当しているサービスの使い勝手の悪さや構造の闇深さを連想し、古く負債を抱えてしまったサービスに対してどのようにアプローチして解決すべきか頭を悩ませている方も少なくないのではないかと想像します。 エンジニアリングの視点で、成長し続けるサービスが抱えるジレンマとして「リファクタリングの工数を割けない」「中長期のアーキテクチャ設計を十分に検討する余裕がない」といった声を耳にし、実際に古く負債を抱えてしまったシステムやソフトウェアを「レガシーソフトウェア」と呼んだりするようですが、実はデザインの視点でも急成長するサー
10月17日に配信が始まった「Windows 10 Fall Creators Update」に導入された、マイクロソフトの新しいデザイン言語「Fluent Design System（フルーエントデザインシステム）」。コンセプトと実装へ反映する方法を解説します。 独自のデザイン言語やGoogleのMaterial Design（マテリアルデザイン）など既存の言語を実装して、統一のとれた堅牢なユーザーエクスペリエンスを提供しているリーディングカンパニーが増えてきました。デザイン言語を、直感的・魅力的で見栄えの一貫したアプリやWebサイトを作成できる「確立されたガイドライン」と考えてください。 最近マイクロソフト社は、Windows 10ベースのデバイスにおける広範な使用（つまりユニバーサルWindowsプラットホーム（UWP）アプリ対応）を目的としたFluent Design System
Website Style Guide Resources GitHub repo Twitter updates Contributors Examples Real life pattern libraries, code standards documents and content style guides. Carbon Design System By IBM Carbon is the design system for IBM Cloud products. It is a series of individual styles, components, and guidelines used for creating unified UI. frontendcodepatternsvoiceandtone Code For America frontendpatterns
Create atomic design systems with Pattern Lab - Pattern Lab
Create atomic design systems with Pattern LabPattern Lab is a frontend workshop environment that helps you build, view, test, and showcase your design system's UI components. Run the following command in your terminal and read the installation guide to get started: npm create pattern-lab
Reactコンポーネントの基本原則と人気のUI/UXデザインライブラリの解説 - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
Reactは単なるUIライブラリではなく、コンポーネントベースのアプリケーション開発フレームワークです。UI/UXデザインの基本原則に加え、再利用性や状態管理、データフローなどの概念も重要です。 Reactのコンポーネントベースのアーキテクチャを活用すると、UIと裏側のロジックを分離して管理しやすくなり、効率的なアプリケーションの開発が可能です。 今日は、Reactにおけるコンポーネントの基本原則の解説と、初心者に役立つReactコンポーネントライブラリの紹介を提供します。 コンポーネントの設計原則 UI（ユーザーインターフェース） UX（ユーザーエクスペリエンス） UIのデザインに役立つReact コンポーネントライブラリ React Material UI React-Bootstrap Fluent UI Chakra UI Semantic UI React Ant Design
Cloudscape offers user interface guidelines, front-end components, design resources, and development tools for building intuitive, engaging, and inclusive user experiences at scale.
@nekobatoです。メルカリDesign SystemのWeb版開発者をしています。以前の記事で新しくなったメルカリ Webの紹介がありましたが、本記事ではそこで使われている、同じく新しくなったDesign System Webの紹介をします。 Design System Webの提供 Design Systemを元にした実装の構造はプラットフォームごとに異なりますが、Design System Webはmonorepoで管理されたnpm module群で、プロダクトはモジュールを用途に合わせて利用可能です。全てを使う必要はなく、基本的にはコンポーネントモジュール（CoreまたはReact）を利用すればDesign Systemの恩恵を受けられます。現在は新しくなったデザインのメルカリ Webで実際に利用例を見ることができます。 この記事はDesign System Webの技術的な概
2023 winners and finalists - Apple Design Awards - Apple Developer
2023 winners and finalists The Apple Design Awards honor excellence in innovation, ingenuity, and technical achievement in app and game design. Streaming is available in most browsers, and in the Apple Developer app. Inclusivity Winners Winners in this category provide a great experience for all by supporting people from a diversity of backgrounds, abilities, and languages. APP Universe — Website
Microsoftが1998年に発売した「Windows 98」のデザインをウェブサイトで利用できるCSS「98.css」をエンジニアのJordan Scales氏が開発し、GitHub上で公開しています。 98.css - A design system for building faithful recreations of old UIs https://jdan.github.io/98.css/ 98.cssを使うと、ウェブサイトにWindows 98ライクなデザインを適用することができます。ボタンのデザインはこんな感じ。 チェックボックスや…… ラジオボタン。 ウィンドウの要素もあります。 98.cssを手軽に利用するには、HTMLのlinkタグを用いて98.cssをインポートします。試しに98.cssをインポートしたHTMLを記述してみます。 <!DOCTYPE html>
エンジニア直伝！デザイン&実装の両観点で最適な「積むUIレイアウト」の制作方法｜ShikiCheri/C-C-C
こんにちは、@ShikiCheriです。 現在フリーランスのUIUXデザイナーをやっており、単発案件ではなく長期的に組織や事業にコミットするような形で、サービス開発のデザインを中心に担当しています。 デザインシステム構築を担当したことでUIデザインの最適解について目から鱗が落ちた…！？クックパッドは25年のサービスの歴史があり、特にWeb版は今でも現役で活用されているサービスです。私はこの長寿サービスWeb版クックパッドのUIのリニューアルを行いました。 またこのプロジェクトと同時に、webに限らずアプリも含めたサービス全体の体験を統一するためのデザインシステムの構築を担当しました。 Apron - Figma Community これらのプロジェクトを推進する際、デザイン×開発の架け橋的存在であるUXエンジニアのむーさん、実装もできるデザイナーのけんけんさん、TOFUWORKSさんと共に
この記事は何？ DMMさんで「Atomic Design & Design Systems」をお話させて頂いた時に、自分が読んだ記事をまとめたものになります（いちおう全部目は通してる…ハズ）。デザインシステムについて書かれている記事ってまだまだ少ないのですが、情報源自体もまとまってないんですよね。実際、自分が↑の資料を作る時はほぼ手探り状態でした。 この記事がデザインシステムについてこれから学ぼうと思われている方の力に少しでもなれたら幸いです。例によって海外記事は僕の認識違いが起きている可能性があるので、「これそういう記事じゃないから！」というツッコミがあればぜひお願いします。 （追記：記事執筆後も参考資料が増えてきたため、資料作成時に限らず参考にできるものを追加しています） まずデザインシステムについて学びたい時は Design Systems Handbook InVisionが作成し
こんにちは、THECOO株式会社のpoteboyと申します。普段は現職１人目のWEBフロントエンド開発者としてFaniconというファンコミュニティサービスの開発を行っております。 弊社では私が入社する以前までフロントエンド専任の開発者がおらず、サーバーサイドの開発者やAndroidの開発者がフロントエンドの開発業務を兼務していました。 専任がいなかったのは、Faniconが元々ネイティブベースのアプリで、WEBアプリの開発優先度を下げていたためです。 そのため、フロントエンドの開発環境に関しても万全とは言えず、2022年6月に私が入社し、9月には2人目のフロントエンド開発者となるTomoya氏が入社したタイミングで、2人で協力してFaniconフロントエンドの大改修を行なうこととなりました。 フロントエンド改修業務にはTypeScriptの導入、既存コンポーネントのVue３化、単体テスト
こんにちは。エンタメ領域のDXを推進するブロックチェーンスタートアップ、Gaudiyでフロントエンドエンジニアをしているkodai（@r34b26）です。 Gaudiyでは、数ヶ月前からエンジニアによる「デザインレビュー」をワークフローに取り入れました。僕自身は、デザインとエンジニアリングをつなぐことに関心があるのですが、一般的にデザイナーとエンジニアの協業については語られているケースが少ないですし、あったとしても、デザイナー側から寄り添ってくれるケースがほとんどだと感じています。 そこで今回は、Gaudiyでエンジニア側としても課題意識を持って取り組んできたデザインレビューについて、ご紹介したいと思います。 プロダクト品質を高めるために大事な観点だと思うので、よければご参考ください！ 1. エンジニアによるデザインレビューを導入した理由 2. チーム全体でデザインレビューを強化 2-1.
Free Bootstrap 5 Material Design UI Kit Product description The most complex and innovative UI Kit Made by Creative Tim. Check our latest Freebie Bootstrap 5 UI Kit with a fresh, new design inspired by Google's Material Design 2. Designed for those who like bold elements and beautiful websites, Material Kit 2 is ready to help you create stunning websites and web apps. We created many examples for
Free Bold Fonts Premium Bold Fonts Bold Fonts. How to make your title impressive? The simple answer is to use strong fonts that immediately catch the attention of the public. Due to the constant development in the graphic design sphere and the presence of headlines not only in texts but also on a variety of products, strong fonts for headlines have become extremely popular and numerous. This fact
200種類以上もある美しいSVG形式のアイコンをまとめたアイコンセット「Clarity Icons」が、オープンソースのデザインシステムClarity Design System上で公開されています。 Clarity Design System https://vmware.github.io/clarity/icons/icon-sets#core-shapes 「Clarity Icons」には全部で200種類以上のアイコンが収録されており、アイコンは種類ごとにダウンロードすることも可能です。収録されているアイコンの種類は「Core Shapes」「Commerce Shapes」「Essential Shapes」「Media Shapes」「Social Shapes」「Travel Shapes」「Technology Shapes」の7種類で、さらに複数のバリエーションも存在し
Tree Style Tab ツリー型タブ Ver.4.0.8 for Mozilla Firefox An English version of this page is also available. 注意：このページは旧バージョンの情報を保持するための歴史的ドキュメントとして残されています。最新の情報はMozilla Add-onsの配布ページおよびGitHubリポジトリ上のREADMEを参照して下さい。 セキュリティに関する重要なお知らせ：TST 3.0.14よりも以前のTST 2.xおよびTST 3.xのすべてのバージョンにおいて、他のアドオン向けのAPIを介した情報漏洩の問題がありました（WebExtensions APIでそれらの情報にアクセスするために必要な権限を持たない信頼できないアドオンに対してまで、TSTのAPI経由でプライバシーに関わるタブの情報やプライベートウィン
Buttons in Design Systems
I love buttons. I can do things with buttons. Take a next step. Make a commitment. Get things done. With buttons, interaction springs to life. That’s why Buttons are arguably a design system’s most important component. Devilishly simple, they offer a simple label in a defined region I can press. As such, buttons are where you apply a design language’s base attributes in ways that’ll ripple through
デザインシステムに関わるいろいろなプロセスを図にしてみた
今までも何度か デザインシステム に関する記事を書いてきましたが、手段や考え方が中心でした。今回はプロセスに注目して、代表的な課題を図にしてみました。すべてのケースに当てはまるわけではないですが、参考にしてください。 大まかな進め方 「デザインシステムを作りました！」とドカンと発表したほうがインパクトがあるように見えますが、苦労したわりには誰も使わないものになる可能性が高いです。実際はデザインシステムの中にあるものを小さく切り出して少しずつ変えていくことになります。 正攻法であればデザイン原則から始めたほうが良いと思っていますが、組織としてどうあるべきかといった根本的なところが明文化されていないのであれば、そこからスタートしたほうが良いでしょう。デザイン原則があったほうがデザインの議論がしやすくなるので早期にもっておきたいですが、1 日でも早く成果を出したいのであれば、まず色からはじめてみ
Figmaの使い方はとてもシンプルですが、デザインシステムの作成となると話は別です。 ストレスの多い作業プロセスになりがちですが、幸いにもFigmaにはそんな苦悩から救ってくれる、便利プラグインが数多く公開されています。 プラグインはデザインプロセスに欠かせないツールで、プロジェクト特有の問題点を解決したり、面倒な作業を自動化するなど、時間短縮にもつながります。 しかし、膨大な数のプラグインから自分にあったものを探すのは時間がかかるのも事実。 ここでは、デザインシステムの作成、管理、運用に役立つFigmaプラグイン20個をピックアップしてご紹介します。 無料ダウンロードできる良質UIテンプレート集を活用して、すぐに新しいプロジェクトをはじめてみましょう。 Figma Tokens Figma Tokens プラグインは、プロジェクトの配色や書体、境界線の半径サイズや余白サイズなどのグローバ
Spectrum provides components and tools to help product teams work more efficiently, and to make Adobe’s applications more cohesive. Principles#Get to know our foundational thinking and how we put it into action across our design system. Learn about our principles
Webデザインシステムはじめの一歩
CSS フレームワーク活用のタイミング Bootstrap、Foundation をはじめとした CSS フレームワークを一度くらい使ったことがあると思います。制作はもちろん、どのように CSS ファイルを整理すれば良いのか、どのようにデザインのルールを設計するのかといった CSS の書き方を学ぶ際にも使えます。もちろん CSS フレームワークはたくさんありますし、 Gridlex のように Flexbox を活用したグリッドシステムだけといった UI の特定要素のみを提供しているツールもあります。 CSS フレームワークは制作において非常に便利なツールですが、最終成果物として扱うかは注意が必要です。以下のような場合を除いて、CSS フレームワークはなるべく使わないようにしています。 プロトタイプ作成 Photoshop や Sketch のようなグラフィックツールで Web サイトをデザ
こんにちは、@versionfive です。 SmartHRのプロダクトデザイングループにUXデザイナーとして転職して、10ヶ月ほど経ちました。 昨年年末で入社8ヶ月くらいだったのですが（すでに2ヶ月以上経過…）、自分がどんな仕事してきたか振り返ったほうがいいかなー、とぼんやり考えるようになっていました。 UXデザイナーとして入社後に設定したテーマ（やること）は、常に自分の中にありますが、「SmartHRのUXデザイナーは具体的に何する人なのか」の発信はできていなかったからです。 “ 私のつなぐ・そろえるミッションとして、以下を目標にしたデザインの共通言語をつくっていきます。 ・プロダクトと広告/販促制作物などとの体験の整合をとること ・プロダクト内の体験をそろえ、生産性をあげること ” ということで、入社後の8ヶ月間でやったことを振り返って、 「UXデザイナーと肩書きがついているプロダク
DMM.com ラボさまの社内勉強会にお声がけ頂き、「Atomic Design & Design Systems」というテーマでお話させて頂きました。 当日の構成 勉強会のテーマがAtomic Designについてだったので、前半はGUILDさん勉強会でお話させて頂いた内容を少し持ってきました。 後半ではAtomic Designの視点をもう少し広げて、Design System（毎回デザインシステム表記とどっちにしようか悩む）全般について、僕が調べたり考えたことをまとめました。 と言っても自分は何かしらのデザインシステムを取り入れたり実践したりと言った経験はありません。そのため、内容のほとんどは海外の事例や記事の引用・意訳になります。Design Systemについてまとまった情報が知りたい！という方には有益かと思いますが、基本的なことは知ってるよーという方にはあまりお役に立てないと思
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
全部無料！Figmaで使える良質UIテンプレート50選（ウェブ＆アプリ素材）
アクセシブルなフロントエンドコンポーネントの完全ガイド - 前編 | POSTD
Design Systemへの取り組み 〜Frontend編〜 | メルカリエンジニアリング
「よくあるテーブル」 | デザインパターン（共通） | SmartHR Design System
News from WWDC22: WebKit Features in Safari 16 Beta
知らなきゃ損！Web制作を爆速にする最新オンラインツール40個まとめ
Pico CSS • Minimal CSS Framework for semantic HTML
Atomic DesignをベースにしたデザインシステムとCSS設計｜あっきー
デザインシステム勉強会を開催しました｜デジタル庁
デザインシステムの作り方徹底ガイド 参考にしたい導入事例まとめ
レガシーユーザーインターフェースにありがちな3つの病と治療法 - Qiita
ついにWindowsへ導入が始まった「Fluent Design System」5つの基本要素
Website Style Guide Resources
Cloudscape - Cloudscape Design System
新しいメルカリDesign System Web | メルカリエンジニアリング
Windows 98のデザインをウェブサイトに適用できるCSS「98.css」、ウェブ上でOSを再現する猛者も
デザインシステムの資料を作る時に参考にしたリンクまとめ | よりデザイン
デザインシステムに準拠したコンポーネント駆動UI開発への取り組み
フロントエンドエンジニアによるデザインレビューの取り組み - Gaudiy Tech Blog
Material Kit 2 by Creative Tim
65+ Free & Premium Bold Fonts For Strong Headings
無料で使えるオープンソースの200種類以上あるSVG形式アイコンセット「Clarity Icons」
XUL Apps > Tree Style Tab - outsider reflex
UI・UXに強い！デザインシステムにおすすめ Figmaプラグイン20選
Spectrum, Adobe’s design system
UXデザイナーとして入社して、8ヶ月間でやったことを振り返ってみる｜versionfive
「Atomic Design & Design Systems」をお話させて頂きました | よりデザイン