https://theuxshop.com/assets/js/70f1709c.0906d91f.js

1"use strict";(self.webpackChunktheuxshop=self.webpackChunktheuxshop||[]).push([[648],{1742:(e,n,i)=>{i.r(n),i.d(n,{assets:()=>c,contentTitle:()=>o,default:()=>x,frontMatter:()=>d,metadata:()=>s,toc:()=>h});const s=JSON.parse('{"id":"linear/features","title":"Linear Features","description":"Detailed overview of Linear\'s measurement, grid, and annotation capabilities.","source":"@site/.tmp/docs-published/linear/features.mdx","sourceDirName":"linear","slug":"/linear/features","permalink":"/linear/features","draft":false,"unlisted":false,"tags":[],"version":"current","sidebarPosition":3,"frontMatter":{"id":"features","title":"Linear Features","description":"Detailed overview of Linear\'s measurement, grid, and annotation capabilities.","sidebar_position":3},"sidebar":"linearSidebar","previous":{"title":"Getting Started with Linear","permalink":"/linear/getting-started"},"next":{"title":"Linear Keyboard Shortcuts","permalink":"/linear/keyboard-shortcuts"}}');var r=i(4848),l=i(8453),t=i(9176),a=i(5388);const d={id:"features",title:"Linear Features",description:"Detailed overview of Linear's measurement, grid, and annotation capabilities.",sidebar_position:3},o="Linear Features",c={},h=[{value:"Measurement tools",id:"measurement-tools",level:2},{value:"Point-to-point measurement",id:"point-to-point-measurement",level:3},{value:"Element measurement",id:"element-measurement",level:3},{value:"Measurement persistence",id:"measurement-persistence",level:3},{value:"Measurement styling",id:"measurement-styling",level:3},{value:"Grid system",id:"grid-system",level:2},{value:"Grid overlay",id:"grid-overlay",level:3},{value:"Grid presets",id:"grid-presets",level:3},{value:"Baseline grid",id:"baseline-grid",level:3},{value:"Guides",id:"guides",level:2},{value:"Horizontal and vertical guides",id:"horizontal-and-vertical-guides",level:3},{value:"Guide features",id:"guide-features",level:3},{value:"Guide persistence",id:"guide-persistence",level:3},{value:"Comparison tools",id:"comparison-tools",level:2},{value:"Split comparison",id:"split-comparison",level:3},{value:"Overlay comparison",id:"overlay-comparison",level:3},{value:"Use cases",id:"use-cases",level:3},{value:"Annotation and export",id:"annotation-and-export",level:2},{value:"Annotations",id:"annotations",level:3},{value:"Screenshot export",id:"screenshot-export",level:3},{value:"Clipboard integration",id:"clipboard-integration",level:3},{value:"Report generation",id:"report-generation",level:3},{value:"Accessibility features",id:"accessibility-features",level:2},{value:"Keyboard navigation",id:"keyboard-navigation",level:3},{value:"Contrast checking",id:"contrast-checking",level:3},{value:"Touch target measurement",id:"touch-target-measurement",level:3},{value:"Integrations",id:"integrations",level:2},{value:"Design tools",id:"design-tools",level:3},{value:"Browser DevTools",id:"browser-devtools",level:3},{value:"Screenshot tools",id:"screenshot-tools",level:3},{value:"Performance",id:"performance",level:2},{value:"System requirements",id:"system-requirements",level:3},{value:"Performance tips",id:"performance-tips",level:3}];function u(e){const n={a:"a",em:"em",h1:"h1",h2:"h2",h3:"h3",header:"header",hr:"hr",li:"li",p:"p",strong:"strong",ul:"ul",...(0,l.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n.header,{children:(0,r.jsx)(n.h1,{id:"linear-features",children:"Linear Features"})}),"\n",(0,r.jsxs)(n.p,{children:["A comprehensive overview of everything Linear can do. For quick start basics, see ",(0,r.jsx)(n.a,{href:"/linear/getting-started",children:"Getting Started"}),"."]}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.em,{children:"Last updated: June 2023"})}),"\n",(0,r.jsx)(n.h2,{id:"measurement-tools",children:"Measurement tools"}),"\n",(0,r.jsx)(n.h3,{id:"point-to-point-measurement",children:"Point-to-point measurement"}),"\n",(0,r.jsx)(n.p,{children:"Click and drag to measure the distance between any two points on screen."}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.strong,{children:"Features:"})}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsx)(n.li,{children:"Real-time distance display while dragging"}),"\n",(0,r.jsx)(n.li,{children:"Horizontal (\u0394x), vertical (\u0394y), and diagonal distance"}),"\n",(0,r.jsx)(n.li,{children:"Angle display for diagonal measurements"}),"\n",(0,r.jsx)(n.li,{children:"Snap to element edges (toggle with Alt/Option)"}),"\n",(0,r.jsx)(n.li,{children:"Constrain to axis (hold Shift)"}),"\n"]}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.strong,{children:"Units:"})}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsx)(n.li,{children:"CSS pixels (default, recommended for web)"}),"\n",(0,r.jsx)(n.li,{children:"Device pixels (physical pixels, accounting for DPI)"}),"\n",(0,r.jsx)(n.li,{children:"Points (for iOS development)"}),"\n",(0,r.jsx)(n.li,{children:"Inches/centimeters (for print)"}),"\n"]}),"\n",(0,r.jsx)(n.h3,{id:"element-measurement",children:"Element measurement"}),"\n",(0,r.jsx)(n.p,{children:"Hover over elements to see their dimensions:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsx)(n.li,{children:"Width and height"}),"\n",(0,r.jsx)(n.li,{children:"Padding (inner spacing)"}),"\n",(0,r.jsx)(n.li,{children:"Margin (outer spacing)"}),"\n",(0,r.jsx)(n.li,{children:"Border dimensions"}),"\n"]}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.em,{children:"Note: Element measurement requires the browser extension or specific integrations."})}),"\n",(0,r.jsx)(n.h3,{id:"measurement-persistence",children:"Measurement persistence"}),"\n",(0,r.jsx)(n.p,{children:"Measurements stay on screen until cleared:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsx)(n.li,{children:"Place multiple measurements simultaneously"}),"\n",(0,r.jsx)(n.li,{children:"Compare related dimensions"}),"\n",(0,r.jsx)(n.li,{children:"Annotate for documentation"}),"\n",(0,r.jsx)(n.li,{children:"Export as screenshot"}),"\n"]}),"\n",(0,r.jsx)(n.h3,{id:"measurement-styling",children:"Measurement styling"}),"\n",(0,r.jsx)(n.p,{children:"Customize how measurements display:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsx)(n.li,{children:"Line color and thickness"}),"\n",(0,r.jsx)(n.li,{children:"Text size and color"}

1),"\n",(0,r.jsx)(n.li,{children:"Background for readability"}),"\n",(0,r.jsx)(n.li,{children:"Arrowhead style"}),"\n"]}),"\n",(0,r.jsx)(n.h2,{id:"grid-system",children:"Grid system"}),"\n",(0,r.jsx)(n.h3,{id:"grid-overlay",children:"Grid overlay"}),"\n",(0,r.jsx)(n.p,{children:"Display a pixel grid over any content:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsx)(n.li,{children:"Customizable grid size (1-100px)"}),"\n",(0,r.jsx)(n.li,{children:"Adjustable opacity (10-100%)"}),"\n",(0,r.jsx)(n.li,{children:"Multiple color options"}),"\n",(0,r.jsx)(n.li,{children:"Grid offset adjustment"}),"\n"]}),"\n",(0,r.jsx)(n.h3,{id:"grid-presets",children:"Grid presets"}),"\n",(0,r.jsx)(n.p,{children:"Save common configurations:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsx)(n.li,{children:"8px (standard web/mobile)"}),"\n",(0,r.jsx)(n.li,{children:"4px (iOS, Material)"}),"\n",(0,r.jsx)(n.li,{children:"12px (Bootstrap)"}),"\n",(0,r.jsx)(n.li,{children:"Custom presets"}),"\n"]}),"\n",(0,r.jsx)(n.h3,{id:"baseline-grid",children:"Baseline grid"}),"\n",(0,r.jsx)(n.p,{children:"For typography verification:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsx)(n.li,{children:"Separate baseline grid layer"}),"\n",(0,r.jsx)(n.li,{children:"Match to your line-height"}),"\n",(0,r.jsx)(n.li,{children:"Different color from spatial grid"}),"\n",(0,r.jsx)(n.li,{children:"Independent toggle"}),"\n"]}),"\n",(0,r.jsx)(t.A,{variant:"note",title:"Grid performance",children:(0,r.jsx)(n.p,{children:"Grids are rendered as overlays and don't affect page performance. However, very small grid sizes (1-2px) on large screens may impact Linear's performance."})}),"\n",(0,r.jsx)(n.h2,{id:"guides",children:"Guides"}),"\n",(0,r.jsx)(n.h3,{id:"horizontal-and-vertical-guides",children:"Horizontal and vertical guides"}),"\n",(0,r.jsx)(n.p,{children:"Place unlimited guides:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsx)(n.li,{children:"Drag from rulers or use keyboard shortcuts"}),"\n",(0,r.jsx)(n.li,{children:"Precise positioning with coordinate input"}),"\n",(0,r.jsx)(n.li,{children:"Snap measurements to guides"}),"\n",(0,r.jsx)(n.li,{children:"Color-coded organization"}),"\n"]}),"\n",(0,r.jsx)(n.h3,{id:"guide-features",children:"Guide features"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:"Lock guides"}),": Prevent accidental movement"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:"Guide labels"}),": Add custom names"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:"Smart guides"}),": Automatically appear at element edges"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:"Guide groups"}),": Organize related guides together"]}),"\n"]}),"\n",(0,r.jsx)(n.h3,{id:"guide-persistence",children:"Guide persistence"}),"\n",(0,r.jsx)(n.p,{children:"Guides save with your workspace:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsx)(n.li,{children:"Persist across sessions"}),"\n",(0,r.jsx)(n.li,{children:"Export guide configurations"}),"\n",(0,r.jsx)(n.li,{children:"Share with team members"}),"\n"]}),"\n",(0,r.jsx)(n.h2,{id:"comparison-tools",children:"Comparison tools"}),"\n",(0,r.jsx)(n.h3,{id:"split-comparison",children:"Split comparison"}),"\n",(0,r.jsx)(n.p,{children:"Compare two screens side by side:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsx)(n.li,{children:"Synchronized scrolling"}),"\n",(0,r.jsx)(n.li,{children:"Synchronized zooming"}),"\n",(0,r.jsx)(n.li,{children:"Difference highlighting"}),"\n",(0,r.jsx)(n.li,{children:"Measurement across both views"}),"\n"]}),"\n",(0,r.jsx)(n.h3,{id:"overlay-comparison",children:"Overlay comparison"}),"\n",(0,r.jsx)(n.p,{children:"Overlay one image on another:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsx)(n.li,{children:"Adjustable opacity"}),"\n",(0,r.jsx)(n.li,{children:"Difference visualization"}),"\n",(0,r.jsx)(n.li,{children:"Pixel-level comparison"}),"\n",(0,r.jsx)(n.li,{children:"Before/after analysis"}),"\n"]}),"\n",(0,r.jsx)(n.h3,{id:"use-cases",children:"Use cases"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsx)(n.li,{children:"Compare design to implementation"}),"\n",(0,r.jsx)(n.li,{children:"Check design consistency across screens"}),"\n",(0,r.jsx)(n.li,{children:"Review revision changes"}),"\n",(0,r.jsx)(n.li,{children:"Verify responsive adaptations"}),"\n"]}),"\n",(0,r.jsx)(n.h2,{id:"annotation-and-export",children:"Annotation and export"}),"\n",(0,r.jsx)(n.h3,{id:"annotations",children:"Annotations"}),"\n",(0,r.jsx)(n.p,{children:"Add notes to your measurements:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsx)(n.li,{children:"Text labels"}),"\n",(0,r.jsx)(n.li,{children:"Numbered callouts"}),"\n",(0,r.jsx)(n.li,{children:"Arrows and pointers"}),"\n",(0,r.jsx)(n.li,{children:"Custom formatting"}),"\n"]}

1),"\n",(0,r.jsx)(n.h3,{id:"screenshot-export",children:"Screenshot export"}),"\n",(0,r.jsx)(n.p,{children:"Capture annotated screenshots:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsx)(n.li,{children:"Include all visible measurements"}),"\n",(0,r.jsx)(n.li,{children:"Include or exclude grid"}),"\n",(0,r.jsx)(n.li,{children:"PNG or JPEG format"}),"\n",(0,r.jsx)(n.li,{children:"1x or 2x resolution"}),"\n"]}),"\n",(0,r.jsx)(n.h3,{id:"clipboard-integration",children:"Clipboard integration"}),"\n",(0,r.jsx)(n.p,{children:"Copy measurements for use elsewhere:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsx)(n.li,{children:"Copy single values"}),"\n",(0,r.jsx)(n.li,{children:"Copy as formatted text"}),"\n",(0,r.jsx)(n.li,{children:"Copy as design tokens (custom format)"}),"\n",(0,r.jsx)(n.li,{children:"Copy multiple measurements as table"}),"\n"]}),"\n",(0,r.jsx)(n.h3,{id:"report-generation",children:"Report generation"}),"\n",(0,r.jsx)(n.p,{children:"Create measurement reports:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsx)(n.li,{children:"All measurements in a session"}),"\n",(0,r.jsx)(n.li,{children:"Organized by category"}),"\n",(0,r.jsx)(n.li,{children:"Exportable as CSV or PDF"}),"\n",(0,r.jsx)(n.li,{children:"Shareable link (team features)"}),"\n"]}),"\n",(0,r.jsx)(n.h2,{id:"accessibility-features",children:"Accessibility features"}),"\n",(0,r.jsx)(n.h3,{id:"keyboard-navigation",children:"Keyboard navigation"}),"\n",(0,r.jsx)(n.p,{children:"Full keyboard control:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsx)(n.li,{children:"All features accessible via keyboard"}),"\n",(0,r.jsx)(n.li,{children:"Customizable shortcuts"}),"\n",(0,r.jsx)(n.li,{children:"Focus indicators"}),"\n",(0,r.jsx)(n.li,{children:"Screen reader compatible"}),"\n"]}),"\n",(0,r.jsx)(n.h3,{id:"contrast-checking",children:"Contrast checking"}),"\n",(0,r.jsx)(n.p,{children:"Built-in contrast verification:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsx)(n.li,{children:"WCAG contrast ratio calculation"}),"\n",(0,r.jsx)(n.li,{children:"Pass/fail indication"}),"\n",(0,r.jsx)(n.li,{children:"AA and AAA levels"}),"\n",(0,r.jsx)(n.li,{children:"Color suggestions for failing pairs"}),"\n"]}),"\n",(0,r.jsx)(n.h3,{id:"touch-target-measurement",children:"Touch target measurement"}),"\n",(0,r.jsx)(n.p,{children:"Verify touch target sizes:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsx)(n.li,{children:"Highlight elements below 44px"}),"\n",(0,r.jsx)(n.li,{children:"Show minimum required size"}),"\n",(0,r.jsx)(n.li,{children:"Overlay touch target guides"}),"\n"]}),"\n",(0,r.jsx)(n.h2,{id:"integrations",children:"Integrations"}),"\n",(0,r.jsx)(n.h3,{id:"design-tools",children:"Design tools"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:"Figma"}),": Measure directly on Figma files in browser"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:"Sketch"}),": Plugin available for direct integration"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:"Adobe XD"}),": Plugin available"]}),"\n"]}),"\n",(0,r.jsx)(n.h3,{id:"browser-devtools",children:"Browser DevTools"}),"\n",(0,r.jsx)(n.p,{children:"Complement browser DevTools:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsx)(n.li,{children:"Measure computed values"}),"\n",(0,r.jsx)(n.li,{children:"Verify against inspected elements"}),"\n",(0,r.jsx)(n.li,{children:"Side-by-side with DevTools"}),"\n"]}),"\n",(0,r.jsx)(n.h3,{id:"screenshot-tools",children:"Screenshot tools"}),"\n",(0,r.jsx)(n.p,{children:"Works alongside:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsx)(n.li,{children:"Built-in OS screenshot"}),"\n",(0,r.jsx)(n.li,{children:"Third-party capture tools"}),"\n",(0,r.jsx)(n.li,{children:"Screen recording software"}),"\n"]}),"\n",(0,r.jsx)(n.h2,{id:"performance",children:"Performance"}),"\n",(0,r.jsx)(n.h3,{id:"system-requirements",children:"System requirements"}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.strong,{children:"macOS:"})}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsx)(n.li,{children:"macOS 10.15 (Catalina) or later"}),"\n",(0,r.jsx)(n.li,{children:"Apple Silicon or Intel"}),"\n",(0,r.jsx)(n.li,{children:"Screen recording permission"}),"\n"]}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.strong,{children:"Windows:"})}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsx)(n.li,{children:"Windows 10 or later"}),"\n",(0,r.jsx)(n.li,{children:"DirectX 11 compatible"}),"\n",(0,r.jsx)(n.li,{children:"Administrator not required"}),"\n"]}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.strong,{children:"Browser extension:"})}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsx)(n.li,{children:"Chrome 88+ or Firefox 78+"}),"\n",(0,r.jsx)(n.li,{children:"Works on any website"}),"\n"]}),"\n",(0,r.jsx)(n.h3,{id:"performance-tips",children:"Performance tips"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsx)(n.li,{children:"Use larger grid sizes when possible"}),"\n",(0,r.jsx)(n.li,{children:"Clear measurements you no longer need"}),"\n",(0,r.jsx)(n.li,{children:"Close comparison views when not in use"}),"\n",(0,r.jsx)(n.li,{children:"Update to latest version for improvements"}),"\n"]}),"\n",(0,r.jsx)(n.hr,{}),"\n",(0,r.jsx)(a.A,{title:"Related documentation",links:[{label:"Getting Started",to:"/linear/getting-started"},{label:"Keyboard Shortcuts",to:"/linear/keyboard-shortcuts"},{label:"FAQ",to:"/linear/faq"},{label:"Download",to:"/linear/download"}]})]})}function x(e={}){const{wrapper:n}={...(0,l.R)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(u,{...e})}):u(e)}},9176:(e,n,i)=>{i.d(n,{A:()=>l});

1i(6540);var s=i(4164),r=i(4848);function l({variant:e="default",title:n,children:i}){return(0,r.jsxs)("div",{className:(0,s.A)("ux-callout","default"!==e&&`ux-callout--${e}`),children:[(0,r.jsx)("div",{className:"ux-callout__title",children:n||{default:"Note",tip:"Tip",warning:"Warning",note:"Field Note"}[e]}),(0,r.jsx)("div",{className:"ux-callout__content",children:i})]})}},5388:(e,n,i)=>{i.d(n,{A:()=>l});i(6540);var s=i(6289),r=i(4848);function l({title:e="Related Resources",links:n}){return(0,r.jsxs)("div",{className:"ux-related",children:[(0,r.jsx)("div",{className:"ux-related__title",children:e}),(0,r.jsx)("ul",{className:"ux-related__list",children:n.map((e,n)=>(0,r.jsx)("li",{children:(0,r.jsx)(s.A,{to:e.to,className:"ux-related__link",children:e.label})},n))})]})}},8453:(e,n,i)=>{i.d(n,{R:()=>t,x:()=>a});var s=i(6540);const r={},l=s.createContext(r);function t(e){const n=s.useContext(l);return s.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:t(e.components),s.createElement(l.Provider,{value:n},e.children)}}}]);