https://mobbin.com/?referrer_workspace_id=85c9a65c-dd0b-40b8-a1e4-886e77af5683

Screenshot of the Feathr platform showing a Donor Signup Form. A modal is open with an embed code that can be copied and pasted into a website's HTML to share the form. The embed code includes an iframe with specific parameters such as width, height, and source URL. The modal has options to 'Copy to Clipboard' and 'Cancel.'

In this video, I demonstrate how to set up typography variables to streamline the use of typefaces in design files. By creating local variables or using shared libraries, we can maintain consistency across design instances. I explain how to organize variables, create categories like typography, and assign specific typefaces. No specific action is requested from viewers.

Typography Variable Setup Tutorial

https://www.loom.com/share/f051aec87f6349d1bdd9fee909b70f37?sid=c273332f-2ec5-4f67-ae76-9d8ba68eeedf

A visual of eight date range picker components displaying different date ranges and navigation options, including presets for today, yesterday, this week, and custom date ranges.

Feathr dashboard showing a conversions summary for the last 30 days, including total conversions of 180 and a total conversion value of $6,880.40. Below the summary is a detailed conversions breakdown by goal, showing the number of conversions and conversion value for donations, registrations, subscriptions, and other goals.

This screenshot shows the Feathr platform with the title "Your Impact in Action" for a post-event donor engagement campaign. There is a drip icon and the status of the campaign is labeled as "Draft." The interface is in the "Builder" tab (step 1 out of 4), with two steps listed in the drip campaign: "Donation thank you" and "Update on cause." Each step has options for setting up automation rules like "Step targeting" and "Delay from delivery." The step targeting section is visible with the option "Send to everyone" selected. Navigation options such as "Exclusions," "Goals," and "Details" are seen but not selected. At the bottom, there are buttons for "Previous," "Next," "Save as draft," and "Publish."

Email design preview for an Autumn Fundraiser Campaign. The email includes a header with the title 'Autumn Fundraiser Campaign' in bold text, followed by an image placeholder with dimensions of 600x300. Below the image is a heading that reads 'Help Us Reach Our Autumn Fundraiser Goal!' followed by placeholder text that begins with 'Dear {first-name},' introducing the fundraiser. The email includes a 'Donate Now' button in orange. In the right panel, fields show details such as recipient name Maria Gonzales, from email address events@nonprofit.org, and the subject 'Help Us Reach Our Autumn Fundraiser Goal!'

Unlock the full potential of your UI design and engineering skillsets. Learn to design and translate polished components into HTML and CSS.

UI Engineering 101 for Designers by Mariana Castilho and Derek Briggs on Maven

https://maven.com/pixeljanitor/uiengineering-101-for-designers?promoCode=DIVE25

Screenshot of an online learning platform homepage, titled "Chris Courses." The top section features a dark, starry background with text "Unleash your inner game developer." Below, buttons for "View Courses" and "Pricing" are visible. A sidebar shows statistics including "312 Courses," "93 Hours of Video," and "10,597 Students." A small window displays a game of "Space Invaders" with a score of 6450, and a satellite illustration occupies the lower right corner.

Three dropdown menu cards showing options for a report and campaign. The leftmost card shows 'Report' options such as Customize, Manage short links, Copy link, Export as CSV, followed by 'Campaign' options Duplicate and Delete. The middle card shows the same options with 'Customize' selected. The rightmost card shows the 'Delete' option in red with a lighter red background as if hovered.

Mockup of a hero for a conference website

Screenshot of a notification showing that John Doe's email preferences were updated. The update took place on September 18, 2024, at 11:37 AM EST. The notification reveals that John Doe opted out of emails from the Monthly Newsletter, and it shows "Yes" under this section. The message also indicates that the opt-out occurred due to a change in preference by Jane Doe, whose profile picture is displayed. There's also a "View person" button next to Jane Doe's name, and a "Show raw data" button is located at the bottom right of the notification.

Screenshot of the Subscription Management Settings page in Feathr. The page allows users to set a custom subscription name and upload an organization logo for the subscription management page. Below, there's a preview of the 'Manage Email Preferences' page that includes an option to unsubscribe from all emails and specific mailing lists.

In-person Event - Ready to mix up your remote work day? Join us for a designer cowork in St. Pete! Bring your projects, find a spot, and enjoy a day of coworking with other designers at a cafe.

Tampa Bay Designers: September Designer Cowork (St Pete) | Figma

https://friends.figma.com/events/details/figma-tampa-bay-presents-tampa-bay-designers-september-designer-cowork-st-pete/

In-person Event - Join us for a fun and casual evening with other designers! Whether you want to grab a drink, talk shop, or just chat about life, come and enjoy a relaxed and friendly environment. Let's connect, share ideas, and unwind together.

Tampa Bay Designers: September Design Hangout (Tampa) | Figma

https://friends.figma.com/events/details/figma-tampa-bay-presents-tampa-bay-designers-september-design-hangout-tampa/

UI for creating a Geofilter set, showing a form with location filters. Users can search for locations like countries or cities and mark them as 'Included' or 'Excluded.' The interface includes a search field, selection options, and filters for multiple locations, with search results shown for places like Florida cities. An empty state is shown when no results match the search query.

Tampa Bay Designers: October Design Hangout (St Pete) | Figma

https://friends.figma.com/events/details/figma-tampa-bay-presents-tampa-bay-designers-october-design-hangout-st-pete/

A user interface displaying a form for sender information in an email campaign setup. The form includes fields for "From email address" with a verified checkmark icon, a "Reply-to email address" field, and options to use contact info from the verified email address. The form also contains fields for the sender's name, company name, and address details, including state and postal code.

A diagram showcasing multiple tooltip positions relative to a button. Tooltips can be displayed in various alignments: Top-start, Top, Top-end, Left-start, Left, Left-end, Right-start, Right, Right-end, Bottom-start, Bottom, and Bottom-end. The buttons are labeled "Button with tooltip," and the tooltips show the word "Tooltip." Each example illustrates a possible placement for the tooltip, either on top, bottom, left, or right of the button, including start and end positions for each side.

Screenshot from Figma of a redesigned version of the account profile settings page in Feathr

"Screenshot of a marketing dashboard with a table displaying campaign details including the campaign name, project, type, and status. The status column uses color-coded tags like Published, Draft, Erroring, and Stopped. On the right side of the screen, there's a filter panel showing selected filters such as 'Projects: Monthly Donor Engagement,' 'Status: Draft,' 'Type: Tracked Link,' and date filters from September 1, 2024, to September 8, 2024. At the bottom of the filter panel are buttons to clear the filters or apply them.

Screenshot of two searchable select components with a search icon and placeholder that instructs the user to select or search.

In-person Event - Join Tampa Bay Designers on November 21 at 6 pm at World of Beer! Come for the drinks, stay for the great company and conversations. Designers of all levels are welcome!

Tampa Bay Designers: November Design Hangout | Figma

https://friends.figma.com/events/details/figma-tampa-bay-presents-tampa-bay-designers-november-design-hangout/

Tampa Bay Designers: August Design Hangout (St Pete) | Figma

https://friends.figma.com/events/details/figma-tampa-bay-presents-tampa-bay-designers-august-design-hangout-st-pete/

I've been using @Mobbin lately and love it - want to join? You'll get 10% off Pro/Team plans. 🎁 https://mobbin.com/?referrer_workspace_id=85c9a65c-dd0b-40b8-a1e4-886e77af5683

Streamline your design process with typography variables! In this video, I show how to set up and organize typefaces for consistency using local variables or shared libraries. https://www.loom.com/share/f051aec87f6349d1bdd9fee909b70f37?sid=c273332f-2ec5-4f67-ae76-9d8ba68eeedf

Working on an MMMVP (minimally minimal minimum viable product)

How does ChatGPT still not have a search feature?

📊💸 Conversions, conversions, conversions

Struggled with Claude and Cursor for the past hour but finally, we're getting somewhere!

Looking forward to joining the next cohort starting next week!
https://maven.com/pixeljanitor/uiengineering-101-for-designers?promoCode=DIVE25

When viewing an opened image on here, is the Escape key the only way to close it? I would expect there to be a close button in a corner as well.

🚀🧑‍💻 Unleash your inner game developer

Check out: https://chriscourses.com/

I don’t hate American Football. I just think it should only last for two halves and not four quarters. Just saying…

🚀 Exploring the Future of UX/UI in the Age of AI 🤖

This morning, a friend asked me: "Do you see a lot of growth and future in UX/UI? Or is AI stripping some of that field down to fewer and fewer roles?"

I know it's not much but I've been working on building an app dashboard and stoked to see this in the browser!

🔧 🧹 Small UI details can make a big difference in usability. Clean, organized, and intuitive menus keep users focused and efficient.

I’ve been listening to The Devil Wears Prada for almost 20 years and seen them live probably 6 times but never have I cried… until last night during Cancer…

I still have some work to do but am proud of what I built in CodePen with just 1.5 hours.

✉️🔧 Subscription Management Settings

Ready to mix up your remote work day? Join us for a designer cowork at Blush Tea and Coffee in St. Pete next Friday, September 6th at 9am! https://friends.figma.com/events/details/figma-tampa-bay-presents-tampa-bay-designers-september-designer-cowork-st-pete/

🛠️👀 Toolbar for UI Engineering 101 for Designers

Join us for a fun and casual evening with other designers! https://friends.figma.com/events/details/figma-tampa-bay-presents-tampa-bay-designers-september-design-hangout-tampa/

When are desktop basic app and desktop app wireframe coming to First Draft?

🎨🚀 Built an empty state today as part of the UI Engineering for Designers cohort

You know what would be cool... GroupChatGPT.

I’m looking for a developer to fix an email marketing platform built on Shopify. Asking for a friend (literally).

🎨🥂 Join us at Dracula's Wine Bar in St Pete next Thursday, October 24 at 6pm for a Design Hangout! Let's regroup after the storm, share ideas, and unwind.

https://friends.figma.com/events/details/figma-tampa-bay-presents-tampa-bay-designers-october-design-hangout-st-pete/

Stumbling across redesigns of mine in production can be so satisfying sometimes.

🎯🔧 Fine-tuning filters for a streamlined marketing workflow

Join us on Nov 21 at 6 pm at World of Beer on Avion Park Dr! Come for the drinks, and stay for the great company and conversations. Designers of all levels are welcome!

https://friends.figma.com/events/details/figma-tampa-bay-presents-tampa-bay-designers-november-design-hangout/

Join other designers in the Tampa Bay area tomorrow evening, Thursday, August 15 at 6pm for a fun and casual evening at Bayboro Brewing in St Pete! https://friends.figma.com/events/details/figma-tampa-bay-presents-tampa-bay-designers-august-design-hangout-st-pete/

What are your favorite digital annual reports? Send links.

Posts