I don’t design in WordPress anymore (here's why)

I don’t design in WordPress anymore (here's why) 🔗 **Source:** [I don’t design in WordPress anymore (here's why)](https://www.youtube.com/watch?v=YEiJTbiu3jM) > [!note]+ Document Notes > tags: [web-design, figma, wordpress, design-workflow] > author: WP Eagle > source: YouTube > reference: https://www.youtube.com/watch?v=YEiJTbiu3jM > date created: 2024-12-19 10:30 > > # 🏷️ Title: I don't design in WordPress anymore (here's why) >  ## 🧰 Action Inbox - [H1] Evaluate current design workflow for efficiency — compare iterations and bloat #design - [H2] Set up Figma workspace for client collaboration — present options before development #tools - [H3] Create design system with reusable components — establish consistent patterns #workflow ## 🧭 Table of Contents - [📝 Summary](#-summary) - [📖 Main Content](#-main-content) - [🗒️ Notes](#️-notes) - [📚 References](#-references) - [🗣️ Paraphrase](#️-paraphrase) - [📰 Newsletter](#-newsletter) - [✅ Action Items](#-action-items) - [🧪 Hypotheses](#-hypotheses) - [📊 Methodology](#-methodology) - [❓ Questions](#-questions) - [🔮 Future Research](#-future-research) - [💡 Implications](#-implications) - [🧠 Learning Styles Assessment](#-learning-styles-assessment) - [📊 Accessibility Assessment](#-accessibility-assessment) - [🌍 DEIB Assessment](#-deib-assessment) - [✅ Logical Validity](#-logical-validity) - [🛡️ DARVO Analysis](#-darvo-analysis) - [🎯 Conclusion](#-conclusion) ### 🔗 References - [Figma Design Tool](https://figma.com) - [WP Eagle Barfly Community](https://wpeagle.com) ## 📝 Summary - **What happened**: A WordPress developer explains why they shifted from designing directly in WordPress page builders to using Figma for design before development - **Why it matters**: This workflow change reduces WordPress bloat, enables better design iteration, improves client collaboration, and produces higher quality results - **Key stakeholders**: WordPress developers, designers, agencies, and clients working on website projects - **Risks and tradeoffs**: Requires learning a new tool (Figma) and adds an extra step to the workflow, but reduces development cleanup and enables more creative solutions - **Bottom line takeaway**: Separating design from development using dedicated design tools leads to cleaner installs, better designs, and more efficient workflows ## 📖 Main Content The evolution of WordPress page builders like BeaverBuilder and Elementor promised to streamline web development by combining design and development into a single visual workflow. However, this integration creates several problems that dedicated design tools like Figma can solve more effectively. **The core argument** centers on workflow efficiency and output quality. When designers iterate directly in WordPress, they create significant bloat through unused images, redundant CSS classes, and duplicate pages. Each design variation requires uploading assets and building functional elements, making side-by-side comparison difficult. **Technical context**: Modern page builders use drag-and-drop interfaces that eliminate context switching between backend and frontend development. While this appears more efficient, it constrains creative thinking by forcing designers to consider technical implementation during the ideation phase. **Multiple perspectives exist** on this workflow debate. Some developers prefer the immediate feedback of building in WordPress, while others advocate for design-first approaches. The choice often depends on project complexity, team structure, and client collaboration needs. **Contested claims** include whether the additional Figma step actually saves time overall and whether all developers can effectively translate static designs into functional WordPress implementations. ## 🗒️ Notes #### ⏱️ [00:00](https://youtu.be/YEiJTbiu3jM?t=0) — [H1] Evolution from code-refresh to visual builders - Key idea: Page builders eliminated backend/frontend context switching through visual drag-and-drop - Evidence: "Page builders changed all that by allowing us to rapidly build out pages visually using drag and drop" #### ⏱️ [01:15](https://youtu.be/YEiJTbiu3jM?t=75) — [H2] The iteration problem with WordPress design - Key idea: Testing design variations in WordPress creates unnecessary bloat and complexity - Evidence: "I would have to build a version out, duplicate that page, build out a second version, and I wouldn't be able to see them side by side" #### ⏱️ [02:30](https://youtu.be/YEiJTbiu3jM?t=150) — [H2] Figma enables clean iteration without bloat - Key idea: Design tools allow unlimited versions without affecting the WordPress installation - Evidence: "Here inside Figma, we can make as many versions as we need...we're not making a mess of our install" #### ⏱️ [03:45](https://youtu.be/YEiJTbiu3jM?t=225) — [H3] Image testing workflow comparison - Key idea: Testing hero images in WordPress requires uploading multiple files and creating duplicates - Evidence: "To do this inside of a development environment, we'd have to upload each one of the photos, make copies" #### ⏱️ [04:30](https://youtu.be/YEiJTbiu3jM?t=270) — [H2] Client collaboration advantages - Key idea: Figma makes it easier to present options and collaborate with clients and team members - Evidence: "You can present them with some options and collaborate on these things a little bit easier" #### ⏱️ [05:15](https://youtu.be/YEiJTbiu3jM?t=315) — [H1] Creative freedom through design-first approach - Key idea: Design tools enable more creative solutions that would be difficult to conceive in builders - Evidence: Shows circle motif design that "I probably would have never come up with this design if I was working inside of a builder" #### ⏱️ [06:30](https://youtu.be/YEiJTbiu3jM?t=390) — [H2] Technical constraints limit creativity - Key idea: Thinking about implementation (flexbox, CSS grid) during design limits creative possibilities - Evidence: "Uses a whole different part of your brain and it will really limit your creativity" #### ⏱️ [07:45](https://youtu.be/YEiJTbiu3jM?t=465) — [H2] Development efficiency gains from prepared designs - Key idea: Having complete designs speeds up development by eliminating guesswork - Evidence: "Having all these designs prepared before you go into development can really speed up your development workflow" #### ⏱️ [08:00](https://youtu.be/YEiJTbiu3jM?t=480) — [H3] Asset optimization from design specs - Key idea: Figma allows exporting exact image sizes and defining precise font/color requirements - Evidence: "I can export the images at the exact sizes and resolutions right here from Figma" #### ⏱️ [08:45](https://youtu.be/YEiJTbiu3jM?t=525) — [H3] Team specialization benefits - Key idea: Separating design and development allows for specialized team members - Evidence: "Finding somebody that just does design or just does development is a whole lot easier than finding a unicorn" #### ⏱️ [09:30](https://youtu.be/YEiJTbiu3jM?t=570) — [H3] Exceptions to the design-first rule - Key idea: Simple pages can skip Figma once design systems and patterns are established - Evidence: "Once you build out a design system, create some classes, and save some patterns, you can put together pages pretty quickly" ## 📚 References - [Figma](https://figma.com) - [BeaverBuilder](https://www.wpbeaverbuilder.com/) - [Elementor](https://elementor.com/) - [WP Eagle Figma Course](https://wpeagle.com/barfly-community) ## 🗣️ Paraphrase - **Design iteration creates WordPress bloat**: When you test different design ideas directly in WordPress, you end up with unused images, duplicate pages, and unnecessary CSS that clutters your installation and makes maintenance harder. - **Design tools enable better creativity**: Working in Figma removes technical constraints from the creative process, allowing designers to focus purely on visual solutions without worrying about how to implement them in code. - **Preparation speeds development**: Having complete designs with specified assets, fonts, and colors eliminates guesswork during development and prevents the need to upload unused resources to WordPress. ## 📰 Newsletter **Stop Designing Directly in WordPress—Here's Why Figma First Wins** Fellow WordPress builders, we need to talk about workflow. While page builders promised to streamline our process by combining design and development, this approach might actually be holding us back. The key insight? **Design iteration in WordPress creates unnecessary bloat**. Every design variation means uploading images, duplicating pages, and writing CSS you might not use. Meanwhile, tools like Figma let you test unlimited variations without touching your WordPress install. **The practical benefits are compelling:** - Export assets at exact specifications - Present clear options to clients - Enable more creative solutions without technical constraints - Separate design and development skills on your team **Try this approach on your next project**: Design completely in Figma first, then develop with a clear roadmap. Your WordPress installs will stay cleaner, and your designs will likely be more creative. **Resources**: Check out [Learn WordPress](https://learn.wordpress.org/) for development best practices, explore [Figma's WordPress plugins](https://www.figma.com/community/plugins/wordpress) for smoother handoffs, and consider [design system approaches](https://developer.wordpress.org/themes/advanced-topics/child-themes/) for consistent implementations. ## ✅ Action Items #### DevRel - Developer education: Create workshops on design-to-development handoff best practices - Documentation: Develop guides for translating Figma designs to WordPress implementations - Community management: Foster discussions about design workflow optimization #### WordPress - Design: Research integration opportunities between Figma and WordPress workflows - Documentation: Create style guides for design-first WordPress development - Community: Support meetup presentations on modern design workflows #### Community - Maintainers: Consider design system templates and starter files - Contributors: Develop plugins that improve Figma-to-WordPress workflows - Sponsors: Fund design tool integrations and educational content ## 🧪 Hypotheses - Design-first workflows produce cleaner WordPress installations with less unused code and assets - Separating design from development leads to more creative and visually innovative websites - Teams using dedicated design tools have faster development cycles once initial designs are complete - Client satisfaction increases when presented with visual design options before development begins ### 📊 Methodology - Performance analysis: Compare WordPress install sizes between direct-build and design-first approaches - Time tracking study: Measure total project time including iterations for both workflows - Creative output assessment: Evaluate design innovation metrics between approaches ### ❓ Questions - How do we measure the true cost-benefit of adding a design step to WordPress workflows? - What specific integrations between Figma and WordPress would provide the most value? - How can design systems be effectively maintained across both design files and WordPress implementations? ### 🔮 Future Research - Integration opportunities between design tools and WordPress block development - Automated asset optimization from design files to WordPress media libraries - Design token synchronization between Figma and WordPress theme customizers ### 💡 Implications - **Practice**: WordPress developers should consider learning design tools for more efficient workflows - **Education**: Design and development curriculum should emphasize tool specialization and handoff processes - **Tooling**: Opportunity for better integrations between design software and WordPress development environments - **Team Structure**: Agencies may benefit from specialized design and development roles rather than generalists ### 🧠 Learning Styles Assessment Reading level estimate: 8th grade (Flesch-Kincaid Grade Level) #### 👀 Visual learners - **Present**: Multiple design comparisons, side-by-side examples, Figma interface demonstrations - **Improve**: Workflow diagrams, before/after file size comparisons, design system visualizations #### 🔊 Aural learners - **Present**: Video format with clear narration and explanation - **Improve**: Podcast version, audio-described design examples #### 🗣️ Verbal learners - **Present**: Clear explanations, defined terminology, analogies about bloat and efficiency - **Improve**: Glossary of design terms, expanded metaphors for workflow concepts #### 🧩 Kinesthetic learners - **Present**: Mentions hands-on Figma course, practical examples - **Improve**: Step-by-step tutorials, downloadable templates, guided exercises #### 🧠 Logical learners - **Present**: Clear before/after comparisons, structured argument flow - **Improve**: Decision matrices, workflow flowcharts, efficiency metrics #### 🧑‍🤝‍🧑 Social learners - **Present**: Discussion prompt in comments, team collaboration mentions - **Improve**: Community challenges, peer review processes, collaborative templates #### 🧘‍♀️ Solitary learners - **Present**: Individual workflow focus, self-directed learning resources - **Improve**: Self-assessment checklists, personal workflow templates #### 🌿 Naturalistic learners - **Present**: Organic workflow evolution discussion - **Improve**: Ecosystem thinking about tool relationships, sustainable development practices ### 📊 Accessibility Assessment #### Screen reader semantics - **Present**: Video has spoken narration describing visual elements - **Improve**: Detailed alt text for design examples, structured headings in accompanying materials #### Keyboard navigation - **Present**: Standard video player controls - **Improve**: Keyboard shortcuts for timestamp navigation, accessible transcript format #### Contrast and readability - **Present**: Clear visual contrast in design examples - **Improve**: High contrast mode for interface demonstrations #### Text resizing and reflow - **Present**: Video content scales appropriately - **Improve**: Accompanying text materials with responsive design #### Media and captions - **Present**: Audio content with visual examples - **Improve**: Captions for video, downloadable transcript with timestamps #### Forms and interactions - **Present**: Basic video interaction - **Improve**: Accessible commenting system, keyboard-navigable examples ### 🌍 DEIB Assessment #### Cultural breadth - **Present**: Universal design workflow concepts - **Improve**: Examples from diverse industries, global team collaboration scenarios #### Inclusive language - **Present**: Professional, jargon-explained terminology - **Improve**: Plain language alternatives, avoided gendered assumptions about roles #### Neurodiversity support - **Present**: Clear structure, consistent pacing - **Improve**: Content warnings for rapid screen changes, processing time consideration #### Representation - **Present**: Focus on workflow rather than specific demographics - **Improve**: Diverse client examples, varied team structure scenarios #### Psychological safety - **Present**: Respectful presentation of different approaches - **Improve**: Emphasis on learning over judgment, support for different skill levels ### ✅ Logical Validity #### Strong reasoning - **Deductive strength**: Well-structured argument from general principles (iteration efficiency) to specific conclusions (use Figma first) - **Inductive strength**: Multiple concrete examples support broader workflow claims - **Causal reasoning**: Clear cause-effect relationships between design workflow and output quality - **Analogical strength**: Effective comparisons between development approaches #### Fallacies - **False dichotomy**: Presents only two options (design-first vs. build-direct) without considering hybrid approaches; could acknowledge middle-ground solutions - **Hasty generalization**: Claims about "better results" based on personal experience; could benefit from broader data #### Tone of voice - **Overall tone**: Professional and experienced, sharing lessons learned rather than prescriptive rules, acknowledges exceptions and invites discussion ### 🛡️ DARVO Analysis - **Deny**: No denial patterns present—author acknowledges benefits of page builders - **Attack**: No attacks on alternative approaches or their proponents - **Reverse victim/offender**: No victim/offender dynamics present - **Emotional cues and rhetoric**: Professional tone with mild self-deprecating humor about "cussing myself" for complex designs ## 🎯 Conclusion The shift from designing directly in WordPress page builders to using dedicated design tools like Figma represents a maturation in web development workflows. While page builders eliminated technical barriers, they inadvertently created new problems around iteration efficiency and creative constraints. **The practical next steps are clear**: start with design tools for complex projects, maintain design systems for consistency, and recognize when simple builds can skip the design phase. This approach produces cleaner WordPress installations, enables more creative solutions, and scales better for team collaboration. **The broader implication** suggests that as WordPress development matures, specialized tools and workflows will continue to emerge. The most effective approach may not be finding one tool that does everything, but rather building workflows that use the right tool for each phase of the project. ## --- ## Full Transcript [00:00] Back in the day, we would write some [00:01] code, save our changes, and then refresh [00:03] the page to see exactly what it did. But [00:05] page builders changed all that by [00:07] allowing us to rapidly build out pages [00:09] visually using drag and drop and point [00:11] andclick that completely remove the [00:13] context switching of the backend and [00:15] front end since we could see exactly [00:17] what we were building. That made it a [00:18] whole lot easier to design right inside [00:20] your development environment, which is [00:22] exactly what I did when I found tools [00:24] like BeaverBuilder and Elementor. And [00:26] that feels like a huge win. Instead of [00:28] having to do two steps, both the design [00:29] and the development, you combine it all [00:31] into one and get it all done in one go. [00:34] But after spending years doing it both [00:36] ways, I don't think that designing [00:38] inside your development tool is actually [00:40] the right way to go. In this video, I'm [00:42] going to show you a few examples of why [00:43] using a dedicated design tool like Figma [00:46] before you go into development actually [00:48] gives you more flexibility. It also [00:50] keeps your WordPress installs more [00:52] lightweight and clean and ends up [00:54] producing better results. Now, you might [00:55] think I'm full of it, but hear me out. [00:57] One of the most important parts of [00:59] designing is testing out different ideas [01:01] to see what works best for your project. [01:03] Here you can see I have two different [01:05] versions of this exact same page. The [01:07] one on the left has a dark colored hero. [01:10] We're using this sunflower picture in [01:12] the second section. And in the meet the [01:14] team section, we have all the images on [01:16] the left and the text on the right. But [01:18] I did a separate version here with a [01:19] light colored hero using a team photo [01:22] instead of the sunflower photo. And I [01:24] flip-flopped the way the meet our team [01:26] and images work inside of this section. [01:28] Now, I think either one of these designs [01:30] could work, but the benefit here is I [01:32] got to test out some different ideas and [01:34] see which things I like best. If I was [01:37] to do this inside of a development [01:39] environment, I would have to build a [01:40] version out, duplicate that page, build [01:43] out a second version, and I wouldn't be [01:45] able to see them side by side. Plus, [01:47] once I make a decision on which way to [01:49] go forward, I've uploaded a bunch of [01:51] images that I no longer need. I might [01:53] have written classes for styling things [01:55] that's no longer applicable to the [01:57] website because we decided to go in a [01:59] different direction and it creates a lot [02:01] of unnecessary bloat inside of your [02:03] install. But here inside Figma, we can [02:05] make as many versions as we need. We can [02:07] save all these to pick and pull from [02:09] later should we ever need to go back to [02:11] them. And we're not making a mess of our [02:13] install in the process. I'm sure just [02:15] like me, you've questioned whether [02:17] you're using the right image in a hero [02:19] section, for example. Here we can see [02:21] we've decided to use the light header [02:22] and we've used this team photo in the [02:24] background. But maybe another photo [02:26] would work better. To do this inside of [02:28] a development environment, we'd have to [02:30] upload each one of the photos, make [02:32] copies of each one of these pages or [02:34] just duplicate that hero section and try [02:36] to see them all side by side. That's a [02:39] lot of work and it ends up putting a lot [02:40] of stuff inside your WordPress install [02:42] that you don't need. But here inside of [02:44] Figma, I can quickly just duplicate this [02:46] canvas, go in here and upload different [02:49] photos, and we're able to see each one [02:51] of these versions side by side so we can [02:53] make a better decision on which one of [02:55] these images is going to work best [02:56] inside of this design. Not only does [02:59] this give you the ability to really [03:01] critically think about these designs and [03:03] make more informed decisions, but if you [03:05] have to go back to the client, you can [03:06] present them with some options and [03:08] collaborate on these things a little bit [03:10] easier. Trying to do this inside a [03:12] development environment along with a [03:14] team member or client is just a whole [03:15] lot harder than it is here inside of [03:17] Figma, which you can see just took me a [03:19] few seconds. And here's a great example [03:21] of how you can be a lot more creative [03:23] inside of a design tool. On this website [03:26] design, I ended up creating this little [03:28] motif of this circle with this stroke [03:30] that goes around the images that got [03:32] reused throughout the entire website. I [03:34] probably would have never come up with [03:36] this design if I was working inside of a [03:38] builder because building something like [03:40] this out is actually quite difficult. [03:42] However, here inside of Figma, all I had [03:45] to do was use a circle tool and a line [03:47] tool and I could quickly come up with [03:48] this idea. I was able to carry out that [03:51] same design motif throughout other parts [03:53] of the page. Here you can see the [03:55] current page indicator has the same kind [03:57] of icon and we've used this stroke [03:59] design in the background of our hero. I [04:01] think this is a great example of how [04:03] it's the little things in design that [04:05] end up making the biggest difference. [04:06] Without these design motifs, this [04:08] website would have been pretty boring. [04:10] But by carrying this throughout the [04:11] entire design, we've really brought this [04:13] website to life. Now, trying to do this [04:16] in a development environment where [04:17] you're having to think about things [04:18] like, should I use flexbox or CSS grid [04:21] and how am I going to position these [04:23] elements or cut off the overflow that [04:25] uses a whole different part of your [04:27] brain and it will really limit your [04:28] creativity. Instead of just thinking [04:30] about what would look right here, you [04:32] have to think about how I would do it as [04:33] well. Now, eventually, you're going to [04:35] have to come to the point where you have [04:36] to develop this out, and I'd be lying if [04:38] I didn't say that I was cussing myself [04:40] for coming up with this design, but the [04:42] end result speaks for itself. But beyond [04:45] the creativity side of things, having [04:47] all these designs prepared before you go [04:49] into development can really speed up [04:50] your development workflow. here because [04:53] I know exactly what I need. I can export [04:55] the images at the exact sizes and [04:57] resolutions right here from Figma. I [05:00] know which fonts I'm going to use so I [05:01] can upload only the font families and [05:04] weights that I know I'm going to be [05:05] using instead of bloating up my database [05:07] with a bunch of fonts that I don't end [05:09] up using and trying to remember which [05:10] ones got used and which ones didn't. [05:13] Plus, I know all the colors that are [05:15] inside my palette here. So I can quickly [05:17] create that palette using something like [05:19] CSS variables inside my install knowing [05:21] that I'm going to keep a consistent [05:23] color palette across the entire website. [05:25] And eventually you might not want to do [05:27] all the design and development work [05:29] yourself. Finding somebody that just [05:31] does design or just does development is [05:33] a whole lot easier than finding a [05:35] unicorn that can do both. If you're able [05:37] to provide development ready designs [05:38] like this, you're much more likely to be [05:40] able to find a developer that can take [05:42] these designs and bring them to life in [05:44] whatever builder you use. Now, that [05:46] doesn't mean I never build out a page [05:48] without designing in Figma first, [05:49] because once you build out a design [05:51] system, create some classes, and save [05:53] some patterns, you can put together [05:54] pages pretty quickly. But for all the [05:56] reasons I talked about in this video, [05:58] when you're doing that initial design [06:00] and development, it is really helpful to [06:02] go ahead and design separately first and [06:04] then do your development work. Now, if [06:07] you're interested in learning more, I do [06:08] have a great introduction to Figma video [06:10] inside of our Barfly community. It's an [06:12] hour-ong crash course that just teaches [06:14] you all the basics of things you need to [06:16] know inside of Figma to start designing [06:18] websites. I'll make sure to leave a link [06:20] to that down in the description below. [06:22] Hopefully, today's video gave you a few [06:23] things to think about. I'd love to hear [06:25] down in the comments whether you agree [06:27] or disagree, but of course, let's keep [06:28] it civil. Hopefully, you enjoyed today's [06:30] video. If you did, I would really [06:32] appreciate a thumbs up. And if you want [06:33] to make sure to catch the next one, hit [06:35] subscribe and we'll see you  ## 📺 Video ![](https://www.youtube.com/watch?v=YEiJTbiu3jM) --- # 📝 Full Notes (Deep-Read Analysis) # 🏷️ Title: I don't design in WordPress anymore (here's why) ## 🧰 Action Inbox - [H1] Evaluate current design workflow for efficiency — compare iterations and bloat #design - [H2] Set up Figma workspace for client collaboration — present options before development #tools - [H3] Create design system with reusable components — establish consistent patterns #workflow ## 🧭 Table of Contents - [📝 Summary](#-summary) - [📖 Main Content](#-main-content) - [🗒️ Notes](#️-notes) - [📚 References](#-references) - [🗣️ Paraphrase](#️-paraphrase) - [📰 Newsletter](#-newsletter) - [✅ Action Items](#-action-items) - [🧪 Hypotheses](#-hypotheses) - [📊 Methodology](#-methodology) - [❓ Questions](#-questions) - [🔮 Future Research](#-future-research) - [💡 Implications](#-implications) - [🧠 Learning Styles Assessment](#-learning-styles-assessment) - [📊 Accessibility Assessment](#-accessibility-assessment) - [🌍 DEIB Assessment](#-deib-assessment) - [✅ Logical Validity](#-logical-validity) - [🛡️ DARVO Analysis](#-darvo-analysis) - [🎯 Conclusion](#-conclusion) ### 🔗 References - [Figma Design Tool](https://figma.com) - [WP Eagle Barfly Community](https://wpeagle.com) ## 📝 Summary - **What happened**: A WordPress developer explains why they shifted from designing directly in WordPress page builders to using Figma for design before development - **Why it matters**: This workflow change reduces WordPress bloat, enables better design iteration, improves client collaboration, and produces higher quality results - **Key stakeholders**: WordPress developers, designers, agencies, and clients working on website projects - **Risks and tradeoffs**: Requires learning a new tool (Figma) and adds an extra step to the workflow, but reduces development cleanup and enables more creative solutions - **Bottom line takeaway**: Separating design from development using dedicated design tools leads to cleaner installs, better designs, and more efficient workflows ## 📖 Main Content The evolution of WordPress page builders like BeaverBuilder and Elementor promised to streamline web development by combining design and development into a single visual workflow. However, this integration creates several problems that dedicated design tools like Figma can solve more effectively. **The core argument** centers on workflow efficiency and output quality. When designers iterate directly in WordPress, they create significant bloat through unused images, redundant CSS classes, and duplicate pages. Each design variation requires uploading assets and building functional elements, making side-by-side comparison difficult. **Technical context**: Modern page builders use drag-and-drop interfaces that eliminate context switching between backend and frontend development. While this appears more efficient, it constrains creative thinking by forcing designers to consider technical implementation during the ideation phase. **Multiple perspectives exist** on this workflow debate. Some developers prefer the immediate feedback of building in WordPress, while others advocate for design-first approaches. The choice often depends on project complexity, team structure, and client collaboration needs. **Contested claims** include whether the additional Figma step actually saves time overall and whether all developers can effectively translate static designs into functional WordPress implementations. ## 🗒️ Notes #### ⏱️ [00:00](https://youtu.be/YEiJTbiu3jM?t=0) — [H1] Evolution from code-refresh to visual builders - Key idea: Page builders eliminated backend/frontend context switching through visual drag-and-drop - Evidence: "Page builders changed all that by allowing us to rapidly build out pages visually using drag and drop" #### ⏱️ [01:15](https://youtu.be/YEiJTbiu3jM?t=75) — [H2] The iteration problem with WordPress design - Key idea: Testing design variations in WordPress creates unnecessary bloat and complexity - Evidence: "I would have to build a version out, duplicate that page, build out a second version, and I wouldn't be able to see them side by side" #### ⏱️ [02:30](https://youtu.be/YEiJTbiu3jM?t=150) — [H2] Figma enables clean iteration without bloat - Key idea: Design tools allow unlimited versions without affecting the WordPress installation - Evidence: "Here inside Figma, we can make as many versions as we need...we're not making a mess of our install" #### ⏱️ [03:45](https://youtu.be/YEiJTbiu3jM?t=225) — [H3] Image testing workflow comparison - Key idea: Testing hero images in WordPress requires uploading multiple files and creating duplicates - Evidence: "To do this inside of a development environment, we'd have to upload each one of the photos, make copies" #### ⏱️ [04:30](https://youtu.be/YEiJTbiu3jM?t=270) — [H2] Client collaboration advantages - Key idea: Figma makes it easier to present options and collaborate with clients and team members - Evidence: "You can present them with some options and collaborate on these things a little bit easier" #### ⏱️ [05:15](https://youtu.be/YEiJTbiu3jM?t=315) — [H1] Creative freedom through design-first approach - Key idea: Design tools enable more creative solutions that would be difficult to conceive in builders - Evidence: Shows circle motif design that "I probably would have never come up with this design if I was working inside of a builder" #### ⏱️ [06:30](https://youtu.be/YEiJTbiu3jM?t=390) — [H2] Technical constraints limit creativity - Key idea: Thinking about implementation (flexbox, CSS grid) during design limits creative possibilities - Evidence: "Uses a whole different part of your brain and it will really limit your creativity" #### ⏱️ [07:45](https://youtu.be/YEiJTbiu3jM?t=465) — [H2] Development efficiency gains from prepared designs - Key idea: Having complete designs speeds up development by eliminating guesswork - Evidence: "Having all these designs prepared before you go into development can really speed up your development workflow" #### ⏱️ [08:00](https://youtu.be/YEiJTbiu3jM?t=480) — [H3] Asset optimization from design specs - Key idea: Figma allows exporting exact image sizes and defining precise font/color requirements - Evidence: "I can export the images at the exact sizes and resolutions right here from Figma" #### ⏱️ [08:45](https://youtu.be/YEiJTbiu3jM?t=525) — [H3] Team specialization benefits - Key idea: Separating design and development allows for specialized team members - Evidence: "Finding somebody that just does design or just does development is a whole lot easier than finding a unicorn" #### ⏱️ [09:30](https://youtu.be/YEiJTbiu3jM?t=570) — [H3] Exceptions to the design-first rule - Key idea: Simple pages can skip Figma once design systems and patterns are established - Evidence: "Once you build out a design system, create some classes, and save some patterns, you can put together pages pretty quickly" ## 📚 References - [Figma](https://figma.com) - [BeaverBuilder](https://www.wpbeaverbuilder.com/) - [Elementor](https://elementor.com/) - [WP Eagle Figma Course](https://wpeagle.com/barfly-community) ## 🗣️ Paraphrase - **Design iteration creates WordPress bloat**: When you test different design ideas directly in WordPress, you end up with unused images, duplicate pages, and unnecessary CSS that clutters your installation and makes maintenance harder. - **Design tools enable better creativity**: Working in Figma removes technical constraints from the creative process, allowing designers to focus purely on visual solutions without worrying about how to implement them in code. - **Preparation speeds development**: Having complete designs with specified assets, fonts, and colors eliminates guesswork during development and prevents the need to upload unused resources to WordPress. ## 📰 Newsletter **Stop Designing Directly in WordPress—Here's Why Figma First Wins** Fellow WordPress builders, we need to talk about workflow. While page builders promised to streamline our process by combining design and development, this approach might actually be holding us back. The key insight? **Design iteration in WordPress creates unnecessary bloat**. Every design variation means uploading images, duplicating pages, and writing CSS you might not use. Meanwhile, tools like Figma let you test unlimited variations without touching your WordPress install. **The practical benefits are compelling:** - Export assets at exact specifications - Present clear options to clients - Enable more creative solutions without technical constraints - Separate design and development skills on your team **Try this approach on your next project**: Design completely in Figma first, then develop with a clear roadmap. Your WordPress installs will stay cleaner, and your designs will likely be more creative. **Resources**: Check out [Learn WordPress](https://learn.wordpress.org/) for development best practices, explore [Figma's WordPress plugins](https://www.figma.com/community/plugins/wordpress) for smoother handoffs, and consider [design system approaches](https://developer.wordpress.org/themes/advanced-topics/child-themes/) for consistent implementations. ## ✅ Action Items #### DevRel - Developer education: Create workshops on design-to-development handoff best practices - Documentation: Develop guides for translating Figma designs to WordPress implementations - Community management: Foster discussions about design workflow optimization #### WordPress - Design: Research integration opportunities between Figma and WordPress workflows - Documentation: Create style guides for design-first WordPress development - Community: Support meetup presentations on modern design workflows #### Community - Maintainers: Consider design system templates and starter files - Contributors: Develop plugins that improve Figma-to-WordPress workflows - Sponsors: Fund design tool integrations and educational content ## 🧪 Hypotheses - Design-first workflows produce cleaner WordPress installations with less unused code and assets - Separating design from development leads to more creative and visually innovative websites - Teams using dedicated design tools have faster development cycles once initial designs are complete - Client satisfaction increases when presented with visual design options before development begins ### 📊 Methodology - Performance analysis: Compare WordPress install sizes between direct-build and design-first approaches - Time tracking study: Measure total project time including iterations for both workflows - Creative output assessment: Evaluate design innovation metrics between approaches ### ❓ Questions - How do we measure the true cost-benefit of adding a design step to WordPress workflows? - What specific integrations between Figma and WordPress would provide the most value? - How can design systems be effectively maintained across both design files and WordPress implementations? ### 🔮 Future Research - Integration opportunities between design tools and WordPress block development - Automated asset optimization from design files to WordPress media libraries - Design token synchronization between Figma and WordPress theme customizers ### 💡 Implications - **Practice**: WordPress developers should consider learning design tools for more efficient workflows - **Education**: Design and development curriculum should emphasize tool specialization and handoff processes - **Tooling**: Opportunity for better integrations between design software and WordPress development environments - **Team Structure**: Agencies may benefit from specialized design and development roles rather than generalists ### 🧠 Learning Styles Assessment Reading level estimate: 8th grade (Flesch-Kincaid Grade Level) #### 👀 Visual learners - **Present**: Multiple design comparisons, side-by-side examples, Figma interface demonstrations - **Improve**: Workflow diagrams, before/after file size comparisons, design system visualizations #### 🔊 Aural learners - **Present**: Video format with clear narration and explanation - **Improve**: Podcast version, audio-described design examples #### 🗣️ Verbal learners - **Present**: Clear explanations, defined terminology, analogies about bloat and efficiency - **Improve**: Glossary of design terms, expanded metaphors for workflow concepts #### 🧩 Kinesthetic learners - **Present**: Mentions hands-on Figma course, practical examples - **Improve**: Step-by-step tutorials, downloadable templates, guided exercises #### 🧠 Logical learners - **Present**: Clear before/after comparisons, structured argument flow - **Improve**: Decision matrices, workflow flowcharts, efficiency metrics #### 🧑‍🤝‍🧑 Social learners - **Present**: Discussion prompt in comments, team collaboration mentions - **Improve**: Community challenges, peer review processes, collaborative templates #### 🧘‍♀️ Solitary learners - **Present**: Individual workflow focus, self-directed learning resources - **Improve**: Self-assessment checklists, personal workflow templates #### 🌿 Naturalistic learners - **Present**: Organic workflow evolution discussion - **Improve**: Ecosystem thinking about tool relationships, sustainable development practices ### 📊 Accessibility Assessment #### Screen reader semantics - **Present**: Video has spoken narration describing visual elements - **Improve**: Detailed alt text for design examples, structured headings in accompanying materials #### Keyboard navigation - **Present**: Standard video player controls - **Improve**: Keyboard shortcuts for timestamp navigation, accessible transcript format #### Contrast and readability - **Present**: Clear visual contrast in design examples - **Improve**: High contrast mode for interface demonstrations #### Text resizing and reflow - **Present**: Video content scales appropriately - **Improve**: Accompanying text materials with responsive design #### Media and captions - **Present**: Audio content with visual examples - **Improve**: Captions for video, downloadable transcript with timestamps #### Forms and interactions - **Present**: Basic video interaction - **Improve**: Accessible commenting system, keyboard-navigable examples ### 🌍 DEIB Assessment #### Cultural breadth - **Present**: Universal design workflow concepts - **Improve**: Examples from diverse industries, global team collaboration scenarios #### Inclusive language - **Present**: Professional, jargon-explained terminology - **Improve**: Plain language alternatives, avoided gendered assumptions about roles #### Neurodiversity support - **Present**: Clear structure, consistent pacing - **Improve**: Content warnings for rapid screen changes, processing time consideration #### Representation - **Present**: Focus on workflow rather than specific demographics - **Improve**: Diverse client examples, varied team structure scenarios #### Psychological safety - **Present**: Respectful presentation of different approaches - **Improve**: Emphasis on learning over judgment, support for different skill levels ### ✅ Logical Validity #### Strong reasoning - **Deductive strength**: Well-structured argument from general principles (iteration efficiency) to specific conclusions (use Figma first) - **Inductive strength**: Multiple concrete examples support broader workflow claims - **Causal reasoning**: Clear cause-effect relationships between design workflow and output quality - **Analogical strength**: Effective comparisons between development approaches #### Fallacies - **False dichotomy**: Presents only two options (design-first vs. build-direct) without considering hybrid approaches; could acknowledge middle-ground solutions - **Hasty generalization**: Claims about "better results" based on personal experience; could benefit from broader data #### Tone of voice - **Overall tone**: Professional and experienced, sharing lessons learned rather than prescriptive rules, acknowledges exceptions and invites discussion ### 🛡️ DARVO Analysis - **Deny**: No denial patterns present—author acknowledges benefits of page builders - **Attack**: No attacks on alternative approaches or their proponents - **Reverse victim/offender**: No victim/offender dynamics present - **Emotional cues and rhetoric**: Professional tone with mild self-deprecating humor about "cussing myself" for complex designs ## 🎯 Conclusion The shift from designing directly in WordPress page builders to using dedicated design tools like Figma represents a maturation in web development workflows. While page builders eliminated technical barriers, they inadvertently created new problems around iteration efficiency and creative constraints. **The practical next steps are clear**: start with design tools for complex projects, maintain design systems for consistency, and recognize when simple builds can skip the design phase. This approach produces cleaner WordPress installations, enables more creative solutions, and scales better for team collaboration. **The broader implication** suggests that as WordPress development matures, specialized tools and workflows will continue to emerge. The most effective approach may not be finding one tool that does everything, but rather building workflows that use the right tool for each phase of the project. ## --- # 📄 Full Transcript *Auto-generated from YouTube captions · timestamps roughly every 30 seconds · [watch on YouTube](https://www.youtube.com/watch?v=YEiJTbiu3jM)* **[00:00]** Back in the day, we would write some code, save our changes, and then refresh the page to see exactly what it did. But page builders changed all that by allowing us to rapidly build out pages visually using drag and drop and point andclick that completely remove the context switching of the backend and front end since we could see exactly what we were building. That made it a whole lot easier to design right inside your development environment, which is exactly what I did when I found tools like BeaverBuilder and Elementor. And that feels like a huge win. Instead of having to do two steps, both the design and the development, you combine it all **[00:31]** into one and get it all done in one go. But after spending years doing it both ways, I don't think that designing inside your development tool is actually the right way to go. In this video, I'm going to show you a few examples of why using a dedicated design tool like Figma before you go into development actually gives you more flexibility. It also keeps your WordPress installs more lightweight and clean and ends up producing better results. Now, you might think I'm full of it, but hear me out. One of the most important parts of designing is testing out different ideas to see what works best for your project. **[01:03]** Here you can see I have two different versions of this exact same page. The one on the left has a dark colored hero. We're using this sunflower picture in the second section. And in the meet the team section, we have all the images on the left and the text on the right. But I did a separate version here with a light colored hero using a team photo instead of the sunflower photo. And I flip-flopped the way the meet our team and images work inside of this section. Now, I think either one of these designs could work, but the benefit here is I got to test out some different ideas and **[01:34]** see which things I like best. If I was to do this inside of a development environment, I would have to build a version out, duplicate that page, build out a second version, and I wouldn't be able to see them side by side. Plus, once I make a decision on which way to go forward, I've uploaded a bunch of images that I no longer need. I might have written classes for styling things that's no longer applicable to the website because we decided to go in a different direction and it creates a lot of unnecessary bloat inside of your install. But here inside Figma, we can **[02:05]** make as many versions as we need. We can save all these to pick and pull from later should we ever need to go back to them. And we're not making a mess of our install in the process. I'm sure just like me, you've questioned whether you're using the right image in a hero section, for example. Here we can see we've decided to use the light header and we've used this team photo in the background. But maybe another photo would work better. To do this inside of a development environment, we'd have to upload each one of the photos, make copies of each one of these pages or just duplicate that hero section and try **[02:36]** to see them all side by side. That's a lot of work and it ends up putting a lot of stuff inside your WordPress install that you don't need. But here inside of Figma, I can quickly just duplicate this canvas, go in here and upload different photos, and we're able to see each one of these versions side by side so we can make a better decision on which one of these images is going to work best inside of this design. Not only does this give you the ability to really critically think about these designs and make more informed decisions, but if you have to go back to the client, you can **[03:06]** present them with some options and collaborate on these things a little bit easier. Trying to do this inside a development environment along with a team member or client is just a whole lot harder than it is here inside of Figma, which you can see just took me a few seconds. And here's a great example of how you can be a lot more creative inside of a design tool. On this website design, I ended up creating this little motif of this circle with this stroke that goes around the images that got reused throughout the entire website. I probably would have never come up with this design if I was working inside of a **[03:38]** builder because building something like this out is actually quite difficult. However, here inside of Figma, all I had to do was use a circle tool and a line tool and I could quickly come up with this idea. I was able to carry out that same design motif throughout other parts of the page. Here you can see the current page indicator has the same kind of icon and we've used this stroke design in the background of our hero. I think this is a great example of how it's the little things in design that end up making the biggest difference. Without these design motifs, this **[04:08]** website would have been pretty boring. But by carrying this throughout the entire design, we've really brought this website to life. Now, trying to do this in a development environment where you're having to think about things like, should I use flexbox or CSS grid and how am I going to position these elements or cut off the overflow that uses a whole different part of your brain and it will really limit your creativity. Instead of just thinking about what would look right here, you have to think about how I would do it as well. Now, eventually, you're going to have to come to the point where you have to develop this out, and I'd be lying if **[04:38]** I didn't say that I was cussing myself for coming up with this design, but the end result speaks for itself. But beyond the creativity side of things, having all these designs prepared before you go into development can really speed up your development workflow. here because I know exactly what I need. I can export the images at the exact sizes and resolutions right here from Figma. I know which fonts I'm going to use so I can upload only the font families and weights that I know I'm going to be using instead of bloating up my database with a bunch of fonts that I don't end **[05:09]** up using and trying to remember which ones got used and which ones didn't. Plus, I know all the colors that are inside my palette here. So I can quickly create that palette using something like CSS variables inside my install knowing that I'm going to keep a consistent color palette across the entire website. And eventually you might not want to do all the design and development work yourself. Finding somebody that just does design or just does development is a whole lot easier than finding a unicorn that can do both. If you're able to provide development ready designs like this, you're much more likely to be **[05:40]** able to find a developer that can take these designs and bring them to life in whatever builder you use. Now, that doesn't mean I never build out a page without designing in Figma first, because once you build out a design system, create some classes, and save some patterns, you can put together pages pretty quickly. But for all the reasons I talked about in this video, when you're doing that initial design and development, it is really helpful to go ahead and design separately first and then do your development work. Now, if you're interested in learning more, I do have a great introduction to Figma video inside of our Barfly community. It's an **[06:12]** hour-ong crash course that just teaches you all the basics of things you need to know inside of Figma to start designing websites. I'll make sure to leave a link to that down in the description below. Hopefully, today's video gave you a few things to think about. I'd love to hear down in the comments whether you agree or disagree, but of course, let's keep it civil. Hopefully, you enjoyed today's video. If you did, I would really appreciate a thumbs up. And if you want to make sure to catch the next one, hit subscribe and we'll see you