マガジンのカバー画像

Figma

22
本
運営しているクリエイター
Nviveto
Nviveto

Nviveto

FigmaのAsset libraryを常にインポート状態にする

FigmaのAsset libraryを常にインポート状態にする

FigmaのTeam設定。
大きな組織になるとアセットライブラリでコンポーネントを用意し、UIファイルにインポートして使うケースがよく発生すると思いますが、その際毎回手動でアセットライブラリを繋ぎ直すのってめんどくさいですよね。

そんなとき常に新規のページを作成したときに自動でアセットライブラリをつなげた状態にしておく方法があります。

ただしこちらはAdmin userの権限がないとできないの

もっとみる
Nviveto

Nviveto

[Web] 規律性のあるマージンルールを定めてみる〜Design system Figma Variable マージン編〜

[Web] 規律性のあるマージンルールを定めてみる〜Design system Figma Variable マージン編〜

今までアプリのデザインをメインで携わることが多かったのですが、現在はWebサイトの開発に関わる機会が多く色々発見と注意すべき点がありました。

その中でも今回はマージンルールについてここ数ヶ月で試している内容をシェアしようと思います。

WebとAppで大きく違う点マージンルールの前に、一度WebとAppでの大きな違いについて記載しておきます。
当たり前のことではありますが、慣れていると制作が漏れ

もっとみる
Nviveto

Nviveto

Figma tips〜インポートしたインスタンスが壊れる〜

Figma tips〜インポートしたインスタンスが壊れる〜

Figmaで外部ライブラリをインポートして使うことはよくあると思いますが、その際インポートしたインスタンスのレイアウトが崩れたり壊れていることがあります。

Figmaのバグらしいので、治ることを祈るしかないのですが、データの作り方で解消する方法もあるようなのでシェアしておきます。

よくあるケースで、テーブルのような上下のマージンがおかしくなっていて、Enterや編集をすると元に戻るけど、リロー

もっとみる
Nviveto

Nviveto

Figma tips〜コンポーネント一括解除〜

Figma tips〜コンポーネント一括解除〜

Figmaで作ったコンポーネントインスタンスでデザインを組んでいく際、古いデータと最新データを見比べたいときや、インスタンスに変更を加えたくない時があります。

そんな時は右クリックで「Detach instance」でポイント解除はできますが、ページ全体を一括で解除したいこともありますよね。

そんな時に使えるTipsを２つ紹介します。

Figmaの標準機能を使う

ひとつめはFigmaに標準

もっとみる
Nviveto

Nviveto

【命名規則】コンポーネントの名前はどうつけるべき？

【命名規則】コンポーネントの名前はどうつけるべき？

はじめにアプリ開発に携わってから10年以上の月日が経ちましたが、思い返すと数年前はこんな課題がありました。

Design Systemやコンポーネントを使わない場合、開発面でも、対象範囲の把握が難しかったり、一括変更できなかったりなど、課題が多くありました。

上記の課題は、UI制作が成熟してきていて、Design Systemを作成することで解消できるようになりました。

Design Sys

もっとみる
Nviveto

Nviveto

Figmaで個別URLの該当箇所に飛ばない現象〜原因と解決策〜

Figmaで個別URLの該当箇所に飛ばない現象〜原因と解決策〜

最近よく起こっていた事象で、Figmaの共有URLをクリックしても、ファイルは開くけど該当箇所に飛ばない現象。
修正箇所の共有時にとても困っていましたが原因がわかったので記載しておきます。

その前に念の為個別リンクの説明を載せておきます。

Figmaの個別リンクとは

Figmaはオンライン上でアクセスと管理が可能なデザインツールです。
オフラインデザインツールとは違い、URLを共有することで

もっとみる
Nviveto

Nviveto

Figma玄人向け 痒い所に手が届くTips　〜便利な設定〜

Figma玄人向け 痒い所に手が届くTips　〜便利な設定〜

FigmaはUI設計で欠かせないツールになりました。
UI設計で必要なさまざまな機能が盛り込まれています。

主要機能でもかなり多くのことができるのですが、使っていなかった、知らなかった、新しい機能を駆使したデザイン作成について、私が知って作業スピードが倍増したTipsを紹介します。
知らなかった人はこれをすることで、作業効率がかなり上がること間違いなしです。

Auto Layout編▼ テキス

もっとみる
Nviveto

Nviveto

Figma新機能のまとめ〜2022年5月アップデート版〜

Figma新機能のまとめ〜2022年5月アップデート版〜

今回のFigmaのアップデートはかなりUIの変更もあり大幅に機能が追加されました。

今までできなかった痒い所に手が届く機能が多数リリースされていて嬉しい限りです。

特徴的なものや個人的に使えそうだと思ったものを載せておきます。

AutoLayout並び順やレイアウト方法の拡張

Autolayout機能はUIもかなりかわりました。
3点リーダーのメニューを開くと、Autolayoutの調整が

もっとみる
Nviveto

Nviveto

Design Systemの作り方シーズン3〜透過を駆使しよう〜

Design Systemの作り方シーズン3〜透過を駆使しよう〜

Design Systemをどう作っていくかは、色々試行錯誤があります。
シーズン1とシーズン2を経て、プラスこんなことも考慮すると作りやすくなっていくという小技編のご紹介です。

今回は色について。
シーズン1で触れた、色のスタイルは設定しておきましょうというお話で、小さく「透過も一緒に作っとくと良い」という一文を書いていました。

なぜ透過があると良いのか、

例えばですが、背景色やテキストフ

もっとみる
Nviveto

Nviveto

Design Systemの作り方シーズン2〜コンポーネントの作り方〜

Design Systemの作り方シーズン2〜コンポーネントの作り方〜

シーズン2です。
Desigh Systemって作るのめんどくさいですよね。(再)

シーズン1で紹介した最低限これだけやっとこう編から一歩踏み込み、
実際コンポーネントを作っていく時ってどうしたらいいんだっけ？
というところを紹介していsきます。

Atomic Design思考を取り入れようまずはAtomic Designというのをご存知でしょうか？
ご存知ない方はこちらをご覧ください。

A

もっとみる
Nviveto

Nviveto

Design Systemの作り方〜とりあえずこれだけやろう〜

Design Systemの作り方〜とりあえずこれだけやろう〜

Design Systemは近年Figmaの登場により飛躍的に注目を浴びていると思います。
でもDesign System って作るの難しくないですか？

色々な悩みがありますが、筆者も日々試行錯誤して何が一番良いんだろうと考えています。

結論、完璧なものを短期間では作れない。というところに落ち着きました。

まだDesign Systemは確立した絶対的ルールがあるわけではなく、各社色々と作っ

もっとみる
Nviveto

Nviveto

PXとPTの関係性〜Webで設計したものを印刷する〜

PXとPTの関係性〜Webで設計したものを印刷する〜

株式会社Brewusでは様々なサービス開発を行っていますが、今回はWebで作成したものを印刷物として出力することになり、改めてWebと印刷物の関係性について調べてみました。

大きく今回の課題になっているのが、10px以下のフォントサイズはブラウザ上サポートされず再現されないため、10pt以下をWeb上で設計し、印刷できるのか？という点になります。

まずは、DPI(ディーピーアイ)とPPI(ピー

もっとみる
Nviveto

Nviveto

FigmaのEffect〜FrameとObjectでエフェクト効果が違う件〜Spreadの罠

FigmaのEffect〜FrameとObjectでエフェクト効果が違う件〜Spreadの罠

Figmaには色やテキストをデザインシステムとしてファイルごとに登録できる便利な機能があります。

ガイドやEffectsも登録できるのがありがたい！

例えばホバーした時の影をEffects Stylesに登録しておけば

このように一発でホバー状態を表現できます。

が、

この機能を使い出してハマったことがあるのでここで紹介しようと思います。

このように、登録している同じEffect St

もっとみる
Nviveto

Nviveto

Figma Design System(デザインシステム)参考テンプレートURL集

Figma Design System(デザインシステム)参考テンプレートURL集

今回はFigmaの公開ファイルの中からDesign System(デザインシステム)が綺麗にまとまっているものを紹介します。

Design System(デザインシステム)とは？UIデザインを制作する前に、このサイト・サービスで使うカラースタイルやフォントサイズ、コンポーネント（ボタンやフォームなどよく使うものをライブラリ化したもの）をまとめて、担当デザイナー以外の人でもパッと見てすぐにデザイン

もっとみる