CeeBeeDeeCSS Nite / DTP Transit
#朝までFigma

PAST EVENT

#朝までFigma

2024年10月25日開催

「#朝まで」シリーズのFigma版。23組(24名)のFigma使いが持ち時間10分で朝5時まで代わる代わる話します。

セッション内容

Figmaでスマホのカレンダー壁紙をつくってみよう!

もち

Figmaでカレンダー壁紙をつくってみましょう。オートレイアウトで汎用的なカレンダーを組み、好きな写真やイラスト、プラグインを使って世界に1つだけのオリジナルカレンダー壁紙をつくります。自分のスマホの壁紙に設定したり、Xで配布するのもOK。カレンダーのデータは配布するので、みんなも自分だけのカレンダー壁紙をつくってみてね!

チームビルディングを加速する!FigJamを活用した共創デザインワーク術

タグチマリコ

当セッションでは、チームミーティング、アイスブレイク、要件定義、振り返り、デザイン批評、さまざまなワークショップに使えるFigJamの「もっとチームでジャムる」活用アイデアをご紹介します。なんとなくFigJamを使っていたディレクターさん・デザイナーさんはもちろん、職種問わず、チームを巻き込んでお仕事している方はぜひ、一緒にジャムりましょう!

FigmaとLottielabで手軽に作成するUIアニメーション

鈴木 慎吾

WebやアプリのUIに上手に動きを取り入れると、ユーザーの理解を助けたり、感情に働きかけることができます。このセッションでは、FigmaとLottielabを使用して、Webやアプリに手軽にアニメーションを取り入れる方法を説明します。Lottielabはブラウザからタイムラインアニメーションを作成できるツールで、Lottie形式のアニメーション書き出しに対応しています。Figmaプラグインを通じてFigmaで作成したデザインリソースをLottielabに読み込み、ループアニメーションを作成します。

Figmaでのデザイン作業を効率化するnecco流整理術5選

中川 小雪

neccoでは、プロジェクトを円滑に進めるためにFigmaファイルのテンプレートを作成しています。最新デザインがどれか分からない、デザインがFIXしたかどうか不明…という悩みを抱えている方に向けてFigmaのデータ整理術について5つ紹介します。1. ファイルの中身が判別しやすいサムネイル設定2. 素材、参考調査、デザインを整理しやすいページ構造3. 作業を始める時に迷わない目次ページ4. 一目でステータスがわかるラベル作成5. アーカイブファイルで不要なデータを一元管理アンケートをご回答いただいた方には、本セッション用のFigmaファイルとスライドをお持ち帰りいただけます。デザイナーに限らず、プロジェクトに関わるディレクター・エディター・エンジニアのみなさん必見です!

Figmaで進めるドキュメントデザイン

transitkix

デザインガイドライン、ポートフォリオ、プロジェクト資料、登壇資料など、さまざまなドキュメントをFigmaでデザインしてみませんか?このセッションでは、Figmaで資料を作成するメリット、デザインスタジオ・KRAFTS&Co.(クラフツアンドコー)での実際の活用事例をお見せした後、その場で実際にFigmaを活用して自己紹介を作成します。さらに上級編として、Figma Communityで無料配布している「わぶんスライド」を活用しVariableを活用したスライドデザインのカスタマイズ方法を実演します。

ブログカード作成で学ぶ!Figmaのマスト機能オートレイアウト習得術

安藤 雅一

オートレイアウト初心者向けの基礎講座。基本機能を簡潔な5つのルールで学びます。さらにライブデモで一緒にブログカードを作りオートレイアウトの理解を深めます。オートレイアウトに困っている方、Figmaを使い始めた方、Figmaが好きな方一緒に楽しくセッションしましょう!

保守性と拡張性を両立させるFigmaデザインデータ設計術

井斉 花織

アイデアの発散と収束を繰り返すデザイン制作過程においては、なるべく多種多様な変更に耐えうる柔軟なデザインデータの設計を目指していけると嬉しいですよね。このセッションでは、ComponentやText、Sectionなど、Figmaを代表する機能のちょっと細かな特徴を確認しながら、より保守性や拡張性が担保されたデータ作りを探っていきます。すでにFigmaをバリバリ活用しているデザイナーさんはもちろん、プロダクトデザインの考え方に興味をお持ちの方もぜひご参加ください。

自作Figmaプラグインで日々のデザイン作業をラクにしよう

seya

プラグインはFigmaをプラグラミングを通じて操作させてくれる頼もしいツールです。ですが、自分にぴったりなプラグインが見つからないこともあると思います、そんな時は自作をしてみてはいかがでしょうか?本セッションではプラグインの開発の始め方をガイドしていきます。プログラミングと聞くと難しく感じるかもしれませんが、昨今はChatGPTなどの力も借りるとそれなりに動くものも作れるのでぜひトライしてみましょう!

模写から始めるFigmaの使い方

Miyamoto

FigmaはアプリUIやウェブデザインで多用されているツールですが、少し変わったFigmaの使い方を紹介します。デザインツールを覚える動機や手法は様々ありますが、今回はFigmaで模写しながらよく使う機能やショートカットの使い方を学ぶセッションになります。デザインの模写から始め、Figmaの基本的な機能やプラグインを使いながらデザインを再現し、それを基に高度なプロトタイプを制作するまでの工程をお見せします。

Figmaマスターへの道!効率UPテクニック集

キャシ

当セッションではFigmaを使ったデザイン作業の効率を大幅に向上させる秘訣を公開します。役に立つショートカットキーを中心にすぐに実践できるテクニックを豊富にご紹介。特にFigma初心者の方、デザイン作業の生産性を飛躍的に高めたい方必見です。プロのデザイナーがデモを交えながら楽しく解説するので、ぜひ一緒に手を動かしながらご覧ください。今すぐ使える実践的なスキルが満載なので、明日から作業時間が半減するかも!? Figmaでのデザインワークをより効率的に、より創造的にしたい方は、ぜひご参加ください。

エンジニアに伝わる実装しやすいモックアップのつくりかた

putchom

私がはたらく株式会社スマートバンクで「わかりやすい!」とエンジニアに評判のモックアップの作り方をご紹介。1. よくあるモックアップの問題点の共有2. Section機能で画面単位の場合分けを表現する方法の解説3. Connector Line機能で画面遷移を表現する方法の解説「作ったモックアップがなぜかエンジニアにうまく伝わらない...」という方はぜひご参加ください。

FigmaからStudioへ!ノーコードサイト制作のワークフロー

松下 絵梨

Figmaで作成したデザインをプラグイン「Figma to STUDIO」を使用してStudioに取り込み、ノーコードでウェブサイトを構築するためのシンプルなワークフローをご紹介します。レイアウトを崩さないコツや、レスポンシブ化のポイントを、デモを中心にお伝えします。デザインからサイト公開までをコーディングを行わずに進める方法を知りたい方は、ぜひご参加ください。

Figma AIを活用した効率的な自動化テクニック

けんじ

直近のアップデートにより、FigmaにもついにAIが導入されました。Figma AIには、デザインのドラフトを作ったり、画像生成やテキストのリライトなど様々な機能があります。本セッションでは、Figma AIの特に有用だと感じた機能を使って面倒な作業を自動化し、効率的にデザインやプロトタイピングを行うヒントをご紹介します。

コードで操作するFigmaのデザインデータ

もっと

Figmaのデザインデータをコードで操作する方法をお伝えします。CSVといったデータをデザインデータに反映する方法や、ランダム性を持ったグラフィックを作成する方法を紹介します。おみやげとして、コードのスニペットを配布する予定です。

ユーザー理解を深めるためのトランジション制作のキホン

本末 英樹(オロ)

ユーザーが迷わずに使えるUIを作るには、トランジションやイージングの工夫が大事!本セッションでは、AppleやGoogleのガイドラインを参考に、自然なアニメーションを使って心地よい体験をデザインするコツをお伝えします。Figmaのプロトタイプ機能を活用した具体的な設定方法も紹介しているので、UIデザイナーだけでなく、Webデザイナーの方にもおすすめです。気軽に取り入れて、もっとわかりやすいUIを目指しましょう!

Figma Variablesを活用した日本語キーボードのプロトタイピング

Atarapi

Figmaで日本語キーボードを作成し、Variables機能をうまく活用して実際に文字を入力、それをデザインに反映させるプロトタイピングまで挑戦してみましょう!高度なプロトタイピングですが、デモをする際に日本語キーボードが使用できることで、表現の幅が広がります!少し難易度の高いVariables機能を学びながら、今後のデモで役立つキーボードの作り方をご紹介します。Variablesやプロトタイプ機能を学びたいという方はぜひご参加ください!

デザインシステムの実例から見るFigma Component設計の流儀

本田 雅人

株式会社CyberAgentのブログサービス「Ameba」のデザインシステム「Spindle」の作者が、実際のSpindle UIのComponentライブラリを見ながら利便性上げの流儀について解説します。快適で一貫性のある開発体験を体現するために、Figmaの新機能を取り入れつつ4年間アップデートを続けてきました。実際に実務活用できているサンプルなので、Spindle UIの創意工夫を是非御覧頂きつつ、いいなと思った部分は是非取り入れて頂ければ幸いです。

実践ですぐ使える!デザインシステム構築の活用術

ken

Figmaでデザインシステムを構築する上で使えるちょっとしたTipsや活用術を紹介します!デザインシステム、気づいたらデータが膨大になったり、コンポーネントの構成が統一感なくなったりしがちですよね。ひとりデザイナーからチーム運用まで、少しでもタメになる内容になるかと思います。ご参加お待ちしております!

「Stockpile UI」で学ぶ!スタイル、バリアブル、コンポーネント、バリアント活用術

相原 典佳

UIデザイン初心者さんにとって、「どうやってUIデザインを勉強したらいいのかわからない!」といった悩みがあります。そんな方に向けた「学習しやすい」UI Kitとして作成したものが「Stockpile UI」です。Stockpile UIは、相原の共著書である、UIデザイン初学者〜中級者向けの書籍『Figmaで作るUIデザインアイデア集』のためのUI Kitです。本セッションでは、実際のファイルをさわりながら、Stockpile UIに含まれるスタイル、バリアブル、コンポーネント、バリアントを紹介します!

ベジェ好きにこそ使ってほしい!Figmaのシェイプ・ペンツール

角田 綾佳(すぴかあやか)

アイコンなどのベクターグラフィックを作るとき、つい慣れたIllustratorで…となりがちですが、Figmaのシェイプ・ペンツールもとても優秀です。シェイプツールやペンツールの基本機能から、Figma独自の「ベクターネットワーク」などを使って、アイコンなどのベクターグラフィックを作る・編集する方法を紹介します。

麻雀で覚える!オートレイアウト・コンポーネント・バリアント

巽 美帆(つまみ)

Figmaの基本機能である「コンポーネント」・「バリアント」・「オートレイアウト」を、ゲームアプリやMリーグなどのプロスポーツとしても人気の高まっている"麻雀"を使ってたのしく覚えましょう。Figmaと麻雀、どちらもわからない初心者さんでも大丈夫◎ Figmaの基礎と合わせて麻雀のルールにも触れてみることのできる一石二鳥のセッションです!

FigJamではじめるミニマムハッカソン

河西 紀明

FigJamの基本的な機能やUXフレームワークを活用して、誰もが身近な社会課題や地域課題について考えるきっかけが得られるミニマムなハッカソンの開催方法やプロセスについて紹介します。題材として石川県で起こった能登半島地震の際に発足した支援プロジェクトを参考に、身の回りに潜む複雑な社会課題について周囲の意見を取り込みながらデザインワークを進行し、アクションプランを導く手法について学びましょう。

設計から実装まで Figmaを軸にした堅牢な制作フロー

綿貫 佳祐

Figmaを使って堅牢に制作をするためのプロセスを解説します。デザイントークンの効果的な設定、バリアントやプロパティを駆使したコンポーネント作成、ReactでのCode connect連携、そしてDev modeを用いたスムーズな実装まで、開発者とデザイナー間のコラボレーションを強化する実践的な方法を短時間で紹介します。高度な内容ですが、Figmaの機能を深く理解し、プロジェクトを着実に進行させたいすべてのデザイナー・開発者に有益です。

講演者プロフィール

Atarapi

2000年生まれ。コンピュータサイエンス専攻の現役の大学院生で普段はヒューマンコンピュータインタラクション分野の研究を行なっている。学外では、デジタルプロダクトデザイナーとして、数社のスタートアップで開発に取り組んでいる。その他にも、Design Homiesという若手向けのデザインコミュニティを運営している。

Miyamoto

制作会社、デジタルエージェンシーにて大手企業の広告や美術館のコーポレートサイトリニューアルを経験。その後2016年から現職。ヘルスケア事業のサービス体験設計からアートディレクション、デザイナーのマネージメントなどに従事。デザインを通じて包括的な課題解決を得意とする。2024年クリエイティブユニットIE3を発足。

ken

フリーランスデザイナー。

外資系広告代理店 W+K Tokyo を経て、2016年にスタートアップ「ecbo」を共同創業。CCOとして、サービス立ち上げ、UI/UXデザイン、ブランド設計、プロダクト改善に携わる。

現在はSaaSや教育系サービスを中心に、UI設計、デザインシステム構築、Figmaを活用したプロダクトデザインを支援。Figmaは約10年ほど実務で使い続けており、過去にはFigmaを学ぶワークショップ「Figma合宿」も主催。

また、旅をしながら仕事をする #旅するデザイナー として約5年間活動。約2年半にわたり南米各国をバンライフで旅しながらリモートで仕事をするなど、場所にとらわれない働き方も実践してきた。現在は広島で子育て中。

最近はFigmaやAIを活用した、これからのデザインワークフローについて実務目線で探っている。

X(旧「Twitter」) ↗

putchom

GMOペパボ株式会社でSUZURIのデザインリード及び共通基盤デザインシステムInhouseの設計を担当し、2022年のFigmaのグローバルカンファレンスConfigにて「One Design System for Multiple Brands」を発表。現在は株式会社スマートバンクにて家計簿プリカB/43のプロダクトデザイン及びデザインシステムの設計を行っています。著書『デザイントークンのつくりかた』販売中。

seya

株式会社Gaudiy

Figma 好きなフロントエンドエンジニア。デザインとエンジニアリングのコラボレーションの探求に心を燃やしている。猫が好き。

transitkix

カプコンやクックパッドを経て、2022年にあそびと余白をつくるデザインスタジオKRAFTS&Co.を設立。生活者向けデジタルサービスを中心に、コンセプトデザイン・しくみづくり・デザイン組織構築に伴走する。主な仕事は「くふうカンパニー」「カラリア」「いこーよ」ブランディングデザイン、「B/43」ジュニアカードのコミュニケーションデザイン、スパイスビネガードリンク「RINDA」商品企画など。Designship Doデザインマネジメントコース講師。人間中心設計専門家(2015-2020)。

けんじ

1976年生まれ。

学生時代は、高専機械科でロボットコンテスト(高専ロボコン)に出た経験あり。

卒業後は地元鳥取県のIT企業勤務から、Web業界に憧れて上京。Web制作会社を経て、ゲーム好きが高じて、2006年に某ゲーム会社にWebデザイナーとして入社。

現在はUXデザイナーとして、デザイン、プロトタイピング、フロントエンド等、幅広く活動しつつ、趣味で気になったツールや技術について発信している。

X(旧「Twitter」) ↗

もっと

ソフトウェアのUIデザインとエンジニアリングに取り組み、両方のスキルを活かした取り組みが得意としている。技術的な視点を入れた提案やプロトタイプの制作を多く行っている。『Japanese Font Mixer』『Simple Markdown Note』といったFigmaプラグイン・ウィジェットを開発。

X(旧「Twitter」) ↗

キャシ

福岡生まれ世界育ち。ロンドン拠点のフリーランスプロダクトデザイナー。Friends of Figma Londonリーダーとして、Figmaの魅力を発信する勉強会やセミナーで多数登壇。

現在は株式会社カケハシにてアプリUX/UI設計に従事しつつ、Notionテンプレート販売や日本人デザイナーのグローバル進出支援に注力。メンター業やCV&ポートフォリオレビューを通じて、デザイナーのキャリア発展をサポート。8つの時間帯をまたぐフルリモートワークの経験を活かし、PM・エンジニアとの協働でデザインを作り上げるスタイルが得意。趣味はイタリアでのワーケーション。

X(旧「Twitter」) ↗

タグチマリコ

1994年東京都生まれ。HCD-Net認定 人間中心設計専門家 UXデザイナー。

高校在学中にデザイナーとして活動をはじめ、複数の制作会社・開発会社にて、広告・Web・アプリケーション開発のプレイヤーからマネージャー・経営層まで幅広く経験。

フリーのUXデザイナーとなった現在は、人間中心設計(HCD)を起点としたサービスのグロース支援、ブランドデザイン、人材育成、クリエイター向けオンラインコミュニティの「クリエイターズ・シナジーカフェ」の運営に携わる。

表層デザインから哲学まで、多角的にデザイン行為の在野研究をつづけている。

X(旧「Twitter」) ↗

中川 小雪

神奈川県出身。中央大学で社会学を学び、2020年4月にneccoに入社。デザイナー / UIデザイナーとして、ウェブサイト・UIデザインを中心に担当している。2022年に「これからはじめるFigma Web UIデザイン入門」を共著で執筆。

井斉 花織

1995年生まれ、大阪府在中のプロダクトデザイナー。愛称はいおり。

Webサイト制作会社にてデザイナーとしてのキャリアをスタート。2023年よりSHE株式会社にてプロダクトデザインに従事。Adobe XDユーザーグループを中心とした活動を経て、現在はFigmaを使ったデザインシステム構築やプロジェクト推進に携わる。

Adobe MAX Japan 2023 UI/UXショートセッション登壇。

安藤 雅一

デザイン28年目ブランドデザイナー。事業成長と集客目線のビジネスデザイン、コンセプト設計、体験設計とデザイン全般。デザイン業界に長く関わり「モノとコトと場」の繋がりや関係をいい感じにしたい。ブランドマネージャー認定協会所属、Friends of Figma Chiba リーダー、デジタル推進委員。

巽 美帆(つまみ)

ファッション業界出身のフリーランスデザイナー兼ディレクター。 新卒入社をした600人規模のアパレル商社では2年目で個人賞を授与し、ご褒美でミラノへ。 当時自身が顧客・ファンでもあったブランドへ転職し、チーフデザイナー・取締役員を務めたのちに独立。 フリーランスとしてスタートアップ企業や新規事業に複数参画し、ボードメンバーや社外取締役を務めるなどを経て、今年2024年、都内に「制作事務所 兼 まぁじゃん店」をOPENします!

本田 雅人

早稲田大学文学部卒。2017年に株式会社CyberAgentにUIデザイナーとして新卒入社。

複数サービスの運用を経て、現在はAmebaのプロダクトデザインリードを担当。プロダクト戦略とブランド戦略の設計や、新規サービスの立ち上げに携わる。

2019年頃からAmebaデザインシステム「Spindle」をメンバーと立ち上げており、UIライブラリ設計のリードと作成を担った。「Spindle」で2023年にグッドデザイン賞を受賞。

Amebaの事業に携わる傍ら、CyberAgentの各種サービスのデザインシステム立ち上げや運用のアドバイザーとしても活動中であり、その他デザインシステムやFigma関連知見の外部発信も行っている。

河西 紀明

DMM.com VPoE室のデザイナーとしてエンタテインメント領域を中心に多様な事業サービスの創出や成長を推進。モブプロトタイピングやUXデザインなどの実践学習を通してTBDのデザインコラボレーションをサポート。東京・石川県の多拠点ワーカーとして、Friends of Figma Ishikawaのリーダーも務め、地域産業創出や社会課題に対しても活躍できるデザイナーを増やす場づくりを実践中。

鈴木 慎吾

UIデザイナー・インタラクションデザイナー

1980年生まれ 神奈川県藤沢市在住

2003年ごろからWeb制作会社でデザイナー、Flasher、iOSエンジニアを経験し、現在は映画レビューサービスFilmarksのデザイナー兼プロジェクトマネージャー。

デザインとエンジニアリングの中間領域、デザインとビジネスの中間領域に関わる制作や課題解決に取り組むことに関心があります。

相原 典佳

相原 典佳

DTP、Webアシスタントディレクター業務を経たのち、2010年にフリーランスとして独立。ディレクションからデザイン、構築まで、一貫したWebサイト制作を提供している。

現場での経験や知識をもとに、デジタルハリウッド、ロクナナワークショップ、Schooなどで講師・授業を担当するほか、「Web初心者を抜けた人たち」向けコミュニティ、Beans Collegeの運営を行っている。

共著書として『初心者からちゃんとしたプロになる HTML+CSS標準入門』(MdN刊)、『Figmaで作るUIデザインアイデア集 サンプルで学ぶ35のパターン』(インプレス刊)などがある。

X(旧「Twitter」) ↗

松下 絵梨

松下 絵梨

株式会社ロクナナ

大阪出身大阪在住のWeb/UIデザイナー。成安造形大学准教授。

講師業や、コミュニティの運営、セミナー登壇、企業研修にも力を入れている。

Adobe Community Expert|Friends of Figma OsakaLeader |LottieFiles Evangelist

著書『Adobe XDではじめるWebデザイン&プロトタイピング 一歩先行く現場のスキル』(翔泳社)

X(旧「Twitter」) ↗

もち

株式会社xenodata lab. ・NOT DESIGN SCHOOL

AI系BtoB SaaSのスタートアップ株式会社xenodata lab. CDO(Chief Design Officer)

専門学校でグラフィックデザインを学んだのち、複数のスタートアップでプロダクトのUIデザインを経験し、現在はUI・UXデザインを中心に社内の全クリエイティブを担当。本業以外ではStudioを使用したweb制作、オンラインスクール事業、Twitterの発信などの活動も積極的に行っている。2023年7月にFigmaの本を出版。

X(旧「Twitter」) ↗

本末 英樹(オロ)

本末 英樹(オロ)

デジタルプロダクトデザイナーとして、Webサイトやモバイルアプリを含むサービス全体のUX設計とUIデザインを行う。 Adobe MAXやデジタルハリウッド、Schooなどで講師も務める通称「オロちゃん先生」。
Web制作会社とフリーランスを経て、2017年7月C Channel株式会社入社。2021年5月より株式会社フライヤーにデジタルプロダクトデザイナーとしてジョイン。
大阪成蹊大学芸術学部卒、朗文堂・新宿私塾第27期修了、Xデザイン学校2021年マスターコース卒、人間中心設計スペシャリスト、グロービス経営大学院在学中。
近著に『http://www.amazon.co.jp/exec/obidos/ASIN/479806873X/cssnite-22/ref=nosim』。

X(旧「Twitter」) ↗

X(旧「Twitter」) ↗

綿貫 佳祐

綿貫 佳祐

Qiita株式会社

Qiita株式会社 / 株式会社エイチームライフデザイン

会社では、組織を束ね、プロダクト品質の向上や制作プロセスを改善する役割を担っています。 また、採用や育成にも関わり、組織全体を常にアップデートするよう努めています。

個人の制作範囲としては、 UI を中心にマークアップ、フロントエンド、グラフィック、リサーチなど。 特定の領域に閉じず、幅広いスキルを持つことで最善の解を提供できるように心がけています。

Friends of Figma Nagoyaのリーダーもしていて、Figmaの本も書きました。

X(旧「Twitter」) ↗

イベント情報・アーカイブ案内

関連イベント

同じトピックや登壇者の講座から。

2025年12月26日

#朝までイラレ 5

コネクリ、高田ゲンキ、アザラニアン、ヴイタロウ、ゆかまるデザイン、山口 翔平、ベーコン、スケダチ、あしざわ、セッジ、松下 絵梨、タマケン、サタケシュンスケ、GERA、尾野 史明(そらの)、倉又 美樹(まるみ)、しのこ、楠藤 治、桃乃、にわのとりこ、すぴかあやか、茄子川 導彦、渋谷 瞳、鷹野 雅弘

内容・アーカイブ案内を見る →

2023年6月23日

#朝までフォトショ

まるみデザインファーム、楠田 諭史、境 祐司、カズシフジイ、市井 義彦、ジョニー、大谷キミト、すぴかあやか、高橋としゆき、クロカワリュート、村上 良日、貝塚 菫、タマケン、パパ、おの.psd、松下 絵梨、黒田 明臣、すしぱく(ぱくたそ)、黒葛原 道、カトウヒカル、藤本 圭、池田 泰延、岡田 陽一、コネクリ

内容・アーカイブ案内を見る →
過去コンテンツをすべて見る →開催予定のイベントを見る →