Figma によるデザインシステム入門
本書は Figma によるデザインシステムコースの日本語訳になります。デザインシステムに興味がある人や構築しようとしている人もチェックしてみてください。デザインシステムに縁のないデザイナーや開発者のためにプロダクトと向き合った最適なデザインシステムを探求するための材料になれば嬉しく思います。 (原文 : https://help.figma.com/hc/en-us/sections/14548397990423-Course-Introduction-to-design-systems) この記事は、Figmaから許可を得た上で翻訳され、Brand Guidelineに則った内容となっております。(Brand Guideline: https://www.figma.com/ja/using-the-figma-brand/) ## 更新情報 [2023/7/1] - 表紙画像に、このコ
エンジニアにオススメの Figma 活用
コラボレーションを小さくはじめ、大きく広める - 相互理解のためのデザイン＆開発交流会, Friends of Figma Tokyo by Yasuhiro Yokota
最速でゆっくり Figma最新機能紹介 〜Section編 GroupやFrameとの違いとは〜 | さくらのナレッジ
Group, Frame, Sectionの挙動の違いを学ぼう この項では、紛らわしいGroup, Frame, Sectionの違いについて整理していきましょう。まずはGroupの挙動を確認します。Groupは先に述べたとおり、グルーピングした要素の一括処理を担っています。 Groupの機能と役割 先程、Groupには２つの機能があるとご紹介しました。その１つ目は子要素のプロパティ一括変更です。以下の動画では、Groupレイヤーを選択することで、子要素に対して一括してプロパティ変更を行っています。 Groupで子要素のプロパティを一括で変更している様子 2つ目の機能はGroupレイヤー自身へのプロパティ適用による子要素への間接的なデザイン適用です。GroupレイヤーのLayerプロパティを変更して透明度を変更したり、Effectsプロパティを変更することで子要素のレイヤーに一括でドロップ
Figmaのコンポーネントプロパティ入門 - カスタマイズ可能なコンポーネントの作成 - ICS MEDIA
Adobeによる買収の意向表明が大きな話題となり、世界的に注目されているデザインツール「Figma」。そのようなビックニュースの裏でも、新たな機能がどんどん追加されています。 今回の記事では、コンポーネントにおけるカスタマイズ可能な箇所を管理しやすくし、コードとの整合性を高めてくれる「コンポーネントプロパティ（Component properties）」を紹介します。 コンポーネントプロパティは、コンポーネント（Components）やバリアント（Variants）と言った事前知識が必要な一歩進んだ機能になります。まずは、以下の記事の内容を理解してから本記事を読むことをオススメします。 デザインの管理と効率化が行えるFigmaのComponents入門 FigmaのVariants入門 - さらにコンポーネントを使いこなそう Figma公式の「コンポーネントプロパティ」のチュートリアル用デ
Penpot: The Design Tool for Design & Code Collaboration
Penpot is the web-based open-source design tool that bridges the gap between designers and developers.
デザイナーやエンジニアの作業効率が向上するFigmaの運用方法を考える｜osanai / ui designer
カンムでプロダクトデザインをしている osanai です。こんにちは。 前回ご紹介したコンポーネント品評会により、デザインシステムにおけるコンポーネントの課題について議論が進み、不必要なコンポーネントが生まれにくくなり、デザインの意図が汲み取りやすくなりました。 品評会をしていると、しばしばデザイナーとエンジニアで「Figma でもっと効率よくできないかな」という話題が出てきます。例えば「コンポーネントの Variants のパターンをパット見で把握したい」「目的のページやコンポーネントにもっと素早くアクセスしたい」などです。 運用方法に関する課題に対して少しずつ改善に取り組み続け、徐々にですが Figma でのデザインシステムの管理が効率化されつつあります。今回はこれまでに実施した Figma の運用効率化の取り組みをご紹介します。 プラグインで解決編目的のページやコンポーネントに素早く
デザイントークンって何？｜seya
「デザイントークン」 最近はよく使われている言葉だと思うのですが、意外と日本語での情報がないのでまとめてみました。 W3C の定義実はデザイントークンには W3C という標準化団体でのワーキンググループがあります。 これが絶対の定義と思う必要はないと思いますが、共通の定義としては便利だと思うので引用するとこの W3C では Design tokens are indivisible pieces of a design system such as colors, spacing, typography scale. 訳: デザイントークンとは、色、スペーシング、タイポグラフィのスケールなど、デザインシステムを構成する不可分なピースのことです。 Design Tokens W3C Community Group https://github.com/design-tokens/commun
のんびり学ぶ Figma 〜コンポーネント編〜 (3) | さくらのナレッジ
Component properties（コンポーネントプロパティ）を学ぼう 近年人気のデザインツールである『Figma』の便利な情報をお伝えする連載の3本目(最終回)です。1本目の記事ではコンポーネントの基礎について、2本目の記事ではVariants（バリアント）についてご紹介しました。今回の記事では、Figmaのコンポーネント機能の中でも、よりパワフルでより複雑なComponent properties（コンポーネントプロパティ）についてご紹介します。 Component propertiesの概要 Component propertiesは簡単に言うと、「コンポーネントで変更可能な部分をより明示的に制御する仕組み」であり、コンポーネントが表現したいデザインの状態を制御するための、コンポーネントがもつプロパティです。 Component propertiesを使えば、コンポーネントのレ
のんびり学ぶ Figma 〜コンポーネント編〜 (2) | さくらのナレッジ
Variants（バリアント）について学ぼう 近年人気のデザインツールである『Figma』の便利な情報をお伝えする連載の2本目です。1本目の記事では、Figmaの重要な機能の一つであるコンポーネントの基礎についてご紹介しました。 それに続く今回の記事では、Figmaのコンポーネントをグループ化して管理する「Variants（バリアント）」という仕組みについて解説します。 Variantsの概要 コンポーネントを作成していると、よく似ているものの、細部が異なるいくつかのデザインバリエーションが必要になることがあります。Figmaのコンポーネントには、このような類似のデザインバリエーションをグループ化して管理する「Variants（バリアント）」という仕組みがあります。 例えば、ボタンUIを表すコンポーネント ❖ button は、表現したいよくあるパターンとして「通常時」「マウスオーバー時」
のんびり学ぶ Figma 〜コンポーネント編〜 (1) | さくらのナレッジ
このシリーズについて みなさんこんにちは。さくらインターネットでフロントエンド領域を担当している山田です。この連載では、フロントエンド開発を行っているメンバーが、開発に役立つ情報を半分趣味で不定期掲載していく予定です。 自分からは、近年人気のデザインツールである『Figma』の便利な情報をお伝えしたいと思います。デザイナーの方はもちろん、エンジニアの方にも興味を持っていただける機能がたくさん詰まったFigmaを紹介していきます。 Figmaのご紹介 チーム開発に適したデザインツール Figmaのメインの機能の一つはもちろんデザイン制作です。Figmaを使うことで、これまでのデザインツールでは難しかったWebアプリケーションやモバイルアプリケーションといった、よりダイナミックに画面が変化していくタイプのデザインを表現しやすくなりました。 中でも、複数人で同じデザインファイルを閲覧・編集可能な
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
