Verified
Author
Creator of EmviUI · Senior UX/UI & Web Designer at CQMRewards
Dedicated product & web designer with 10+ years of experience working at the crossroads of design and technology. Expert in Figma, high-fidelity prototyping, design tokens, and modern frontend systems (Tailwind CSS, HTML/CSS). Creator of EmviUI (10,000+ Figma components optimized for production and dark mode), UImand, and Vitamin Bootstrap.
Practical guides, design token strategies, and technical benchmarks
Apply a Figma login UI kit with clear labels, submission states, useful recovery and mobile checks. Review a real EmviUI screen and a practical checklist.
Learn how to create spacing variables in Figma, bind padding and gap, test source changes and recover detached bindings with a practical card example.
Choose Tailwind CSS font size and line height with practical UI examples, then review responsive text, 200% resizing, reflow and user spacing.
To create shadow variables in Figma, create number variables for the supported numeric effect fields and a color variable for the shadow color. Bind them to a drop shadow, then save the complete treatment as an effect style. Test the resulting elevation on its intended surfa
To use Tailwind CSS in React with Vite, add the Tailwind Vite plugin, import Tailwind in your CSS entry and load that stylesheet from the application. Verify a visible static utility first, then check component variants and the production build. Keep version-specific se
Figma export settings work best when you specify the receiving job first: choose the asset, format, pixel dimensions and filename, then inspect the exported file where it will be used. Use a small delivery manifest to separate reusable artwork from the live interface. E
Tailwind CSS color classes set separate properties: text-* colors text, bg-* colors a surface and border-* colors its edge. Choose those values as a combination, add explicit interaction states, and test the rendered result. A shade number is neither a contrast score no
Use Tailwind CSS flex to arrange interface controls along one main axis, then define what grows, what stays content-sized and what happens when space runs out. For a responsive search toolbar, start with a stacked layout, let the search field absorb available width and
A repeatable vector-repair workflow for the corner, endpoint and overlap problems that make Figma artwork look broken.
Create matching string and number variables, bind supported text properties, and test a small set of reusable roles with real content before sharing the recipe.