マガジンのカバー画像

Figma のまとめ

292
デザインツール Figma の使い方、良い紹介などをまとめたマガジンです。
運営しているクリエイター

#デザインシステム

Figma Variablesを活用したらエンジニアとのコミュニケーションがスムーズになった話

Figma Variablesを活用したらエンジニアとのコミュニケーションがスムーズになった話

Findyでプロダクトデザインとデザインシステム構築に取り組んでいる🐰です。前回はFigma Slot記事を沢山の方に読んでいただきありがとうございました。

今回はFigma Variablesを活用したらエンジニアとのコミュニケーションがスムーズになった話について自分用メモ含め残しておきたいと思います。

デザインシステムのトークンとはそもそもトークンとは色、フォントスタイル、余白等の値を表

もっとみる
FigmaのVariablesを実際にプロジェクトに導入してみるなら、どこから使うか

FigmaのVariablesを実際にプロジェクトに導入してみるなら、どこから使うか

Figmaの新機能のVariablesは、これまでの機能に比べるとできることが多く、今運用しているプロジェクトに何から導入していったらよいか模索している方が多いと思います。

Flappy Birdが作れたり、ポケモンを進化させることができたりと、Variablesの活用事例は多岐に渡りますが、実際のWeb・アプリのUIデザインにおいて、自分ならまずどこから導入してみるかをご紹介します。

一番手

もっとみる
Figmaのライブラリー機能を使う

Figmaのライブラリー機能を使う

株式会社アンドパッドでUIデザイナーをしている、よつくらです。

デザインシステムの構築などにあたって、Figmaのライブラリー機能をすでに活用されている組織も多いとは思います。しかし実はライブラリー機能のヘルプページはまだ日本語に翻訳されておらず、完全に理解せずなんとなく利用しているメンバーも多いのではないでしょうか。
ライブラリーの作成は有識者が行っている場合も多いのではないかと思い、今回は「

もっとみる
コンポーネントの設計は組織の傾向を顕著に表わすものになる

コンポーネントの設計は組織の傾向を顕著に表わすものになる

ソフトウェア開発領域ではあまりにも有名なコンウェイの法則という言葉があります。

これまで私は「あー、コンウェイね。そうそう。」と知ったつもりでいました。

しかし、運用するプロジェクトをいくつか経てコンウェイの法則そのものではないですが、組織傾向を無視してコンポーネント設計はできないという事が分かってきました。

本記事ではコンポーネント設計時に「組織の何がどう関わってくるのか」のイメージが具体

もっとみる
Figmaで再利用しやすいアイコンライブラリを作成する方法

Figmaで再利用しやすいアイコンライブラリを作成する方法

ここ最近、Figmaファイルのリファクタリングに取り組む機会が何度かあり、再利用しやすいデザインづくりを試行錯誤してきました。
その中で得られた知見を記事にまとめいきたいと思います。
今回は再利用しやすいアイコンライブラリの作成方法について説明します。

ライブラリとは何か?そもそもライブラリとはなんでしょうか?
Wikipediaで「ライブラリ」を調べると以下のように説明されます。

元々はプロ

もっとみる
デザイナーやエンジニアの作業効率が向上するFigmaの運用方法を考える

デザイナーやエンジニアの作業効率が向上するFigmaの運用方法を考える

カンムでプロダクトデザインをしている osanai です。こんにちは。

前回ご紹介したコンポーネント品評会により、デザインシステムにおけるコンポーネントの課題について議論が進み、不必要なコンポーネントが生まれにくくなり、デザインの意図が汲み取りやすくなりました。

品評会をしていると、しばしばデザイナーとエンジニアで「Figma でもっと効率よくできないかな」という話題が出てきます。例えば「コン

もっとみる
FigmaのCommunityで参考になるデザインシステムまとめ

FigmaのCommunityで参考になるデザインシステムまとめ

UIの勉強を進める中で、スタイルガイドの作成例からコンポーネントのまとめ方をまなぶべく、Figmaでチェックできるデザインシステムをリサーチしました。
大規模システム用のデザインシステムと、小規模のものとに分けてご紹介します。

👇大規模アプリ・詳細なコンポーネント群を作りたい

iOS/iPadOS 13 Design UI Kit

Material3 Design Kit

Materia

もっとみる
デザインシステム完全版|Figmaでの作り方、事例など【2024年版】

デザインシステム完全版|Figmaでの作り方、事例など【2024年版】


このドキュメントの目的デザインガイドライン・システムに関する理解を深め、UIUXを通したプロダクト価値の最大化が業界として底上げされるといいなと思っています。

あとは、私rikikaが個人的にいろいろなお仕事で作らせて頂く機会をいただくのですが、そのたびに事例や作り方のハウツーが目まぐるしく変わっていき、インターネット上に情報が散らばっていると感じていたのでそのsingle source of

もっとみる
NewsPicks UIデザイナーのFigma利用フロー大公開!

NewsPicks UIデザイナーのFigma利用フロー大公開!

自己紹介NewsPicksでUIデザイナーをしております。つづく(ひらい) ともこと申します!

初note投稿なので、本題に入る前に軽く自己紹介をさせていただきますm

2016年に武蔵野美術大学デザイン情報学科卒業後、ヤフー株式会社に新卒デザイナーとして入社しました。
ヤフーでは広告管理ツールのUIデザインやCtoCサービスアプリのデザインなどに携わりました。

そして今年の6月末でヤフーを退

もっとみる
SaaSデザイナーがすすめる、業務が効率化するFigmaプラグイン8選

SaaSデザイナーがすすめる、業務が効率化するFigmaプラグイン8選

こんにちは。アルプのデザイナーの大澤(@Tadaki)です。

サブスクリプションの契約や請求の管理を SaaS として提供する Scalebase というプロダクトのデザイナーをしています。

Scalebase もそうですが、SaaS プロダクトだと実データを用意するのが大変だったり、細かなデータの修正・整形が多くプラグインなしで作業するとかなり労力が必要かと思います。

もうすでに使っている

もっとみる
#Schema2021 recap/ 備忘録

#Schema2021 recap/ 備忘録

先日 10/7(日本時間 10/8)に Figma のオンラインイベント Schema2021 があり、無事に最後まで完走しました。日本時間 0:30 am 〜 6:30 am に開催という日本の Figma コミュニティにとっては中々の苦行でしたが、本日予告どおりに録画動画が公開されたので、後から改めてゆっくり観たいと思いますが、まずは今から 6 時間観るのは辛い、という人向けの参考備忘録。

もっとみる
SaaSサービス Design System Site & Figma Template まとめ

SaaSサービス Design System Site & Figma Template まとめ

Uzabase SaaS Design Division所属、SPEEDAのUIデザインを担当している進藤です。

今回は日頃チェックしているSaaSサービス*のDesign System SiteとそのFigma Templateをまとめたものをご紹介!

おまけとしてFigmaのVariantsをどの様に設定しているか?について、Buttonコンポーネントで一部サービスを比較したものも載せてみ

もっとみる
Figmaのリファクタリングからはじめるデザインシステムの構築

Figmaのリファクタリングからはじめるデザインシステムの構築

こんにちは、GaudiyデザイナーのTORAJIRO(@jirosh1998)です。

『英単語アプリ mikan』の副業デザイナーとして、Figmaリファクタリング&デザインシステムの一歩目を構築した話を書こうと思います。

このnoteの最後に、今回作成した『mikan DesignSystem』のデータを公開していますので、ぜひご覧ください👋(mizoさんをはじめmikanのみなさん、具体

もっとみる
勉強になったFigmaのデザインシステム8選

勉強になったFigmaのデザインシステム8選

おひさしぶりです🔅

最近は週末プロジェクトでアプリを2つリリースしようと動いていたり、一人暮らしを始めたり、バタバタした日々を過ごしておりました....
(toCサービス好きな人、一緒に週末プロジェクトやりませんか・・笑 週末プロジェクトはなかなか難しい....)

先日こんなイベントがあり、他社のサービスのFigmaファイルを見る機会が...!そして、Twitterなどで各社、各サービスがF

もっとみる