--- title: Designers already think in React | daily.dev description: A senior designer recounts learning React by working through the official 'Thinking in React' docs, discovering that three of its five steps (component... canonical: https://daily.dev/posts/designers-already-think-in-react-rbce4lfse twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Designers already think in React | daily.dev og:description: A senior designer recounts learning React by working through the official 'Thinking in React' docs, discovering that three of its five steps (component... og:url: https://daily.dev/posts/designers-already-think-in-react-rbce4lfse og:image: https://api.daily.dev/og/posts/rBce4lfSE.png og:image:alt: Designers already think in React og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Designers already think in React **[thoughbot](https://daily.dev/sources/thoughbot)** · 6 min read · 5 upvotes · 1 comments ## Summary A senior designer recounts learning React by working through the official 'Thinking in React' docs, discovering that three of its five steps (component hierarchy, static-first builds, and props) map directly onto everyday design practice like layers panels and component variants. The unfamiliar parts were about time: deciding which UI states are real versus derived, and lifting shared state up to a common owner. The essay argues these concepts explain recurring design-dev friction, like disputes over padding values, and encourages designers to work through the react.dev tutorial alongside their own design files. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### How do React props relate to component variants in Figma? React component props work the same way as variant properties on a Figma component: setting size, state, or an icon toggle to configure one component instance is conceptually identical to passing props like size, state, or hasIcon to a React component. The difference is cost—adding a new prop in code multiplies complexity across every place the component is used, unlike adding one more frame in a design file. _Designers moving into frontend work often track these prop-versus-variant parallels through explainers surfaced on daily.dev._ ### What does 'lifting state up' mean in React and how does it relate to a filter panel and results list? Lifting state up means moving a piece of data to the nearest shared parent component when two sibling components both need access to it. For a filter panel and results list that appear as unrelated siblings on a design canvas, the selected filter value has to be held by whatever component contains both of them, then passed down to each so they stay in sync. _Developers wiring up shared UI state can find worked explanations of lifting state up on daily.dev._ ### Why does styling carry over differently between React and React Native? CSS knowledge carries over cleanly to React but stops working once you move to React Native, because React Native has no CSS cascade and styles are instead defined as plain JavaScript objects attached directly to each component. This means inherited styling behavior familiar from web CSS does not apply in a React Native codebase. _Anyone weighing React versus React Native for a mobile build can compare styling tradeoffs via daily.dev._ ## Community discussion Top comments from developers on daily.dev. **@croffasia** · 5 upvotes > I think what's really being described here is component thinking, and component thinking isn't React :) Let's not conflate the two. ## Similar posts on daily.dev - [React Basics: Thinking in React](https://daily.dev/posts/react-basics-thinking-in-react-bxfmesfzy) · Telerik · 4 upvotes · 0 comments - [The React Component Pyramid Scheme: An Over-Engineering Crisis](https://daily.dev/posts/the-react-component-pyramid-scheme-an-over-engineering-crisis-zhsxznqk3) · The New Stack · 74 upvotes · 4 comments --- Tags: [#react](https://daily.dev/tags/react), [#ui-design](https://daily.dev/tags/ui-design), [#react-native](https://daily.dev/tags/react-native), [#design-systems](https://daily.dev/tags/design-systems) [View this post on daily.dev](https://daily.dev/posts/designers-already-think-in-react-rbce4lfse) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Designers already think in React","url":"https://daily.dev/posts/designers-already-think-in-react-rbce4lfse","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/designers-already-think-in-react-rbce4lfse"},"datePublished":"2026-09-02T00:02:55.941Z","dateModified":"2026-09-14T06:33:31.914Z","description":"A senior designer recounts learning React by working through the official 'Thinking in React' docs, discovering that three of its five steps (component...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/57890723b2d025f33d7eee02f5a0f6e0?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/57890723b2d025f33d7eee02f5a0f6e0?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"thoughbot","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"thoughbot","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/9fe12feb57f944a29ff63a79e350081a","url":"https://daily.dev/sources/thoughbot"},"commentCount":1,"discussionUrl":"https://daily.dev/posts/designers-already-think-in-react-rbce4lfse","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":5},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":1}],"keywords":"react,ui-design,react-native,design-systems","timeRequired":"PT6M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"thoughbot","item":"https://daily.dev/sources/thoughbot"},{"@type":"ListItem","position":3,"name":"Designers already think in React"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/designers-already-think-in-react-rbce4lfse","comment":[{"@type":"Comment","text":"I think what’s really being described here is component thinking, and component thinking isn’t React :) Let’s not conflate the two.","datePublished":"2026-09-02T19:15:59.828Z","url":"https://daily.dev/posts/rBce4lfSE#c-3rqXFdFhO","author":{"@type":"Person","name":"Andrii Poluosmak","url":"https://daily.dev/croffasia","image":"https://media.daily.dev/image/upload/s--2wm7zhou--/f_auto/v1787495805/avatars/avatar_wOj6Ya5qjC3PfZvhDV7hP?_a=BAMAMicg0"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":5}}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/designers-already-think-in-react-rbce4lfse#faq","mainEntity":[{"@type":"Question","name":"How do React props relate to component variants in Figma?","acceptedAnswer":{"@type":"Answer","text":"React component props work the same way as variant properties on a Figma component: setting size, state, or an icon toggle to configure one component instance is conceptually identical to passing props like size, state, or hasIcon to a React component. The difference is cost—adding a new prop in code multiplies complexity across every place the component is used, unlike adding one more frame in a design file. Designers moving into frontend work often track these prop-versus-variant parallels through explainers surfaced on daily.dev."}},{"@type":"Question","name":"What does 'lifting state up' mean in React and how does it relate to a filter panel and results list?","acceptedAnswer":{"@type":"Answer","text":"Lifting state up means moving a piece of data to the nearest shared parent component when two sibling components both need access to it. For a filter panel and results list that appear as unrelated siblings on a design canvas, the selected filter value has to be held by whatever component contains both of them, then passed down to each so they stay in sync. Developers wiring up shared UI state can find worked explanations of lifting state up on daily.dev."}},{"@type":"Question","name":"Why does styling carry over differently between React and React Native?","acceptedAnswer":{"@type":"Answer","text":"CSS knowledge carries over cleanly to React but stops working once you move to React Native, because React Native has no CSS cascade and styles are instead defined as plain JavaScript objects attached directly to each component. This means inherited styling behavior familiar from web CSS does not apply in a React Native codebase. Anyone weighing React versus React Native for a mobile build can compare styling tradeoffs via daily.dev."}}]} ```