マガジンのカバー画像

Figma のまとめ

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

2020年4月の記事一覧

Figmaでつくるデザインシステム設計#3 Molecules〜Organisms

Figmaでつくるデザインシステム設計#3 Molecules〜Organisms

はじめに今回はFigmaのアセット利用して、Molecules〜Organismまでを作成します。Atomic Designについて、また各要素について引き続き解説します。
#1 Figmaでつくるデザインシステム Atomsまでの解説はこちらから
#2 Atoms〜Moleculesまでの解説はこちら

MoleculeのおさらいMoleculeとはAtomとAtomを組み合わせたものです。

もっとみる
【FigmaのAuto Layoutをマスターしよう vol.3】 固定幅のボタン

【FigmaのAuto Layoutをマスターしよう vol.3】 固定幅のボタン

【2024年5月追記】この記事は2020年に執筆したものであり現在のFigmaとは仕様が違うため参考にはなりません。昔はFigmaこうだったんだなぁという歴史資料として残しておきます。

ここまで第1回ではテキスト量に合わせて伸び縮みするボタン、第2回では複数の要素をもつ伸び縮みするボタンをつくってきました。

今回はAuto Layoutを使って固定幅のボタンを作っていきたいと思います。

幅を

もっとみる
Figmaでつくるデザインシステム設計#4 Organisms〜Templates

Figmaでつくるデザインシステム設計#4 Organisms〜Templates

はじめに
今回は、Organism〜Templateの作成について解説します。要素を集めて整形するフェーズとなります。また作成してきたコンポーネントに対して具体的な機能を付与することができるフェーズでもあります。UXデザインにおいても重要なポイントとなります。

Atom/Molecule/Organismについては前回の記事を参照していただければ幸いです。

Templateについて
Templ

もっとみる
【Figma×Zoom】オンラインワークショップを開催しました!

【Figma×Zoom】オンラインワークショップを開催しました!

Design College 運営のてっちゃん(@_tetchann)です。先日開催された完全オンラインワークショップについてレポートを書きます✍️

ワークショップについて■ テーマ
「デザインで新型コロナを解決せよ」
新型コロナウイルスの感染拡大による影響は、留まる所を知りません。そんな社会への影響をあなたのデザインで解決してみませんか?

■ 開催日時
4月18日(土)14:00~16:00

もっとみる
Figmaで完結するDESIGN SPRINT

Figmaで完結するDESIGN SPRINT

この記事は2019年11月26日に作成した記事です。

こんにちは、Malaysia在住のデザイナー兼デザインプログラムマネージャーの岡です。

今回は新規事業のプロトタイピングとユーザーテストをFigma上でDESIGN SPRINTを行い一週間で素早くやったよという話です。

今年の春頃から新規事業開発室ではワークショップやディスカッションを重ねて数十個の事業コンセプト作りました、その中から

もっとみる
【FigmaのAuto Layoutをマスターしよう vol.4】 カード型記事リスト

【FigmaのAuto Layoutをマスターしよう vol.4】 カード型記事リスト

【2024年5月追記】この記事は2020年に執筆したものであり現在のFigmaとは仕様が違うため参考にはなりません。昔はFigmaこうだったんだなぁという歴史資料として残しておきます。

今回は記事一覧に使われることが多いカード型のリストを作りたいと思います。
第1回から今回まででAuto Latoutの基本的な設定をひと通りマスターできます!

並び位置の基準(Alignment)の設定値につい

もっとみる