マガジンのカバー画像

エンジニアがFigmaでデザインできるようになるまで

5
本
運営しているクリエイター
りきはん (rc-code)

#UIデザイン

りきはん (rc-code)

りきはん (rc-code)

Figma レベル4: ファイルとプロジェクトのシェア

Figma レベル4: ファイルとプロジェクトのシェア

こんにちは、アプリエンジニアの田中佑です。

今日はファイルとプロジェクトのシェア方法です。
意外と iframe を利用したシェアは知られていなそうだけど、いろんなサードパーティのツールと組み合わせればすごく便利な気がしたので、ぜひご一読ください🙌

ファイルのシェアさて、チームを作成し複数人で作業していれば問題ないことですが、個人でデザインを作成していると、他者に確認してもらったり、場合によ

もっとみる
りきはん (rc-code)

りきはん (rc-code)

Figma レベル3: DesignFile作成・Pin留め・複製・削除・リネーム、JamFileの説明

Figma レベル3: DesignFile作成・Pin留め・複製・削除・リネーム、JamFileの説明

こんにちは、アプリエンジニアの田中佑です。

今日はDesignFileの作成とJamFileの説明、ファイルのPin留め・複製・削除・リネームです。
これができればあなたも一人前のFigmaデザイナー。
嘘です、まだ初歩にも至ってないです。笑
備忘録なのでおやつでも食べながら見てください！

Design File とはFigmaには2021/09現在 Design File と Jam Fil

もっとみる
りきはん (rc-code)

りきはん (rc-code)

Figma レベル2: プロジェクトの削除と作成

Figma レベル2: プロジェクトの削除と作成

こんにちは、アプリエンジニアの田中佑です。

今日はプロジェクトの削除と作成方法です。
そんなん見んでも分かるわ！！！というツッコミを言いつつ見てください。
8割備忘録なので。笑

プロジェクトとは前回チームを作成したと思うのですが、プロジェクトはそのチームで作成していく作業レイヤーのまとまりです。
次回紹介するFileも含めて階層的にはこんな感じですね。

- Team| ∟Project|

もっとみる
りきはん (rc-code)

りきはん (rc-code)

Figma レベル1: Freeプランでのチーム作成

Figma レベル1: Freeプランでのチーム作成

こんにちは、アプリエンジニアの田中佑です。

さて今日から早速Figmaでモックを作っていこうと思います。
ということで、まずはチームを作ろうと思います。

チーム作成まずFigmaのアプリを開いてログインします。
今までは個人的に遊びでいじったり、デザイナーから共有を受けたデザインを確認するだけだったので、基本的に Personal というチームしか使っていませんでした。

個人的に使うのであれ

もっとみる
りきはん (rc-code)

りきはん (rc-code)

Figma レベル0: エンジニアがアプリデザインを作る

Figma レベル0: エンジニアがアプリデザインを作る

こんにちは、アプリエンジニアのリッキーです。

自分は今まで会社に勤めて大規模アプリケーションのフロントエンド開発・iOS開発をやってきたり、フリーランスになってからはWebサイトの作成やアプリ開発の受託を行ってきました。

さてそんな中で、自分のアプリを作ってみようかなーと考えた時に「まずワイヤー作ってみよ！」と思いました。
ところが、プレゼンテーションツールなどでワイヤーを作り始めると結構大変

もっとみる