のんびり学ぶ Figma 〜コンポーネント編〜 (1) | さくらのナレッジ
このシリーズについて みなさんこんにちは。さくらインターネットでフロントエンド領域を担当している山田です。この連載では、フロントエンド開発を行っているメンバーが、開発に役立つ情報を半分趣味で不定期掲載していく予定です。 自分からは、近年人気のデザインツールである『Figma』の便利な情報をお伝えしたいと思います。デザイナーの方はもちろん、エンジニアの方にも興味を持っていただける機能がたくさん詰まったFigmaを紹介していきます。 Figmaのご紹介 チーム開発に適したデザインツール Figmaのメインの機能の一つはもちろんデザイン制作です。Figmaを使うことで、これまでのデザインツールでは難しかったWebアプリケーションやモバイルアプリケーションといった、よりダイナミックに画面が変化していくタイプのデザインを表現しやすくなりました。 中でも、複数人で同じデザインファイルを閲覧・編集可能な
Tokens Studio(Figma Tokens) で小さくはじめるデザインシステム
📝 はじめに こんにちは犬です。 デザインシステムをはじめる上で、 Figma の神プラグインを見つけたので共有します！ わたしが携わっているプロジェクトでは、エンジニアとデザイナーの双方向のコミュニケーションツールとして Figma Tokens を採用しています。 📝 Figma本体 だけでは実現が難しい色の管理手法 Figma と フロントエンド実装時の色の管理については以下のように取り決めました。 # 色の定義と利用方法 1. Primitive colors を定義 ここで定義した色をサイト全体で使用する。 ※ 定義はするものの、全ての色をサイト全体で利用するとは限らない。 基本色（赤、黄、青、、、など）からアルファ値や彩度、明度を機械的に算出して全カラーパレットを作成。機械的に出した色に微妙なものがあった場合は微調整する Primitive colors の例 red.10
Figma's approach to modern PRDs
Writing a great Product Requirements Doc (aka “PRD”) can be hard. Even if you don’t use PRDs or consider the term outdated, you probably have some sort of product spec. For these types of docs, it’s hard to choose the right “altitude” to describe what your team is intending to build, as different cross-functional stakeholders care about different things and are equipped with varying levels of cont
Figma製スライドテンプレ集「わぶんスライド」を公開しました｜Miwa Kuramitsu
日本語でいい感じに見えるFigmaスライドテンプレ集を自分用に作成したので、「わぶんスライド」という名前でFigma Communityに公開しました。 きっかけは、講師を担当していたDesignship Doの講義資料作成にFigma Communityのスライドテンプレを使おうとしたところ、欧文前提で作成されたスライドテンプレしかなく和文を入力するとどうも間延びした印象になってしまう…と悩まされていたのがきっかけです。 Figma Communityで日本語でいい感じのプレゼンテーションテンプレートが見当たらず、結局いちから作ってる…いいから中身をはよ… — Miwa Kuramitsu (@transitkix) June 1, 2021 「わぶんスライド」の特徴 きほんのレイアウト 1920x1080px、16:9、6カラムで基本レイアウト6パターンを用意しました。画像の有り無しを
Figmotionの使い方 - bagelee（ベーグリー）
書き出しはmp4、gif、webmの3つの形式から選べます。 Figmotionを開くと、このような画面が出てきます。 画面を開いたら、まず右上の「Select child to animate」をクリックし、アニメーションをつけるパーツを選択します。 そしたらアニメーションをつけていきます。 Xの横にあるダイヤ型のアイコン（キーフレーム）をクリックすると、タイムハンドルがある場所にキーフレームを置くことができます。タイムハンドルはドラッグするか、またはタイムラインの上にある時間タイトルをクリックすることで動かせます。 次に配置したキーフレームをクリックすると、このようなエディタが出てきます。 msは現在エディタを開いている地点を表しています。そして、その下の数字を変えることでアニメーションを設定できます。 ここまでざっくりと使い方をご紹介しました。ではここから実践編です！ 実際に使ってみ
Ubieで利用しているアイコンをnpmパッケージとして公開しました！
こんにちは、Ubie株式会社でデザインエンジニアをやっているtakanoripです。 この度Ubieのプロダクトで利用しているアイコンのReact版 @ubie/ubie-icons をnpmに公開しました！ GitHubのリポジトリはこちら。 今回はその背景や実装方法などを紹介します。 自社でアイコンを作った背景 このアイコンセットが作られる前は、必要になったタイミングでデザイナーそれぞれが個別にアイコンをデザインしていました。しかし次のような課題がありました。 アイコンの種類が少ないので使いにくい 必要なタイミングで都度デザインしていたためテイストや方針がバラバラ 実装に組み込まれておらず使いにくい Ubie独自のアイコンや医療系のアイコンなども汎用的に扱えるようにしたい そこで、Ubieのプロダクト全般で汎用的に使えるアイコンセットを構築するプロジェクトが立ち上がりました。 アイコン
How to create Figma design loved by developers
I recently gave a presentation at Figma Config 2022 titled “How to Create Figma Design Loved by Developers”. Since the presentation was done in Japanese and I wanted to share the content to more people, I decided to transcribe the presentation in English. Hope you would like it! What is “Design loved by Developers”I believe there are two big criteria, and they are Easy to grasp the intent of desig
Figmaで色のStylesを効率よく作成する
Figmaではファイル上で使う色をStylesとして登録ができます。 標準のFigmaの機能だとこれをひとつずつ、サイドのDesignパネルからやっていくことになるので、色数が多い場合は少し大変です。 そこで、プラグインを活用しながらもう少し効率的にやりましょう。 手順 1. Styleをまとめて登録するプラグインをインストールする Chroma Colors Chroma Colorsは、選択したオブジェクトのfillの色をStyle登録するというシンプルなプラグインです。このときに登録されるStyleの名前はオブジェクトのレイヤー名が使われます。 2. 登録したい色をfillにしたオブジェクトを並べる 登録する色を整理するのを兼ねて、登録したい色のオブジェクトを並べます。 3. ひとつずつレイヤー名をリネームする これが少し煩わしい作業ですが、あとでリネームするより楽なのでがんばりまし
Figmaファイルの目次作成を楽にするToC Helperの使い方
Figmaプラグイン『ToC Helper』作りました ToC HelperはFigmaファイルの目次（Table of Contents）をつくるのを少し楽にするためのFigmaプラグインです。 ToC Helper – Figma モチベーション Figmaのデータ管理のTipsとして、Page内のFrameなどへのリンクを取得し、ページ内リンクのようにFigma上でリンクをやるという方法があります。 FigmaはPageを俯瞰して見られるので、多くの場合は目次まで用意しなくとも困ることは少ないとは思いますが、ある程度まとまったオンボーディング資料などでは目次があるにはこしたことはありません。 ただFigmaに自動で生成するような機能はないので、やるなら手動で一つずつリンクを拾っていかないといけないわけですが、それは少し煩わしいと感じ、少しでも楽になりそうなプラグインはできないかと考え
Figmaで色の変数管理をする🎨｜わたなべなつき
こんにちは！コネヒト株式会社デザイナーのなっぴーこと、わたなべなつきです。 コネヒトでは、最近SketchからFigmaに移行しました！まだまだ慣れない点も多く、日々、FigmaでのUI運用を試行錯誤しています。 今回は、そんな日々の試行錯誤の中で発見した、FigmaのLibrary機能を使って、色を変数管理する方法についてしたためてみました🎨 Sketch&Zeplin→Figma移行時の「色」に関する課題弊社ではこれまでSketchでUI制作後、ZeplinにUIデータをimportし、エンジニアさんにZeplinのUIデータを参照していただいていました。 Figma移行に伴い、エンジニアさんから「ZeplinのときはStyleguide機能があって、実装時に共通化する色がわかりやすかったけど、Figmaにはないの？」というご意見があがりました。 Figmaでも色に変数がつけられる！
Google社内でも利用、2022年使いたいデザインツール世界1位の「Figma」は何がスゴい？ | 進化が止まらない！ 最新ツール
Web制作で、こんな経験をしたことはないだろうか？ デザイナーAが作ったデザインをストレージに置き、メールでチームに共有。デザイナーBやエンジニアは保存されたファイルをダウンロードして作業しなければならないので、タイムロスが生じる。 デザインツールで制作したが、他メンバーとのバージョン違いが原因で体裁やフォントがずれ、手戻りが発生した。 非デザイナーはデザインツールのアカウントを持っていないので、メールに画像を貼り付けて確認依頼せざるを得ない。だがイメージが伝わりづらいうえ、操作性も確認できない。 デベロッパーやエンジニアへのコード送付は、別のアプリケーションをインストールして行うしかない。 こういった問題を解決できるサービスが、デザインプラットフォームの「Figma（フィグマ）」だ。WebデザインやUIデザイン、グラフィックデザインなどを制作できる。 一体どんなツールなのか？ Figma
エンジニアのためのFigma超入門
エンジニアがFigmaを学ぶ利点 ブラウザ上で共同編集ができるなどの理由から、最近では観測範囲内の多くの企業がFigmaをメインのデザインツールとして採用しています。 一般的にフロントエンドエンジニアはデザイナーがFigma上で作成したデザインファイルを元に実装を進めると思いますが、ここでエンジニア側にもFigmaの知識がある程度あればより円滑かつスピーディにUIの実装が行えるのではないかと考えています。 具体的には、エンジニアにFigmaの知識があることで以下のような利点があります。 デザイナーの意図を汲み取ることができる デザイナーと共通言語で話せる 実装の観点からデザイナーにFigmaの修正依頼ができる ↑の打ち返しを待たずに自分で軽微な修正ができる というわけで、今回はエンジニア目線で実装への応用を交えながらFigmaの基礎知識を解説していきたいと思います。 スタイル Figmaで
Figma Component Properties 、最強に噛み砕いてみた｜HikaruTayama
どうも Figmate のみなさん。アプデで便利になった Component Properties、不慣れなせいかイマイチ分かりづらかったので完全に理解するまでのメモを共有したいと思います。 2022.6.21追記 より良い記事を見つけたのでこちらのほうがオススメです🥳 そもそも Properties って？とかフロントエンドとの垣根やその意義については有識者におまかせしつつ、小難しい話を置いといてとりあえず使ってみたい人向けのウォークスルー的なものを目指します。 なお公式の Community File でも良いチュートリアルが公開されています！ ただ英語 & シャレオツすぎたので、本記事はなるべく実画面をスクショしました。 その他のアップデートはこちら。 はじめに & 共通してやることもし練習用ファイルがほしい方はこちらからダウンロードしてください🙏 https://www.fig
Figmaの色がブラウザの表示と違う…となったときに見直す設定
Figmaアプリとブラウザで色が異なる表示になってしまうことがあります。 実際にWebで実装する際に表示されるのはブラウザで表示したときの色味になるので、Figmaアプリでデザインしてから実装されたものを見ると「あれ？」となったりします。 この記事ではFigmaアプリとブラウザでの色を統一する方法、なぜそれが起きるのか、Figmaアプリの設定の選びどころについて紹介します。 目次起きることFigmaアプリとブラウザでの色を統一する方法なぜFigmaアプリとブラウザの色に差が生まれるのかFigmaアプリの設定の選びどころ起きること 左がFigmaアプリ、右が同Figmaをブラウザで表示した画面です。 スクリーンショットでもわかるくらい差が出ます。Figmaアプリとブラウザでの色を統一する方法最初にとりあえず統一する方法だけ紹介します。 メニューバーのColor Spaceの設定をsRGBに変
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Contrast Grid | Figma
Figma auto layout playground | Figma
Untitled UI — Figma UI Kit and Design System
キーノート（新機能発表予定） - 山下祐樹
ProToFlow | Figma
Material 3 Design Kit | Figma