<p>スターフェスティバル株式会社 エンジニアの<a href="https://stafes.notion.site/stafes/d0996a00d77d418280982797c7e16001?p=8b0ee9b8d8c34418a243cc9a586702d1" target="_blank" rel="nofollow noopener noreferrer">@nano72mkn</a> です！</p>
<p>今回は、GW にエンジニアが Figma に入門した時のこれ覚えておけば Figma 活用できるんじゃない（個人的意見）のまとめをしていこうと思います！</p>
<h1 id="figma-%E6%B4%BB%E7%94%A8%E6%8A%80%E8%A1%93">
<a class="header-anchor-link" href="#figma-%E6%B4%BB%E7%94%A8%E6%8A%80%E8%A1%93" aria-hidden="true"></a> Figma 活用技術</h1>
<p>これから紹介する機能たちは、同じ要素を使い回す場合にとても力を発揮します！<br>
エンジニアで Figma を触らないといけなくなった時、使い回し技術だけでも習得しておけばデザインを崩すことがなく手を入れることが可能です！</p>
<h2 id="autolayout">
<a class="header-anchor-link" href="#autolayout" aria-hidden="true"></a> AutoLayout</h2>
<p>フロントエンジニアの方には<code>FlexBox</code>と<code>padding</code>が設定できるようになる機能といえばイメージが湧くと思います！</p>
<ul>
<li>等間隔で配置させることができる
<ul>
<li>各要素間をひとつひとつ調整する必要はないです！</li>
</ul>
</li>
<li>要素の内側に余白を持たせることができる</li>
<li>ドラッグ＆ドロップで簡単に並び替えができる
<ul>
<li>並び替えた後に他の要素の位置を調整する必要がなくなります！</li>
</ul>
</li>
</ul>
<p>といったことができます！</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/deployed-images/91ffc0a6cf5134c23fd0ad29.gif?sha=e8627b7746f83dbcffe7565e74df7622681cd17c" alt="AutoLayout" width="500" loading="lazy" class="md-img"></p>
<p>最初はリストやナビゲーションまわりから<code>AutoLayout</code>化していくと便利さを実感できると思います！</p>
<h2 id="%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E5%8C%96">
<a class="header-anchor-link" href="#%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E5%8C%96" aria-hidden="true"></a> コンポーネント化</h2>
<p>本日の目玉機能。これだけは必須で使えるようになりましょう！</p>
<p>コンポーネントとは、ボタンやヘッダーなどの共通要素を使い回す時に活躍する機能です。<br>
フロントエンジニアの方は、React や Vue で出てくるコンポーネントと同じものをイメージしてもらえれば大丈夫です！</p>
<p>さっそくコンポーネント化をしていきます！</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/deployed-images/202f7c04079344e9444fbce4.gif?sha=3e89e0af7edabdeef16859df4df87fbf5b9f9821" alt="コンポーネント化" width="500" loading="lazy" class="md-img"></p>
<p><img src="https://res.cloudinary.com/zenn/image/fetch/s--VcMKIFpT--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/da7fc0ad2a4ac4c94c772f65.png%3Fsha%3Dff811f414ae710b41b3bce657fb5ebbf1d8be7bf" alt="Create component" width="200" loading="lazy" class="md-img"></p>
<p>コンポーネント化するには、要素（今回はボタン）を選択し、ヘッダーにある菱形（windows のアイコンを 45 度傾けたっぽい）アイコンをクリックするだけで完了。</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/deployed-images/aa29ae822f71fc28f8ba17ce.gif?sha=59194bd4038f6d1198dc26f3962d32d92caae6cd" alt="コンポーネントを配置して編集" width="500" loading="lazy" class="md-img"></p>
<p>コンポーネント化した要素は左サイドの Assets から ドラッグ＆ドロップ でもってくることが可能です。<br>
（コンポーネント自体をコピー＆ペーストで複製することも可能です！）</p>
<p>元となったコンポーネントを編集することで複製したコンポーネントに変更が反映されるのでメンテナンスがしやすくなります！</p>
<h2 id="%E3%83%97%E3%83%AD%E3%83%91%E3%83%86%E3%82%A3">
<a class="header-anchor-link" href="#%E3%83%97%E3%83%AD%E3%83%91%E3%83%86%E3%82%A3" aria-hidden="true"></a> プロパティ</h2>
<p>コンポーネントにはプロパティというものが存在します。</p>
<p>例えばボタンの場合、Hover した時に若干透過したいだったり、Disabled の時はグレーにしたかったり...<br>
そのような状態を管理できるものがプロパティです！</p>
<p>プロパティにも複数種類があるので一つひとつ紹介していきます</p>
<h3 id="variant">
<a class="header-anchor-link" href="#variant" aria-hidden="true"></a> Variant</h3>
<p>ひとつ目は<code>Variant</code><br>
これは、最初に紹介したような Hover や Disabled の状態を表したり、<br>
Main Color、Secondary Color などの色が変化する時などに使えます！</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/deployed-images/6990a31df5f283ed36b1d483.gif?sha=27b1d7756fef1b71e14341292eca6e2107688103" alt="Variant color" width="500" loading="lazy" class="md-img"></p>
<p>さらに <code>Variant</code> を増やす!!</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/deployed-images/1c68795b0d8bd7936ee6a591.gif?sha=1fc2b9dfd3344f9469b63eaf1479591624468018" alt="Variant もっと増やす" width="500" loading="lazy" class="md-img"></p>
<p>Variant を使うことで、ボタンが状態によってどのような挙動になるかを表現できるようになりました。（最高</p>
<h3 id="text">
<a class="header-anchor-link" href="#text" aria-hidden="true"></a> Text</h3>
<p>ボタンコンポーネントを他のページにも使いたい！<br>
けど、ボタンのテキストが<code>Button</code>だと使えなくないですか？</p>
<p>そんな時は<code>Text</code>を使いましょ！</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/deployed-images/dc3b4e65b775dee75c64e050.gif?sha=eac829f10614ac2acbe184ceb0ee1e85cd22fe8c" alt="Text" width="500" loading="lazy" class="md-img"></p>
<p>編集した時に位置がズレてしまっていたり、フォントが変わっていたり...<br>
そんなことも<code>Text</code>を使うことで、指定したフォント/文字サイズを使ってデザインを崩すことなく編集ができます！（最高</p>
<h3 id="boolean">
<a class="header-anchor-link" href="#boolean" aria-hidden="true"></a> Boolean</h3>
<p>まって！Icon ずっと表示しっぱなし！<br>
アイコン無しバージョンは<code>Variant</code>で作らないといけない？</p>
<p>そんなことはないです！</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/deployed-images/172009d3b5d64405a71e6899.gif?sha=5794eb9aa16b102461d792c99924a9e02cdd0c0e" alt="Boolean" width="500" loading="lazy" class="md-img"></p>
<p><code>Boolean</code>を使ってアイコンの表示/非表示を簡単に制御することが可能です！<br>
使い方によっては、<code>Switch</code>や<code>CheckBox</code>なんかは<code>Variant</code>よりも<code>Boolean</code>の方が適切だったりします。</p>
<h3 id="instance-swap">
<a class="header-anchor-link" href="#instance-swap" aria-hidden="true"></a> Instance swap</h3>
<p>アイコンを<code>pen</code>以外にも使用したいんだけど...</p>
<p>そんな時は<code>Instance swap</code>を使うことで、一部コンポーネントの変更もできるようになります！</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/deployed-images/350a5b491dc41fcaef3601d7.gif?sha=a7f15b1418c026e10800ec0e2604c0c8bb593fef" alt="Instance swap" width="500" loading="lazy" class="md-img"></p>
<p>選択時に表示されるコンポーネントは<code>Frame</code>で囲ってあげたり、<br>
コンポーネント名を<code>[Group名]/pen</code>とすることでグルーピングできます！（おすすめ</p>
<p><img src="https://res.cloudinary.com/zenn/image/fetch/s--gOnhky4p--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/7146e4396d3dc7f507fee4be.png%3Fsha%3D9f007374081d8f721b799de4459cb7f1ac2de464" alt="コンポーネントのグルーピング" width="500" loading="lazy" class="md-img"></p>
<h2 id="styles">
<a class="header-anchor-link" href="#styles" aria-hidden="true"></a> Styles</h2>
<p>フロントエンジニアの方も嬉しい機能、<code>Styles</code>です！<br>
名前から滲み出ていますが、カラーやフォント系（サイズや太さ）などを使いまわせる機能です！</p>
<p>デザイン見ると、色が<code>#3AA4DF</code>で太さは<code>bold</code>、サイズは<code>24px</code>と指定されている...<br>
UI ライブラリを使っていると（<code>Mui</code>や<code>Chakra UI</code>）<code>Theme</code>管理されているから<code>Primary</code>や<code>h2</code>で統一したいなと思うことがあると思います。</p>
<p>そんなときは<code>Styles</code>を使うことで解決できます！</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/deployed-images/7b1153890c88949e22652563.gif?sha=b545fe0911aec28e01e52630c23c2593c1527275" alt="Styles" width="500" loading="lazy" class="md-img"></p>
<h1 id="%E3%81%BE%E3%81%A8%E3%82%81">
<a class="header-anchor-link" href="#%E3%81%BE%E3%81%A8%E3%82%81" aria-hidden="true"></a> まとめ</h1>
<p>GW もすでに過ぎ去り 5 月も終わりに差し掛かってやっと書くことができました（書けてえらい！最高！</p>
<p>Figma は簡単に操作でき、<code>position: absolute;</code>のように上に重ねるだけでそれっぽいものができてしまいます。<br>
便利な機能がたくさんありますが、隠れていることが多いため見つけられていない人もいると思います。<br>
この記事で、少しでも Figma を活用できる人が増えると嬉しいです！</p>
<p>今回の記事までに使い倒すことができなかったので紹介できなかったのですが、<br>
プラグインで機能を追加することも可能です！<br>
Figma から React のコードに変換するものや、Storybook を Figma 上に表示するものなど...<br>
フロントエンジニアとデザイナーを繋げてくれるものもあるので今後も Figma を使いまくっていきたいと思います！</p>
<h1 id="%E6%8E%A1%E7%94%A8%E3%82%82%E3%82%84%E3%81%A3%E3%81%A6%E3%81%84%E3%81%BE%E3%81%99%E3%82%88%E3%83%BC%EF%BC%81%EF%BC%81%EF%BC%81%EF%BC%81">
<a class="header-anchor-link" href="#%E6%8E%A1%E7%94%A8%E3%82%82%E3%82%84%E3%81%A3%E3%81%A6%E3%81%84%E3%81%BE%E3%81%99%E3%82%88%E3%83%BC%EF%BC%81%EF%BC%81%EF%BC%81%EF%BC%81" aria-hidden="true"></a> 採用もやっていますよー！！！！</h1>
<p>Figma に興味が出たエンジニアさん!デザイナーさん！<br>
スターフェスティバルで Figma いじり倒していきませんか？</p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__b58d14acfa9a7" src="https://embed.zenn.studio/card#zenn-embedded__b58d14acfa9a7" data-content="https%3A%2F%2Fstafes.notion.site%2Fstafes%2Fd0996a00d77d418280982797c7e16001" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://stafes.notion.site/stafes/d0996a00d77d418280982797c7e16001" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://stafes.notion.site/stafes/d0996a00d77d418280982797c7e16001</a></p>
<p>気軽に相談、ご応募お待ちしております！<br>
ウェルウェルカムカム！！</p>


GWにFigmaに入門したエンジニア

採用もやっていますよー！！！！

Discussion