FigmaとWeb、
px単位でピッタリと
Figmaとサイトを重ねて比べる。
ExportせずOverlintですぐに比較。
制限無くもっと便利にOverlintを使うなら
What is Overlint?
1. ブラウザに表示
あなたのWebサイトを読み込み
2. Figmaを重ねる
デザインを透明レイヤーで重ね合わせ
3. ズレが見える
1px のズレも一目で判断可能
How to Use
01
URL を貼る
Figma のデザイン URL と
あなたのサイト URL を入力
02
比較する
デザインが実装の上に
透明レイヤーで重なる
03
修正する
ズレた箇所を特定して
コードを即座に修正
開発者の悩み
Before
• margin が合ってない気がする
• padding の感覚が違う
• font-size がズレてる
• 目視での確認に時間がかかる
• デザイナーとの認識のズレ
After
• 1px 単位で正確に比較
• 瞬時にズレを発見
• 修正箇所が明確
• レビュー時間が圧倒的に短縮
• ストレスフリーな実装