マガジンのカバー画像

Figma のまとめ

320
デザインツール Figma の使い方、勉強になる記事などを独断と偏見でまとめたマガジンです。 (人力なので漏れてたらすみません🙏)
運営しているクリエイター

2019年12月の記事一覧

FigmaにAuto Layoutが来た!

FigmaにAuto Layoutが来た!

こんにちは、ふじけん(@kenshir0f)です。
FigmaにAuto Layoutが来て早速触ってみたので、その機能をご紹介します。
今回は、チュートリアル読む前にさっと機能だけを知りたい方向けに書きました。

Auto Layoutとは?テキストの長さや要素の数によって、自動的にそのオブジェクトのサイズが変わる便利な機能です。
テキストの長さを変えるたびに、その背景やボタンの位置を変えていた

もっとみる
FigmaのAuto Layoutにまだ出来ないこと

FigmaのAuto Layoutにまだ出来ないこと

こんにちは。@toi_toi_yです。ついにFigmaにAuto Layoutが搭載されましたね! やったー! よしFigmaのAuto Layout完全に理解した。

注: 完全に理解した

FigmaのAuto Layout中身の幅 / 高さに応じて親要素の大きさを変えることができます。
アイコン付きテキストやボタンなどに使うと超便利です。

ここで重要なのは要素の大きさは全て「中身」に依存

もっとみる
【2019年】私的ベストFigma Plugins

【2019年】私的ベストFigma Plugins

こんにちは!
Figma Advent Calendar 2019 11日目担当のデザイナーをしているトリバコです。

もう今年も残りあとわずかとなりましたね。
そんな年末ということで、使ってきたツールの整理も兼ね、私の仕事に大きく影響を与えてくれた「Figma」のお気に入りプラグインを利用頻度が高かったものから順に今回ご紹介していきたいと思います!

Nisa Text Splitter
テキス

もっとみる
Figmaで可変に強いグラフを作る方法(DLファイル有り)

Figmaで可変に強いグラフを作る方法(DLファイル有り)

Figmaで高さや幅を変更しやすいグラフを作る方法を紹介します。
下記ツイート動画の通り、固定して欲しい箇所が良い感じに、固定されるようになっています。

作り方基本的には、固定したい要素や可変したい要素の単位でframeにして、Constraintsで可変や固定位置の指定をするだけです。

細かく解説しようかと思いましたが、ファイルを触ってもらった方が早い!ので、プロジェクト選択画面の右上アイコ

もっとみる
Figma FAQ 、 よくある質問  #02

Figma FAQ 、 よくある質問 #02

どうもです、Figma が気になるみなさん。
Figma コミュニティでの質問 & 回答まとめシリーズ 2 本目です。
今回は『知ってると便利 10 選』です。

#01 の『意外と知らないこと 10 選』も合わせてどうぞ。

Q1. 同じ位置にオブジェクトをコピペしたい

・オブジェクトをコピー
・ペースト先のFrame を選択
・ペースト

資料のタイトルや、UI ボタンを同じ位置におきたい

もっとみる
FigmaのAuto Layoutを活かしてUI Kitを作った話

FigmaのAuto Layoutを活かしてUI Kitを作った話

※このnoteは12/15に開催される名古屋デザインLT会 vol.2で発表する内容です。LTのスライドや台本を公開しています。

※と、同時にFigma Advent Calendar 2019の15日目にも投稿します。

※Figmaのデータはここで公開しています

はじめに自己紹介

エイチームライフスタイルでシニアデザイナーをしています、綿貫佳祐と言います。今日はよろしくお願いします。

もっとみる
Figmaのスターター教材を作った話

Figmaのスターター教材を作った話

このnoteはFigma Advent Calendar 2019の24日目の記事です。

タイトルで完結しています、スターター教材を作りました。以下のURLからアクセスできますので是非Duplicateして使ってください🙏

スタイルやコンポーネント - 基礎編
https://www.figma.com/c/file/791086834162158183

スタイルやコンポーネント - 実践

もっとみる
CSSそこそこわかる人がとりあえず figma で何か作ることになった時の tips 集

CSSそこそこわかる人がとりあえず figma で何か作ることになった時の tips 集

こんにちは。こちらはLinc'wellアドベントカレンダーの24日目です。

最近 figma を使い始めたのですが、私はキャリアとしてはフロントエンドエンジニアとしての歴が長く、何か実現したいデザインが頭に思い浮かんだ時、思考としては

「display:flex の justify-content:space-between なレイアウト作りたいんだけどな〜」

とCSSでイメージしてしまいま

もっとみる
なぜ Figma だったのか

なぜ Figma だったのか

はじめにどうも、Figma 好きの皆さん。

本記事は数多あるデザインツールの中から、なぜ Figma でなければならなかったのか、私の持論を山盛り書いたものです。きっといつか、急に恥ずかしくなって消すかも。
再現性や有用性はないと思ってください。それでも良い!と思った方の暇つぶしにでもなれば幸いです。

Figma を選択した理由基本的には同じですが、大きく分けて 3 つあります。

・インクル

もっとみる