Amebaのサービスを通じて、発信者や閲覧者といったユーザー、広告主や取引先といったパートナーとの接点において一貫した振る舞いをするためにどうあるべきかを「原則」として明記します。 「原則」は私たちを強く縛るルールではありません。良い信頼関係を築くために守りたい「約束事」です。
Spindle
Amebaのサービスを通じて、発信者や閲覧者といったユーザー、広告主や取引先といったパートナーとの接点において一貫した振る舞いをするためにどうあるべきかを「原則」として明記します。 「原則」は私たちを強く縛るルールではありません。良い信頼関係を築くために守りたい「約束事」です。
フロントエンドから取り組むデザインシステムの改善 #UI
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、フロントエンドエンジニアの近藤です。Yahoo! JAPANのスマートフォンのウェブトップページのフロントエンド開発業務と、社内で利用されているデザインシステムの開発に携わっています。 近年、デジタルプロダクトを持つ多くの企業で、デザインシステムが活用されています。デザインシステムには、ビジュアルとしてのデザインの規定だけでなく、実際のプロダクトに利用できるUIライブラリやコンポーネントライブラリなどが含まれます。そのため、デザインシステムの構築にはデザインとエンジニアリングの両方の力が不可欠です。 本記事では、私が開発に携わっているデザインシステム「Riff」の紹介とともに、フロントエンド部分におけるデザインシステム
Make-A-Video by Meta AI
Make-A-Video is a state-of-the-art AI system that generates videos from text. Make-A-Video research builds on the recent progress made in text-to-image generation technology built to enable text-to-video generation. The system uses images with descriptions to learn what the world looks like and how it is often described. It also uses unlabeled videos to learn how the world moves. With this data, M
ゼロから始めるStorybook入門(React編) | アールエフェクト
StorybookはアプリケーションからUIコンポーネントを切り離し、独立した状態でコンポーネントの開発、動作確認やテストを行うために利用することができるUIツールです。コンポーネントが持つpropsを変更することでブラウザ上でどのような表示になるかプレビューを行うことで動作確認することができます。この説明が最初は”?”の人でも本文書では公式のドキュメントよりもさらにシンプルなコードを利用して動作確認を行なっているのでStorybookの基礎的な利用方法や機能を短時間で理解することができます。 Storybookが利用できるJavaScriptのフレームワーク/ライブラリにはReact以外にもVue.js, React Native, Svelte, Amber, Angularなどがありますが本文書ではReactを利用しています。本文書で動作確認を行なっているStorybookのバージョ
Figma WordPress デザインライブラリを活用してみよう
以下は、Chloe Bringmann が書いた WordPress.org 公式ブログの記事「Getting Started with the Figma WordPress Design Library」を訳したものです。 誤字脱字誤訳などありましたらフォーラムまでお知らせください。 この記事は James Koster (@jameskoster) が執筆しました。 WordPress デザインライブラリは、その名の通り、WordPress のデザインアセットを集めたライブラリで、誰でも簡単に WordPress UI のデザインプロトタイプを Figma 上で作成できます。 これらのツールは、デザイナーが新しい UI を作成するときや、アイデアや機能強化、さらにはバグレポートの解決策を提供したいと考えている人にとって便利なものです。時に、百聞は一見にしかず、です。 この記事では、F
Figma からコンポーネントのコードを生成！Overlay のレビュー
2021/04/11 追記 他サイトに行って生成するという体験が個人的に残念だったため自作しました。 Figma からそのまま使えるコンポーネントのコードが生成できたら…。 そんなことを夢想する方もいらっしゃるのではないかと思いますが、実は Figma 自体の Auto Layout が進化してきていることによって意外と現実的なものになってきています。 それを実現してくれる Overlay という Figma から React のコンポーネントなどを生成するツールについて紹介いたします。 目次 Figma の Auto Layout とスタイルの取得方法について 要件 Overlay の紹介 導入する上での課題・もう一声ほしいところ おまけ: FigmaToCode も面白そう Figma の Auto Layout とスタイルの取得方法について はじめに、これなら確かに自動生成できそうだ
UI design knowhow | 株式会社 ツクロア
このたびは、私たちツクロアに興味を持っていただきありがとうございます。 当サイトでは、ユーザーの同意を得た場合に限り、当サイトの訪問・離脱、訪問中の行動に関する統計情報の分析のため、Cookieを使用します。 詳しくはプライバシーポリシーを参照ください。
ツクロアのデザインシステムをFigmaで公開しました | 株式会社 ツクロア
追記（2024年4月18日） 本記事は2021年4月30日に公開したものですが、デザインシステムの構築や運用に関心のある方に閲覧いただいています。公開当時とは異なり、デザインシステムの運用事例や構築手法も充実してきたものと思います。 ツクロアのデザインシステムも、この数年でよりよい形へと進化しています。具体的には、ツクロアのデザインシステムを一企業の資産というよりも、よりたくさんの方に使っていただけるような汎用的なデザインシステムとしてJumpu UIにリブランディングしました。それでいて、「ツクロアのデザインシステム」に当たる、ツクロアのブランディングを反映したデザインシステムはJumpu UIをベースとしたものとして新たに構築しています。 ぜひそちらの記事もご一読ください。 デザインフレームワーク「Jumpu UI」の開発 ツクロアのデザインシステムはJumpu UIをベースに生まれ変
FigmaのVariants入門 - さらにコンポーネントを使いこなそう - ICS MEDIA
ウェブ制作の現場で定番となってきたデザインツール「Figma」。前回の記事『デザインの管理と効率化が行える FigmaのComponents入門』では、デザインパーツの管理や柔軟な変更が可能になる「Components」機能を紹介しました。 本記事ではComponentsをまとめ、検索性を保ちつつ、さらに柔軟な変更と管理が行える「Variantsバリアンツ」を紹介します。 Variantsを使うと、複雑なコンポーネントの切り替えや管理が行いやすくなり、堅牢なデザインファイルが作成できます。また、コーディング時に近い思想でデザインを組めるので、実装時に破綻が起こりにくくなります。 Variantsは規模感に関わらず小さな単位でも活用できます。 「使いこなせていない」、「自分の制作の規模感では不要」と考えているデザイナーにも、手軽に導入できメリットを実感できるはずです。本記事で使い方を説明する
エンジニアのためのFigma超入門
エンジニアがFigmaを学ぶ利点 ブラウザ上で共同編集ができるなどの理由から、最近では観測範囲内の多くの企業がFigmaをメインのデザインツールとして採用しています。 一般的にフロントエンドエンジニアはデザイナーがFigma上で作成したデザインファイルを元に実装を進めると思いますが、ここでエンジニア側にもFigmaの知識がある程度あればより円滑かつスピーディにUIの実装が行えるのではないかと考えています。 具体的には、エンジニアにFigmaの知識があることで以下のような利点があります。 デザイナーの意図を汲み取ることができる デザイナーと共通言語で話せる 実装の観点からデザイナーにFigmaの修正依頼ができる ↑の打ち返しを待たずに自分で軽微な修正ができる というわけで、今回はエンジニア目線で実装への応用を交えながらFigmaの基礎知識を解説していきたいと思います。 スタイル Figmaで
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
zeroheight
GitHub - kufu/smarthr-ui: React components for creating SmartHR applications.
Icons | Font Awesome
「ダークモード」は、本当に“目に優しい”のか？ 5つの観点から科学的に検証した結果
Luther Vandross if only for one night
レストランで注文したらいくらになるでしょう？特大ハマグリで作る超高額なパスタが旨すぎた