https://theuxshop.com/assets/js/f9261f5c.65308d43.js

1"use strict";(self.webpackChunktheuxshop=self.webpackChunktheuxshop||[]).push([[5733],{6183:(e,n,i)=>{i.r(n),i.d(n,{assets:()=>p,contentTitle:()=>m,default:()=>f,frontMatter:()=>u,metadata:()=>s,toc:()=>g});const s=JSON.parse('{"id":"linear/index","title":"Linear","description":"A precision measurement tool for checking spacing, alignment, and layout consistency in digital design.","source":"@site/.tmp/docs-published/linear/index.mdx","sourceDirName":"linear","slug":"/linear","permalink":"/linear","draft":false,"unlisted":false,"tags":[],"version":"current","sidebarPosition":1,"frontMatter":{"id":"index","title":"Linear","description":"A precision measurement tool for checking spacing, alignment, and layout consistency in digital design.","slug":"/linear","sidebar_position":1},"sidebar":"linearSidebar","next":{"title":"Getting Started with Linear","permalink":"/linear/getting-started"}}');var t=i(4848),r=i(8453),a=i(7474),l=i(5170),o=i(9176),d=i(5920);i(6540);function c({screenshots:e}){return(0,t.jsx)("div",{className:"ux-screenshot-grid",children:e.map((e,n)=>(0,t.jsxs)("div",{className:"ux-screenshot",children:[(0,t.jsx)("img",{src:e.src,alt:e.alt,width:1200,height:750,loading:"lazy"}),e.caption&&(0,t.jsx)("div",{className:"ux-screenshot__caption",children:e.caption})]},n))})}var h=i(5388);const u={id:"index",title:"Linear",description:"A precision measurement tool for checking spacing, alignment, and layout consistency in digital design.",slug:"/linear",sidebar_position:1},m="Linear",p={},g=[{value:"What Linear does",id:"what-linear-does",level:2},{value:"Common use cases",id:"common-use-cases",level:2},{value:"Design QA",id:"design-qa",level:3},{value:"Self-review",id:"self-review",level:3},{value:"Design review",id:"design-review",level:3},{value:"Development handoff",id:"development-handoff",level:3},{value:"Key features",id:"key-features",level:2},{value:"Measurement tool",id:"measurement-tool",level:3},{value:"Grid overlay",id:"grid-overlay",level:3},{value:"Guides",id:"guides",level:3},{value:"Annotations",id:"annotations",level:3},{value:"Getting started",id:"getting-started",level:2}];function x(e){const n={a:"a",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",p:"p",strong:"strong",ul:"ul",...(0,r.R)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.header,{children:(0,t.jsx)(n.h1,{id:"linear",children:"Linear"})}),"\n",(0,t.jsxs)(n.p,{children:["Linear is a precision measurement tool for designers and developers who need to verify spacing, alignment, and layout consistency. Whether you're conducting design QA, reviewing implementations, or checking your own work, Linear helps you measure with confidence. Pair it with solid ",(0,t.jsx)(n.a,{href:"https://techitez.org/programming/front-end-performance-techniques-that-work/",children:"front end performance techniques"})," for a complete implementation workflow."]}),"\n",(0,t.jsx)(n.h2,{id:"what-linear-does",children:"What Linear does"}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Precise measurements"}),": Measure pixel distances between any two points on screen. Verify that padding, margins, and spacing match your specifications."]}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Grid overlay"}),": Display customizable grid overlays to check alignment. Verify elements align to your baseline grid or spacing system."]}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Ruler guides"}),": Place horizontal and vertical guides anywhere on screen. Check alignment across distant elements."]}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Comparison mode"}),": Compare two screens or states side by side. Identify differences in spacing and alignment between designs and implementations."]}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Screenshot capture"}),": Capture annotated screenshots with measurements visible. Document findings for developers or design reviews."]}),"\n",(0,t.jsx)(o.A,{variant:"note",title:"Cross-platform",children:(0,t.jsx)(n.p,{children:"Linear works on macOS, Windows, and as a browser extension. Measurements work on any screen content - websites, applications, designs, or prototypes."})}),"\n",(0,t.jsx)(n.h2,{id:"common-use-cases",children:"Common use cases"}),"\n",(0,t.jsx)(n.h3,{id:"design-qa",children:"Design QA"}),"\n",(0,t.jsx)(n.p,{children:"Verify that implementations match design specifications:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"Check padding and margins against design tokens"}),"\n",(0,t.jsx)(n.li,{children:"Verify element sizes"}

1),"\n",(0,t.jsx)(n.li,{children:"Confirm alignment to grid"}),"\n",(0,t.jsx)(n.li,{children:"Document discrepancies with screenshots"}),"\n"]}),"\n",(0,t.jsx)(n.h3,{id:"self-review",children:"Self-review"}),"\n",(0,t.jsx)(n.p,{children:"Check your own work before handoff:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"Verify consistency in spacing"}),"\n",(0,t.jsx)(n.li,{children:"Check alignment across components"}),"\n",(0,t.jsx)(n.li,{children:"Ensure adherence to design system specifications"}),"\n"]}),"\n",(0,t.jsx)(n.h3,{id:"design-review",children:"Design review"}),"\n",(0,t.jsx)(n.p,{children:"Evaluate designs against systems and standards:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"Measure against established spacing scales"}),"\n",(0,t.jsx)(n.li,{children:"Check for consistency across screens"}),"\n",(0,t.jsx)(n.li,{children:"Verify accessibility touch targets (44px minimum)"}),"\n"]}),"\n",(0,t.jsx)(n.h3,{id:"development-handoff",children:"Development handoff"}),"\n",(0,t.jsx)(n.p,{children:"Communicate specifications clearly:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"Annotate designs with precise measurements"}),"\n",(0,t.jsx)(n.li,{children:"Document spacing tokens in use"}),"\n",(0,t.jsx)(n.li,{children:"Highlight alignment relationships"}),"\n"]}),"\n",(0,t.jsx)(c,{screenshots:[{src:"/img/linear/screens/ruler.jpg",alt:"Linear measuring padding between elements",caption:"Measuring padding between interface elements"},{src:"/img/linear/screens/grid.jpg",alt:"Grid overlay showing alignment",caption:"Grid overlay for alignment verification"},{src:"/img/linear/screens/qa_reviews.jpg",alt:"Comparison mode showing differences",caption:"Comparison mode for QA reviews"}]}),"\n",(0,t.jsx)(n.h2,{id:"key-features",children:"Key features"}),"\n",(0,t.jsx)(n.h3,{id:"measurement-tool",children:"Measurement tool"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"Click and drag to measure any distance"}),"\n",(0,t.jsx)(n.li,{children:"Displays value in pixels (configurable units)"}),"\n",(0,t.jsx)(n.li,{children:"Snapping to edges for precision"}),"\n",(0,t.jsx)(n.li,{children:"Multiple measurements visible simultaneously"}),"\n"]}),"\n",(0,t.jsx)(n.h3,{id:"grid-overlay",children:"Grid overlay"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"Customizable grid size (8px, 12px, 16px, etc.)"}),"\n",(0,t.jsx)(n.li,{children:"Adjustable opacity"}),"\n",(0,t.jsx)(n.li,{children:"Toggle visibility with keyboard shortcut"}),"\n",(0,t.jsx)(n.li,{children:"Baseline grid option for typography"}),"\n"]}),"\n",(0,t.jsx)(n.h3,{id:"guides",children:"Guides"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"Place unlimited horizontal and vertical guides"}),"\n",(0,t.jsx)(n.li,{children:"Snap elements to guides"}),"\n",(0,t.jsx)(n.li,{children:"Color-coded guides for organization"}),"\n",(0,t.jsx)(n.li,{children:"Clear all or selective removal"}),"\n"]}),"\n",(0,t.jsx)(n.h3,{id:"annotations",children:"Annotations"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"Add text annotations to measurements"}),"\n",(0,t.jsx)(n.li,{children:"Export annotated screenshots"}),"\n",(0,t.jsx)(n.li,{children:"Copy measurements to clipboard"}),"\n",(0,t.jsx)(n.li,{children:"Integration with common design tools"}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:"getting-started",children:"Getting started"}),"\n",(0,t.jsxs)(n.p,{children:["Ready to start using Linear? See the ",(0,t.jsx)(n.a,{href:"/linear/getting-started",children:"Getting Started guide"})," for installation and first steps."]}),"\n",(0,t.jsxs)(l.A,{children:[(0,t.jsx)(a.A,{title:"Getting Started",description:"Install Linear and learn the basics in 5 minutes.",to:"/linear/getting-started"}),(0,t.jsx)(a.A,{title:"Features",description:"Detailed overview of all Linear capabilities.",to:"/linear/features"}),(0,t.jsx)(a.A,{title:"Keyboard Shortcuts",description:"Speed up your workflow with keyboard commands.",to:"/linear/keyboard-shortcuts"}),(0,t.jsx)(a.A,{title:"FAQ",description:"Common questions and troubleshooting.",to:"/linear/faq"})]}),"\n",(0,t.jsx)(d.A,{items:[{question:"What platforms does Linear support?",answer:"Linear is available as a desktop application for macOS and Windows, and as a browser extension for Chrome and Firefox. The desktop app can measure any screen content; the browser extension works within web pages."},{question:"Is Linear free?",answer:"Linear has a free tier with core measurement functionality. Advanced features like grid overlays, annotation export, and team features are available in paid plans."},{question:"Can Linear measure on retina/high-DPI displays?",answer:"Yes. Linear c

1orrectly handles pixel density differences and can display measurements in CSS pixels, physical pixels, or points depending on your preference."},{question:"Does Linear work with design tools like Figma?",answer:"Linear can measure anything on your screen, including Figma, Sketch, or any other design tool. For Figma specifically, the browser extension provides additional integration."},{question:"How do I report bugs or request features?",answer:"Email us at [email protected] with the subject 'Linear feedback.' Include steps to reproduce any issues. We actively incorporate user feedback into development."}]}),"\n",(0,t.jsx)(h.A,{title:"Related resources",links:[{label:"CSS Sizing & Spacing Guide",to:"/guides/css-sizing-spacing"},{label:"Heuristic Review Tool",to:"/tools/heuristic-review"},{label:"Accessibility Checklist",to:"/guides/accessibility-checklist"}]})]})}function f(e={}){const{wrapper:n}={...(0,r.R)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(x,{...e})}):x(e)}},9176:(e,n,i)=>{i.d(n,{A:()=>r});i(6540);var s=i(4164),t=i(4848);function r({variant:e="default",title:n,children:i}){return(0,t.jsxs)("div",{className:(0,s.A)("ux-callout","default"!==e&&`ux-callout--${e}`),children:[(0,t.jsx)("div",{className:"ux-callout__title",children:n||{default:"Note",tip:"Tip",warning:"Warning",note:"Field Note"}[e]}),(0,t.jsx)("div",{className:"ux-callout__content",children:i})]})}},7474:(e,n,i)=>{i.d(n,{A:()=>r});i(6540);var s=i(6289),t=i(4848);function r({title:e,description:n,to:i,linkText:r="Learn more \u2192"}){return(0,t.jsxs)("div",{className:"ux-card",children:[(0,t.jsx)("h3",{className:"ux-card__title",children:e}),(0,t.jsx)("p",{className:"ux-card__description",children:n}),(0,t.jsx)(s.A,{to:i,className:"ux-card__link",children:r})]})}},5170:(e,n,i)=>{i.d(n,{A:()=>t});i(6540);var s=i(4848);function t({children:e}){return(0,s.jsx)("div",{className:"ux-card-grid",children:e})}},5920:(e,n,i)=>{i.d(n,{A:()=>t});i(6540);var s=i(4848);function t({items:e}){return(0,s.jsx)("div",{className:"ux-faq",children:e.map((e,n)=>(0,s.jsxs)("div",{className:"ux-faq__item",children:[(0,s.jsx)("div",{className:"ux-faq__question",children:e.question}),(0,s.jsx)("div",{className:"ux-faq__answer",children:(0,s.jsx)("p",{children:e.answer})})]},n))})}},5388:(e,n,i)=>{i.d(n,{A:()=>r});i(6540);var s=i(6289),t=i(4848);function r({title:e="Related Resources",links:n}){return(0,t.jsxs)("div",{className:"ux-related",children:[(0,t.jsx)("div",{className:"ux-related__title",children:e}),(0,t.jsx)("ul",{className:"ux-related__list",children:n.map((e,n)=>(0,t.jsx)("li",{children:(0,t.jsx)(s.A,{to:e.to,className:"ux-related__link",children:e.label})},n))})]})}},8453:(e,n,i)=>{i.d(n,{R:()=>a,x:()=>l});var s=i(6540);const t={},r=s.createContext(t);function a(e){const n=s.useContext(r);return s.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function l(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:a(e.components),s.createElement(r.Provider,{value:n},e.children)}}}]);