いつも大学や英語の勉強についての記事を書いてますが、今回はデザイナーとして働いている私が知った技術的なことについてまとめていきたいと思います。 改めて軽く自己紹介昨年の11月よりファインディ株式会社でUI/UXデザイナーとして働いております。ファイディで働くのはとても楽しく、また周りの優秀な人達に囲まれて自分もメキメキと成長を感じています。(ここに関しては入社半年エントリー記事で詳しく書く予定) 普段はプロダクトの魅力を高めるために様々な取り組みを行っています。その中でもデザインシステムはデザイナーだけでなくエンジニアも巻き込んで運用に向けて日々奔走しています。 ファインディデザインシステムとは現在手掛けているのはWebエンジニアの中途転職を支援するFindyというプロダクトのデザインシステムなのですが、サービス開始から6年ほど経過し多くのデザイナー、エンジニアの手によって作られたためどう
If you are anything like me, you happily used Pixel (px) in Sketch and Figma during the past years without thinking much about it. It is the unit they gave me. Surely it is correct, and if not, the development team can fix that, no? Plus, there are a lot of people saying my design should be pixel perfect, right? Not quite (unless you interpreted “pixel perfect” as avoiding half-pixel). Let’s get s
Group, Frame, Sectionの挙動の違いを学ぼう この項では、紛らわしいGroup, Frame, Sectionの違いについて整理していきましょう。まずはGroupの挙動を確認します。Groupは先に述べたとおり、グルーピングした要素の一括処理を担っています。 Groupの機能と役割 先程、Groupには2つの機能があるとご紹介しました。その1つ目は子要素のプロパティ一括変更です。以下の動画では、Groupレイヤーを選択することで、子要素に対して一括してプロパティ変更を行っています。 Groupで子要素のプロパティを一括で変更している様子 2つ目の機能はGroupレイヤー自身へのプロパティ適用による子要素への間接的なデザイン適用です。GroupレイヤーのLayerプロパティを変更して透明度を変更したり、Effectsプロパティを変更することで子要素のレイヤーに一括でドロップ
Figma Community file - Hello 👋 Take a look at over 100+ mesh gradients. These types of mesh gradients can be used as background for websites, headers, posters, thumbnails, and many more. also, you can use mesh gradients to create a morphism effect. To explore more, I have included some websites and Figma plugins in a...
Adobeによる買収の意向表明が大きな話題となり、世界的に注目されているデザインツール「Figma」。そのようなビックニュースの裏でも、新たな機能がどんどん追加されています。 今回の記事では、コンポーネントにおけるカスタマイズ可能な箇所を管理しやすくし、コードとの整合性を高めてくれる「コンポーネントプロパティ(Component properties)」を紹介します。 コンポーネントプロパティは、コンポーネント(Components)やバリアント(Variants)と言った事前知識が必要な一歩進んだ機能になります。まずは、以下の記事の内容を理解してから本記事を読むことをオススメします。 デザインの管理と効率化が行えるFigmaのComponents入門 FigmaのVariants入門 - さらにコンポーネントを使いこなそう Figma公式の「コンポーネントプロパティ」のチュートリアル用デ
Spotify Design recently migrated to Figma. We're excited to open up the music box and describe how we've shaped the tool to suit our needs and culture at Spotify. But in this article, we're not discussing why or how we moved. Instead, this is where we're going to geek out over file structures. Check out our Figma Ways of Working above, and have a read of this article to understand some of the rati
Free Figma Component Library We've curated the best Figma components in one place. Discover, copy and paste UI components in Figma with the most efficient way to build designs. Get all the essentials for any design project in one place. From buttons to data visualizations, you'll find the perfect component here with a few clicks.
これは何 Qiitaのデザイナーをしています。綿貫といいます。 中の人としてもアドベントカレンダーを盛り上げるべくFigma Advent Calendarを作成し、初日の記事を書きました! 今回取り上げるのはOrganizationプラン限定であるBranching機能。 「すぐにプラン変更に踏み切れない、けど機能が気になる……」という方は結構いるのではないでしょうか? この記事では基本的な使い方と、具体的なユースケースへの検証結果をまとめます。 Branching機能とは? Gitを使った開発でのブランチとほぼ同じ概念です。 メインのファイルからブランチを切り、データを変更し、レビューとともにメインのファイルへマージする……というフローがFigmaでも実現可能に。 全体的なイメージを得るには文章を読むより公式のYouTube動画を見る方が早いと思われます笑 (5分弱の動画なのでパパッと
概要FigmaのSmartHR UI(ライブラリ)は組織全体で利用しているライブラリのため、意図しない更新から保護するために編集権限を制限し「ブランチ機能」を使って運用しています。 SmartHR UIにコンポーネントやスタイルを追加・変更したい場合は、本ページを参考にしてください。 コンポーネントの構造や命名などの考え方は、デザインデータ(Figma)の作り方を参考にしてください。 ブランチ運用上の注意SmartHR UIに変更を加える場合は、Figmaの「ブランチ機能」を利用してレビューを依頼する必要があります。 ブランチ作成時やレビュー依頼時は、以下の点に注意して作業してください。 守って欲しいルール「SmartHR UI」のライブラリを更新する場合は、「SmartHR UI 14px」も同じ内容でブランチを作成し更新してください。SmartHR UIはフォントサイズ基準が16pxと
Figmaのブランチ機能が使えるようになった時、ひとしきり喜んだあと私が次に思ったのは GitHub の Protected Branch が使いたい!編集は必ずブランチでやりたい!ということでした。 ずーっとまだかなーと思っていたのですが、実はプロジェクトの権限などを調整すれば、すでに似た運用が出来ることを教えてもらったので、勢いでまとめて共有します。 (Figmaのブランチはビジネス(旧Organization)、エンタープライズプラン向けの機能です) ともかくオーナーだけが編集できる状態にするまずはプロジェクトのShareです。このような感じでowner以外はview権限にします。 プロジェクトの共有設定続いて、そのプロジェクト内のファイルのShareです。ここでもまた、owner以外はcan viewとなるようにします。 ファイルの共有設定そして、右下の設定アイコンから Allow
スマートキャンプのハグリです。 弊社では、Biscuet(リリース後BALES CLOUDに名称変更)という新サービスの事前登録を6月5日(水)に開始しました! Biscuet(BALES CLOUD)とは? 営業活動を効率化する、インサイドセールスの最適化を実現するツールです。詳しくはLPをご覧ください。 本記事では、新規事業のLP作成時に考えていたことやプロセスを、Biscuet(BALES CLOUD)のデザインを担当している葉栗が紹介していきます。 LP作成の目的今回は新規事業のLPであるため、サービスの紹介と同時に市場のニーズを確かめる目的がありました。そのために、工数を最小限に早く作る必要がありました。 そこで、LP作成はコーディングをせず、STUDIOで作成することにしました。 STUDIOとは コードを書かずにマウス操作でWebサイトを作成できるサービス LPの作成プロセス
これは何 「初めてFigmaでプロトタイプを作るぞ」となったときに、これを知っておけばあらかたよさそう!というポイントをまとめました。 Figmaのプロトタイプでできること スクロール時にアイテムを固定する 手順 固定したいアイテムを選択し、右サイドバーDesignタブからFix position when scrollingにチェックを入れる Constraints and resizingで固定する時の基準位置を選ぶ 右下で固定したい時は、下の画像のようになります アイテムが固定されると、レイヤーがFIXED配下になります。 FIXEDのアイテムは、レイヤーの重なり順をスクロールするコンテンツより下にすることができません 親FrameにAuto layoutを指定している場合は、アイテムの固定ができません クリックで画面遷移する 手順 右サイドバーのタブでPrototypeを選択する
今回は、Figmaのプラグイン「Mockup」を使って、スマートフォンやPCなどのデバイスの画面に、スクリーンショットなどの画像を簡単にはめ込む方法を紹介します。 はめ込みたいデバイスの画面が斜めになっている場合でも対応できますので、LPや広告バナーなどで使うサービス紹介用の素材作りにおすすめです。ぜひマスターしましょう! この記事のターゲットFigmaの初心者 サービスサイトや広告でサービス紹介用のモックアップ素材を作りたい方 コンテンツマーケティング用素材を作りたいマーケティング担当者 1. 「Mockup」をインストールする この「Mockup」というプラグインは、スマートフォンやデスクトップPCなどの好きなデバイスに好きな画像をはめ込むことができる、控えめにいって神プラグインです。 Figmaのアカウントにログインして、こちらのページから「Install」をクリックすると、Figm
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く