<style>
h1.tyshgc_heading {
font-size: 4rem;
}
h2.tyshgc_profile__heading {
text-align: left;
font-size: 4rem;
font-weight: 100;
}
</style>
<!-- .slide: data-background-color="#２３２３２３" -->
<!-- .slide: data-background-image="https://i.imgur.com/2IRinjy.png" -->
<!-- .slide: data-background-repeat="no-repeat" -->
<!-- .slide: data-background-size="cover" -->
<!-- .slide: data-transition="fade-in" -->
<h1 class="tyshgc_heading" style="position: relative; top: 240px; font-size: 2rem; font-weight: 300; display: inline-block; border: 1px solid #fff; padding: .5em 2em .4em; border-radius: 9999px;">
Framerの紹介
</h1>
---
<!-- .slide: data-background-color="#２３２３２３" -->
<!-- .slide: data-transition="fade-in" -->
<h2 class="tyshgc_profile__heading">
自己紹介
</h2>
<div style="font-weight: 100; text-align: left; margin-bottom: 5vh;">
Tsuyoshi Higuchi
<span style="font-size: 2.4rem;">樋口 剛</span>
</div>
<div style="text-align: left;">
<ul style="padding-left:0; margin-left:1em; text-align: left; font-size: 2rem; line-height: 1.6em;">
<li>鎌倉在住</li>
<li>常時接続型のスモール＆クローズドなコミュニケーションストアを<br />簡単に作れるSaaSプロダクトのスタートアップCXO</li>
<li>ソフトウェアデザイナー・ソフトウェアエンジニア</li>
</ul>
</div>
---
<!-- .slide: data-background-color="#252525" -->
<!-- .slide: data-transition="fade-in" -->
<h2 style="font-size: 4rem;">Framerとは</h2>
---
<!-- .slide: data-background-color="#252525" -->
<!-- .slide: data-background-image="https://i.imgur.com/7UGBlns.png" -->
<!-- .slide: data-background-repeat="no-repeat" -->
<!-- .slide: data-background-size="cover" -->
<!-- .slide: data-transition="fade-in" -->
<div style="text-align: left; font-size: 3rem;">
<p>
プロトタイピング&デザインツール<br />
Web-Base Platform版 と Native Application版が用意されている
</p>
<p>
FigmaやAdobe XDと似ている<br />
Webフロントエンドエンジニアにも親和性が高いツール
</p>
</div>
---
<!-- .slide: data-background-color="#252525" -->
<!-- .slide: data-transition="fade-in" -->
<blockquote style="margin: 0; margin-bottom: 2vh; padding: 2% 4%; font-size: 2rem; text-align: left; background: #46515f; color: rgba(0,0,0,.4);">
<p>
Most design and prototyping tools today are just systems to paint your ideas on a canvas.
</p>
</blockquote>
<div style="text-align: left; font-size: 1.6rem;">
by
<a href="https://www.framer.com/why-framer/" target="_blank">Get closer to real | Framer</a>
</div>
<div style="text-align: left; font-size: 3rem;">
<p>
<span style="font-size: 6rem; opacity: .3;">’’</span>
多くのプロトタイピングやデザインツールは<br />
アイデアをキャンパスに描き、<br />
紙芝居の様に決められたインタラクション・アニメーションを追加するもの。
</p>
</div>
---
<!-- .slide: data-background-color="#252525" -->
<!-- .slide: data-transition="fade-in" -->
<blockquote style="margin: 0; margin-bottom: 2vh; padding: 2% 4%; font-size: 2rem; text-align: left; background: #46515f; color: rgba(0,0,0,.4);">
<p>
Framer is the only tool built on web technologies and gives you a truly interactive and realistic output in less time.
</p>
</blockquote>
<div style="text-align: left; font-size: 1.6rem;">
by
<a href="https://www.framer.com/why-framer/" target="_blank">Get closer to real | Framer</a>
</div>
<div style="text-align: left; font-size: 3rem;">
<p>
<span style="font-size: 6rem; opacity: .3;">’’</span>
FramerはWeb技術（Javascript, React）をベースにしている。<br />
より現実のアプリケーションに近いプロトタイプを作ることを目指している。’’
</p>
</div>
---
<!-- .slide: data-background-color="#252525" -->
<!-- .slide: data-transition="fade-in" -->
<div style="text-align: left;">
<h2 style="font-size: 4rem;">プロトタイピング</h2>
</div>
---
<!-- .slide: data-background-color="#252525" -->
<div style="text-align: left; font-size: 3rem;">
<p>
モックアップ、視覚的に確認ができるもの <strong>⇢ 模型</strong>
</p>
<p>
プロトタイプ、実際に使ってテストができるもの <strong>⇢ 試作機</strong>
</p>
</div>
---
<!-- .slide: data-background-color="#252525" -->
<div style="text-align: left; font-size: 3rem;">
<p>
モックアップ的 <strong>⇢ Figma, Adobe XD</strong>
</p>
<p>
プロトタイプ的 <strong>⇢ Framer</strong>
</p>
</div>
---
<!-- .slide: data-background-color="#252525" -->
<!-- .slide: data-transition="fade-in" -->
<h2 style="text-align: left; font-size: 4rem;">Framerの特徴</h2>
---
<!-- .slide: data-background-color="#252525" -->
<!-- .slide: data-transition="fade-in" -->
<div style="text-align: left;">
<p style="font-size: 3rem;">
Framerには、<strong style="color: #3991ff;">Design Component</strong>と<strong style="color: #3991ff;">Code Component</strong>の<br />
2種類のコンポーネントが用意されている
</p>
</div>
---
<!-- .slide: data-background-color="#252525" -->
<!-- .slide: data-transition="fade-in" -->
<div style="text-align: left;">
<h2 style="font-size: 4rem; color: #3991ff;">Design Component</h2>
</div>
<div style="text-align: left;">
<p style="font-size: 3rem;">
他のツール同様、GUIでビジュアルデザイン
</p>
<ul style="padding-left:0; margin-left:1em; text-align: left; font-size: 2rem; line-height: 1.6em;">
<li>Frame（矩形のオブジェクト）をベースにビジュアルデザインができる</li>
<li>プロパティがCSSと近くてわかりやすい</li>
<li>StackオブジェクトでFlexboxレイアウトを作成できる</li>
<li>Scrollオブジェクトで明示的にスクロールエリアをコントロールできる</li>
</ul>
</div>
---
<!-- .slide: data-background-color="#252525" -->
<!-- .slide: data-transition="fade-in" -->
<div style="font-family: sans;">
DEMO
</div>
---
<!-- .slide: data-background-color="#252525" -->
<!-- .slide: data-transition="fade-in" -->
<div style="text-align: left;">
<h2 style="font-size: 4rem; color: #3991ff;">Code Component</h2>
</div>
<div style="text-align: left; font-size: 3rem;">
<p>
React.jsでComponentを実装
</p>
<ul style="padding-left:0; margin-left:1em; text-align: left; font-size: 2rem; line-height: 1.6em;">
<li>Propsをサイドパネルから入力することができる</li>
<li>状態や多少のロジックをもたせることができる</li>
<li>APIやGraphQLでデータ取得可能</li>
</ul>
</div>
---
<!-- .slide: data-background-color="#252525" -->
<!-- .slide: data-transition="fade-in" -->
DEMO
---
<!-- .slide: data-background-color="#252525" -->
<!-- .slide: data-transition="fade-in" -->
<h2 style="text-align: left; font-size: 4rem;">Design Componentを拡張する</h2>
---
<!-- .slide: data-background-color="#252525" -->
<!-- .slide: data-transition="fade-in" -->
<div style="text-align: left;">
<h2 style="font-size: 4rem; color: #3991ff;">Overrides</h2>
</div>
<div style="text-align: left; font-size: 3rem;">
<p>
Design ComponentのPropsを上書き、状態を定義
</p>
<ul style="padding-left:0; margin-left:1em; text-align: left; font-size: 2rem; line-height: 1.6em;">
<li>サイドパネルから受け取った値を最適化にして返す</li>
<li>簡易的に状態を持たすこともできる</li>
</ul>
</div>
---
<!-- .slide: data-background-color="#252525" -->
<!-- .slide: data-transition="fade-in" -->
DEMO
---
<!-- .slide: data-background-color="#252525" -->
<!-- .slide: data-transition="fade-in" -->
<div style="text-align: left;">
<h2 style="font-size: 4rem; color: #3991ff;">Smart Component</h2>
</div>
<div style="text-align: left; font-size: 3rem;">
<p>
ノーコード・ローコードでDesign ComponentにPropsを設定
</p>
<ul style="padding-left:0; margin-left:1em; text-align: left; font-size: 2rem; line-height: 1.6em;">
<li>StyleやVisible, ContentをPropsとして設定できる</li>
<li>Variantとして状態パターンを設けることができる</li>
<li>APIやGraphQLでデータ取得可能</li>
</ul>
</div>
---
<!-- .slide: data-background-color="#252525" -->
<!-- .slide: data-transition="fade-in" -->
DEMO
---
<!-- .slide: data-background-color="#252525" -->
<!-- .slide: data-transition="fade-in" -->
<h2 style="text-align: left; font-size: 4rem;">その他</h2>
---
<!-- .slide: data-background-color="#252525" -->
<!-- .slide: data-transition="fade-in" -->
<div style="text-align: left; font-size: 3rem;">
<ul style="padding-left:0; margin-left:1em; text-align: left; font-size: 2rem; line-height: 1.6em;">
<li>成果物のレビュー・コメント機能</li>
<li>ユーザテストサービスとの連携</li>
<li>Native Application版では実際のプロジェクトコード（React/Javascript）をimportできる</li>
<li>
<a href="https://www.framer.com/motion/" target="_blank">
Framer Motion
</a>
<span>
というOSSアニメーションライブラリの提供をしている
</span>
</li>
</ul>
</div>
{"metaMigratedAt":"2023-06-15T21:12:49.238Z","metaMigratedFrom":"YAML","title":"デザインツール「Framer」の紹介","breaks":true,"description":"フロントエンドクラブでのLT用","lang":"ja","contributors":"[{\"id\":\"7146b451-0159-49a3-8efa-a31977017fda\",\"add\":13041,\"del\":4617}]"}