Adam Dworak’s Post

🏅 Lets talk about Figma´s Variables, which is a game-changer for design systems! This feature allows designers to create tokens and variables, making it easier to implement light and dark modes using CSS custom properties. The process involves setting up primitive and semantic variables. Primitive variables are foundational elements like pixel sizes and colors, while semantic variables use meaningful names to create multiple modes without needing separate color palettes. This approach ensures a consistent and maintainable design system. Designers are encouraged to start with the most necessary components and gradually build their design system. This method not only speeds up future projects but also aligns the design process with engineering best practices. 🔗 https://lnkd.in/eZszCS9Q

You know how most designers get all fancy with their layouts? I think less is more. This Landing page shows how whitespace can make a big difference. the effective use of images in design. #not #responsive, #meant #for #desktop Link to live website https://lnkd.in/d758aaSw Want to see the magic behind the scenes? Here’s the source code: https://lnkd.in/d7Ba7WGv #webdesign #landingpage #uiux #design #developer #coding #indian #design #simplicity"

As a developer, here's how I feel about design... Building features WITH designers > Building features FOR designers

Luis Ouriach your 'Simple Design System' is awesome. Chucked it into FigMayo and it's really fun to browse how you've constructed your components there. Seems like a good balance between simplicity and complexity. I like the more semantic naming of props as well, like "is dismissable" Looking forward to digging into code-connect some more. Great work! 🤘 Figma's Simple Design System - https://lnkd.in/eU7JWseX Browse it on FigMayo - https://lnkd.in/ePQERyM5

Not-Quite-Daily-Design-Sketch It's annoying having to select your card from its name even though you've saved it to your customer account. It's even more annoying having to type all the details in when you're a returning customer. Messing around in Figma with Pangram Pangram's Neue Montreal. It's the best font. Focusing on typographic hierarchy and simple design using grids.

After years of procrastination, my portfolio website is finally live! It’s not perfect yet and still needs some fine-tuning and optimization, but it has to start somewhere. Check it out here→ https://simotamas.studio Design/Code/Interaction: Simó Tamás

Achieving stunning sites regardless of screen size can be a headache for both designers and developers. How can responsive design frameworks help? #WeAreCapicua Check Capicua's article, where we discuss all edges of frameworks for responsive design! #ResponsiveDesign #ProductDesign #UIUXDesign #DisruptingTheFuture

When we create theme colors in a design system, it’s important to temporarily remove saturation to check the grayscale. Although Figma doesn’t have a ‘gray mode’, an easy solution is to add a layer filled with gray color on our board and set the blend mode to ‘saturation’. Once we have finished checking, we can easily hide that layer and continue our work.

Day 6: Theming with Styled-Components Theming is a powerful feature in styled-components, allowing you to maintain a consistent design across your application. Use the `ThemeProvider` to apply themes: import { ThemeProvider } from 'styled-components'; const theme = {  primaryColor: 'blue',  secondaryColor: 'gray', }; <ThemeProvider theme={theme}>  <App /> </ThemeProvider> const Button = styled.button`  background: ${props => props.theme.primaryColor};  color: white; `;

𝗥𝗼𝘄 𝗪𝗶𝗱𝗴𝗲𝘁 𝗶𝗻 𝗙𝗹𝘂𝘁𝘁𝗲𝗿𝗙𝗹𝗼𝘄 📐 The Row widget is essential for creating horizontal layouts. Here's how you can maximize its potential: 1️⃣ 𝗣𝗹𝗮𝗰𝗲 𝗲𝗹𝗲𝗺𝗲𝗻𝘁𝘀 𝗵𝗼𝗿𝗶𝘇𝗼𝗻𝘁𝗮𝗹𝗹𝘆 Easily arrange buttons, images, text, and more in a line for a neat, organized interface. 2️⃣ 𝗨𝘀𝗲 𝗰𝗵𝗶𝗹𝗱 𝗮𝗹𝗶𝗴𝗻𝗺𝗲𝗻𝘁 Align items within the Row using MainAxisAlignment (e.g., start, center, end) and CrossAxisAlignment (e.g., start, center, end). 3️⃣ 𝗧𝗵𝗿𝗲𝗮𝗱 𝗰𝗼𝗻𝘁𝗿𝗼𝗹 𝗳𝗼𝗿 𝗿𝗲𝘀𝗽𝗼𝗻𝘀𝗶𝘃𝗲 𝗱𝗲𝘀𝗶𝗴𝗻 Ensure your Row widget is responsive by wrapping it in a Flexible or Expanded widget, allowing it to adapt to various screen sizes. 4️⃣ 𝗣𝗿𝗮𝗰𝘁𝗶𝗰𝗮𝗹 𝗮𝗽𝗽𝗹𝗶𝗰𝗮𝘁𝗶𝗼𝗻𝘀 Horizontal menus Icon/text combinations Image galleries Conclusion: Mastering the Row widget in FlutterFlow can improve your app’s layout design, making it more user-friendly and responsive. 📐 👉 Follow me for more FlutterFlow tips! #RowWidget #FlutterFlow #MobileAppDevelopment #NoCode #AppDesign #Flutter