Cách Tạo Kiểu Màu Và Kiểu Chữ Trong Figma

Trong bài viết này, chúng ta sẽ học cách tạo, chỉnh sửa và sử dụng màu sắc và kiểu văn bản trong Figma. Chúng ta cũng sẽ học cách kết hợp các kiểu chữ và màu sắc cũng như sử dụng chúng để tạo ra các thiết kế đẹp mắt.

Kiểu giúp bạn đơn giản hóa quy trình làm việc của mình, giữ cho văn bản và các lớp nhất quán, đồng thời tiết kiệm thời gian quý báu.

‌‌Làm thế nào để sử dụng các kiểu màu trong Figma

Bạn có thể áp dụng kiểu màu cho văn bản, nền và nét. Bạn cũng có thể áp dụng kiểu màu cho các hình dạng được tạo trong thiết kế của mình hoặc cho các phần tử hoặc phần của trang web hoặc ứng dụng dành cho thiết bị di động cụ thể mà bạn đang thiết kế. Chúng có thể bao gồm các nút, hình chữ nhật, thanh trên cùng và dưới cùng, v.v.

Bạn cũng có thể sử dụng kiểu màu cho hình ảnh hoặc độ dốc.

Cách tạo kiểu màu

Để tạo kiểu màu, hãy làm theo các bước sau:

• Tạo một hình dạng mới và đi tới Tô màu. Tô màu cho lớp của bạn với bất kỳ màu nào bạn chọn.

• Nhấp vào biểu tượng bốn chấm để kích hoạt phương thức Color Styles.
• Nhấp vào biểu tượng + ở góc bên phải của phương thức Kiểu màu.

• Đặt tên ưa thích cho phong cách của bạn (giả sử là Kiểu màu 1) và nhấp vào nút Tạo kiểu .

Hãy nhớ rằng, bạn có thể tạo bao nhiêu Kiểu màu tùy thích.‌‌

Cách áp dụng kiểu màu cho một lớp

Chọn lớp của bạn và chuyển đến phần Tô trong thanh bên bên phải.

• Nhấp vào biểu tượng bốn dấu chấm ở góc bên phải của phần Tô màu để kích hoạt phương thức Kiểu màu.
• Chọn kiểu màu ưa thích của bạn.

Xong!

‌‌Cách chỉnh sửa kiểu màu

Nhấp vào phông nền màu xám của tệp để hiển thị các kiểu của bạn.

• Nhấp chuột phải vào Kiểu màu và chọn Chỉnh sửa kiểu trong menu.

Cách xóa kiểu màu

Xóa một kiểu màu thực sự rất dễ thực hiện.

• Nhấp vào phông nền màu xám của tệp để hiển thị các kiểu của bạn.
• Nhấp chuột phải vào Kiểu màu và chọn Xóa Kiểu.

‌Làm thế nào để sử dụng các kiểu văn bản trong Figma

Bạn cũng có thể áp dụng kiểu cho văn bản. Nó có thể là toàn bộ khối văn bản hoặc một phần văn bản trong một khối. Điều này giúp xác định kiểu tiêu đề của bạn.

Để tạo một kiểu văn bản mới, hãy bắt đầu bằng cách tạo một lớp văn bản mới và thêm một số cài đặt. Ví dụ:

• Họ phông chữ: Roboto
• Kích thước phông chữ: 30
• Trọng lượng phông chữ: Thông thường

• Nhấp vào biểu tượng bốn dấu chấm trong phần Văn bản để kích hoạt phương thức văn bản.
• Nhấp vào biểu tượng + ở góc bên phải của phương thức Kiểu văn bản.

• Đặt tên ưa thích cho phong cách của bạn (giả sử là Kiểu văn bản 1) và nhấp vào nút Tạo kiểu .

‌‌Cách áp dụng kiểu văn bản cho một lớp

Trước hết, hãy chọn lớp của bạn và chuyển đến phần Văn bản trong thanh bên bên phải.

Sau đó nhấp vào biểu tượng bốn dấu chấm ở góc bên phải của phần Văn bản để kích hoạt phương thức kiểu văn bản.

Cuối cùng, chỉ cần chọn Kiểu văn bản ưa thích của bạn. ‌‌

Cách xóa một kiểu văn bản

Để xóa một kiểu văn bản, bạn cần nhấp vào phông nền màu xám của tệp để hiển thị kiểu của mình. Sau đó, bạn chỉ cần nhấp chuột phải vào kiểu văn bản bạn muốn xóa và chọn Xóa kiểu .

Cách kết hợp màu sắc và kiểu chữ

Bạn cũng có thể kết hợp văn bản và phong cách màu sắc trong khi thiết kế. Bạn có thể thêm một kiểu màu cho các đối tượng văn bản khác nhau. Đây là một bước bổ sung có thể giúp hệ thống của bạn dễ bảo trì hơn, đặc biệt là khi bạn không phải tạo các kiểu văn bản khác nhau cho mọi sự kết hợp màu sắc.

• Để lưu các kiểu màu dành riêng cho văn bản: Tạo một hộp văn bản và nhập văn bản của bạn. Làm theo các bước của ' Cách áp dụng kiểu màu cho một lớp '.
• Khi bạn đến nơi bạn phải đặt mô tả / tên cho phong cách của mình, hãy nhập mô tả văn bản của bạn, ví dụ: tiêu đề phụ, tiêu đề trang, văn bản nút, v.v.

Phần kết luận

Lưu ý rằng việc sử dụng và tạo kiểu khi thiết kế là hoàn toàn tùy thuộc vào bạn. Sẽ không ai biết bạn sử dụng màu sắc / kiểu chữ nào trong thiết kế của mình trừ khi bạn cho họ biết. Như tôi đã nói, điều đó hoàn toàn phụ thuộc vào bạn!

Tuy nhiên, phong cách giúp giữ cho thiết kế của bạn nhất quán và việc tạo phong cách tuyệt vời có thể giúp trải nghiệm người dùng của bạn liền mạch.

‌Nguồn: https://www.freecodecamp.org/news/how-to-create-color-and-text-styles-in-figma/

#figma 

What is GEEK

Buddha Community

Cách Tạo Kiểu Màu Và Kiểu Chữ Trong Figma

Trong bài viết này, chúng ta sẽ học cách tạo, chỉnh sửa và sử dụng màu sắc và kiểu văn bản trong Figma. Chúng ta cũng sẽ học cách kết hợp các kiểu chữ và màu sắc cũng như sử dụng chúng để tạo ra các thiết kế đẹp mắt.

Kiểu giúp bạn đơn giản hóa quy trình làm việc của mình, giữ cho văn bản và các lớp nhất quán, đồng thời tiết kiệm thời gian quý báu.

‌‌Làm thế nào để sử dụng các kiểu màu trong Figma

Bạn có thể áp dụng kiểu màu cho văn bản, nền và nét. Bạn cũng có thể áp dụng kiểu màu cho các hình dạng được tạo trong thiết kế của mình hoặc cho các phần tử hoặc phần của trang web hoặc ứng dụng dành cho thiết bị di động cụ thể mà bạn đang thiết kế. Chúng có thể bao gồm các nút, hình chữ nhật, thanh trên cùng và dưới cùng, v.v.

Bạn cũng có thể sử dụng kiểu màu cho hình ảnh hoặc độ dốc.

Cách tạo kiểu màu

Để tạo kiểu màu, hãy làm theo các bước sau:

• Tạo một hình dạng mới và đi tới Tô màu. Tô màu cho lớp của bạn với bất kỳ màu nào bạn chọn.

• Nhấp vào biểu tượng bốn chấm để kích hoạt phương thức Color Styles.
• Nhấp vào biểu tượng + ở góc bên phải của phương thức Kiểu màu.

• Đặt tên ưa thích cho phong cách của bạn (giả sử là Kiểu màu 1) và nhấp vào nút Tạo kiểu .

Hãy nhớ rằng, bạn có thể tạo bao nhiêu Kiểu màu tùy thích.‌‌

Cách áp dụng kiểu màu cho một lớp

Chọn lớp của bạn và chuyển đến phần Tô trong thanh bên bên phải.

• Nhấp vào biểu tượng bốn dấu chấm ở góc bên phải của phần Tô màu để kích hoạt phương thức Kiểu màu.
• Chọn kiểu màu ưa thích của bạn.

Xong!

‌‌Cách chỉnh sửa kiểu màu

Nhấp vào phông nền màu xám của tệp để hiển thị các kiểu của bạn.

• Nhấp chuột phải vào Kiểu màu và chọn Chỉnh sửa kiểu trong menu.

Cách xóa kiểu màu

Xóa một kiểu màu thực sự rất dễ thực hiện.

• Nhấp vào phông nền màu xám của tệp để hiển thị các kiểu của bạn.
• Nhấp chuột phải vào Kiểu màu và chọn Xóa Kiểu.

‌Làm thế nào để sử dụng các kiểu văn bản trong Figma

Bạn cũng có thể áp dụng kiểu cho văn bản. Nó có thể là toàn bộ khối văn bản hoặc một phần văn bản trong một khối. Điều này giúp xác định kiểu tiêu đề của bạn.

Để tạo một kiểu văn bản mới, hãy bắt đầu bằng cách tạo một lớp văn bản mới và thêm một số cài đặt. Ví dụ:

• Họ phông chữ: Roboto
• Kích thước phông chữ: 30
• Trọng lượng phông chữ: Thông thường

• Nhấp vào biểu tượng bốn dấu chấm trong phần Văn bản để kích hoạt phương thức văn bản.
• Nhấp vào biểu tượng + ở góc bên phải của phương thức Kiểu văn bản.

• Đặt tên ưa thích cho phong cách của bạn (giả sử là Kiểu văn bản 1) và nhấp vào nút Tạo kiểu .

‌‌Cách áp dụng kiểu văn bản cho một lớp

Trước hết, hãy chọn lớp của bạn và chuyển đến phần Văn bản trong thanh bên bên phải.

Sau đó nhấp vào biểu tượng bốn dấu chấm ở góc bên phải của phần Văn bản để kích hoạt phương thức kiểu văn bản.

Cuối cùng, chỉ cần chọn Kiểu văn bản ưa thích của bạn. ‌‌

Cách xóa một kiểu văn bản

Để xóa một kiểu văn bản, bạn cần nhấp vào phông nền màu xám của tệp để hiển thị kiểu của mình. Sau đó, bạn chỉ cần nhấp chuột phải vào kiểu văn bản bạn muốn xóa và chọn Xóa kiểu .

Cách kết hợp màu sắc và kiểu chữ

Bạn cũng có thể kết hợp văn bản và phong cách màu sắc trong khi thiết kế. Bạn có thể thêm một kiểu màu cho các đối tượng văn bản khác nhau. Đây là một bước bổ sung có thể giúp hệ thống của bạn dễ bảo trì hơn, đặc biệt là khi bạn không phải tạo các kiểu văn bản khác nhau cho mọi sự kết hợp màu sắc.

• Để lưu các kiểu màu dành riêng cho văn bản: Tạo một hộp văn bản và nhập văn bản của bạn. Làm theo các bước của ' Cách áp dụng kiểu màu cho một lớp '.
• Khi bạn đến nơi bạn phải đặt mô tả / tên cho phong cách của mình, hãy nhập mô tả văn bản của bạn, ví dụ: tiêu đề phụ, tiêu đề trang, văn bản nút, v.v.

Phần kết luận

Lưu ý rằng việc sử dụng và tạo kiểu khi thiết kế là hoàn toàn tùy thuộc vào bạn. Sẽ không ai biết bạn sử dụng màu sắc / kiểu chữ nào trong thiết kế của mình trừ khi bạn cho họ biết. Như tôi đã nói, điều đó hoàn toàn phụ thuộc vào bạn!

Tuy nhiên, phong cách giúp giữ cho thiết kế của bạn nhất quán và việc tạo phong cách tuyệt vời có thể giúp trải nghiệm người dùng của bạn liền mạch.

‌Nguồn: https://www.freecodecamp.org/news/how-to-create-color-and-text-styles-in-figma/

#figma 

A Template Language That Completely Separates Structure and Logic/Ruby

Curly

Curly is a template language that completely separates structure and logic. Instead of interspersing your HTML with snippets of Ruby, all logic is moved to a presenter class.

Installing

Installing Curly is as simple as running gem install curly-templates. If you're using Bundler to manage your dependencies, add this to your Gemfile

gem 'curly-templates'

Curly can also install an application layout file, replacing the .erb file commonly created by Rails. If you wish to use this, run the curly:install generator.

$ rails generate curly:install

How to use Curly

In order to use Curly for a view or partial, use the suffix .curly instead of .erb, e.g. app/views/posts/_comment.html.curly. Curly will look for a corresponding presenter class named Posts::CommentPresenter. By convention, these are placed in app/presenters/, so in this case the presenter would reside in app/presenters/posts/comment_presenter.rb. Note that presenters for partials are not prepended with an underscore.

Add some HTML to the partial template along with some Curly components:

<!-- app/views/posts/_comment.html.curly -->
<div class="comment">
  <p>
    {{author_link}} posted {{time_ago}} ago.
  </p>

  {{body}}

  {{#author?}}
    <p>{{deletion_link}}</p>
  {{/author?}}
</div>

The presenter will be responsible for providing the data for the components. Add the necessary Ruby code to the presenter:

# app/presenters/posts/comment_presenter.rb
class Posts::CommentPresenter < Curly::Presenter
  presents :comment

  def body
    SafeMarkdown.render(@comment.body)
  end

  def author_link
    link_to @comment.author.name, @comment.author, rel: "author"
  end

  def deletion_link
    link_to "Delete", @comment, method: :delete
  end

  def time_ago
    time_ago_in_words(@comment.created_at)
  end

  def author?
    @comment.author == current_user
  end
end

The partial can now be rendered like any other, e.g. by calling

render 'comment', comment: comment
render comment
render collection: post.comments

Curly components are surrounded by curly brackets, e.g. {{hello}}. They always map to a public method on the presenter class, in this case #hello. Methods ending in a question mark can be used for conditional blocks, e.g. {{#admin?}} ... {{/admin?}}.

Identifiers

Curly components can specify an identifier using the so-called dot notation: {{x.y.z}}. This can be very useful if the data you're accessing is hierarchical in nature. One common example is I18n:

<h1>{{i18n.homepage.header}}</h1>

# In the presenter, the identifier is passed as an argument to the method. The
# argument will always be a String.
def i18n(key)
  translate(key)
end

The identifier is separated from the component name with a dot. If the presenter method has a default value for the argument, the identifier is optional – otherwise it's mandatory.

Attributes

In addition to an identifier, Curly components can be annotated with attributes. These are key-value pairs that affect how a component is rendered.

The syntax is reminiscent of HTML:

<div>{{sidebar rows=3 width=200px title="I'm the sidebar!"}}</div>

The presenter method that implements the component must have a matching keyword argument:

def sidebar(rows: "1", width: "100px", title:); end

All argument values will be strings. A compilation error will be raised if

• an attribute is used in a component without a matching keyword argument being present in the method definition; or
• a required keyword argument in the method definition is not set as an attribute in the component.

You can define default values using Ruby's own syntax. Additionally, if the presenter method accepts arbitrary keyword arguments using the **doublesplat syntax then all attributes will be valid for the component, e.g.

def greetings(**names)
  names.map {|name, greeting| "#{name}: #{greeting}!" }.join("\n")
end

{{greetings alice=hello bob=hi}}
<!-- The above would be rendered as: -->
alice: hello!
bob: hi!

Note that since keyword arguments in Ruby are represented as Symbol objects, which are not garbage collected in Ruby versions less than 2.2, accepting arbitrary attributes represents a security vulnerability if your application allows untrusted Curly templates to be rendered. Only use this feature with trusted templates if you're not on Ruby 2.2 yet.

Conditional blocks

If there is some content you only want rendered under specific circumstances, you can use conditional blocks. The {{#admin?}}...{{/admin?}} syntax will only render the content of the block if the admin? method on the presenter returns true, while the {{^admin?}}...{{/admin?}} syntax will only render the content if it returns false.

Both forms can have an identifier: {{#locale.en?}}...{{/locale.en?}} will only render the block if the locale? method on the presenter returns true given the argument "en". Here's how to implement that method in the presenter:

class SomePresenter < Curly::Presenter
  # Allows rendering content only if the locale matches a specified identifier.
  def locale?(identifier)
    current_locale == identifier
  end
end

Furthermore, attributes can be set on the block. These only need to be specified when opening the block, not when closing it:

{{#square? width=3 height=3}}
  <p>It's square!</p>
{{/square?}}

Attributes work the same way as they do for normal components.

Collection blocks

Sometimes you want to render one or more items within the current template, and splitting out a separate template and rendering that in the presenter is too much overhead. You can instead define the template that should be used to render the items inline in the current template using the collection block syntax.

Collection blocks are opened using an asterisk:

{{*comments}}
  <li>{{body}} ({{author_name}})</li>
{{/comments}}

The presenter will need to expose the method #comments, which should return a collection of objects:

class Posts::ShowPresenter < Curly::Presenter
  presents :post

  def comments
    @post.comments
  end
end

The template within the collection block will be used to render each item, and it will be backed by a presenter named after the component – in this case, comments. The name will be singularized and Curly will try to find the presenter class in the following order:

• Posts::ShowPresenter::CommentPresenter
• Posts::CommentPresenter
• CommentPresenter

This allows you some flexibility with regards to how you want to organize these nested templates and presenters.

Note that the nested template will only have access to the methods on the nested presenter, but all variables passed to the "parent" presenter will be forwarded to the nested presenter. In addition, the current item in the collection will be passed, as well as that item's index in the collection:

class Posts::CommentPresenter < Curly::Presenter
  presents :post, :comment, :comment_counter

  def number
    # `comment_counter` is automatically set to the item's index in the collection,
    # starting with 1.
    @comment_counter
  end

  def body
    @comment.body
  end

  def author_name
    @comment.author.name
  end
end

Collection blocks are an alternative to splitting out a separate template and rendering that from the presenter – which solution is best depends on your use case.

Context blocks

While collection blocks allow you to define the template that should be used to render items in a collection right within the parent template, context blocks allow you to define the template for an arbitrary context. This is very powerful, and can be used to define widget-style components and helpers, and provide an easy way to work with structured data. Let's say you have a comment form on your page, and you'd rather keep the template inline. A simple template could look like:

<!-- post.html.curly -->
<h1>{{title}}</h1>
{{body}}

{{@comment_form}}
  <b>Name: </b> {{name_field}}<br>
  <b>E-mail: </b> {{email_field}}<br>
  {{comment_field}}

  {{submit_button}}
{{/comment_form}}

Note that an @ character is used to denote a context block. Like with collection blocks, a separate presenter class is used within the block, and a simple convention is used to find it. The name of the context component (in this case, comment_form) will be camel cased, and the current presenter's namespace will be searched:

class PostPresenter < Curly::Presenter
  presents :post
  def title; @post.title; end
  def body; markdown(@post.body); end

  # A context block method *must* take a block argument. The return value
  # of the method will be used when rendering. Calling the block argument will
  # render the nested template. If you pass a value when calling the block
  # argument it will be passed to the presenter.
  def comment_form(&block)
    form_for(Comment.new, &block)
  end

  # The presenter name is automatically deduced.
  class CommentFormPresenter < Curly::Presenter
    # The value passed to the block argument will be passed in a parameter named
    # after the component.
    presents :comment_form

    # Any parameters passed to the parent presenter will be forwarded to this
    # presenter as well.
    presents :post

    def name_field
      @comment_form.text_field :name
    end

    # ...
  end
end

Context blocks were designed to work well with Rails' helper methods such as form_for and content_tag, but you can also work directly with the block. For instance, if you want to directly control the value that is passed to the nested presenter, you can call the call method on the block yourself:

def author(&block)
  content_tag :div, class: "author" do
    # The return value of `call` will be the result of rendering the nested template
    # with the argument. You can post-process the string if you want.
    block.call(@post.author)
  end
end

Context shorthand syntax

If you find yourself opening a context block just in order to use a single component, e.g. {{@author}}{{name}}{{/author}}, you can use the shorthand syntax instead: {{author:name}}. This works for all component types, e.g.

{{#author:admin?}}
  <p>The author is an admin!</p>
{{/author:admin?}}

The syntax works for nested contexts as well, e.g. {{comment:author:name}}. Any identifier and attributes are passed to the target component, which in this example would be {{name}}.

Setting up state

Although most code in Curly presenters should be free of side effects, sometimes side effects are required. One common example is defining content for a content_for block.

If a Curly presenter class defines a setup! method, it will be called before the view is rendered:

class PostPresenter < Curly::Presenter
  presents :post

  def setup!
    content_for :title, post.title

    content_for :sidebar do
      render 'post_sidebar', post: post
    end
  end
end

Escaping Curly syntax

In order to have {{ appear verbatim in the rendered HTML, use the triple Curly escape syntax:

This is {{{escaped}}.

You don't need to escape the closing }}.

Comments

If you want to add comments to your Curly templates that are not visible in the rendered HTML, use the following syntax:

{{! This is some interesting stuff }}

Presenters

Presenters are classes that inherit from Curly::Presenter – they're usually placed in app/presenters/, but you can put them anywhere you'd like. The name of the presenter classes match the virtual path of the view they're part of, so if your controller is rendering posts/show, the Posts::ShowPresenter class will be used. Note that Curly is only used to render a view if a template can be found – in this case, at app/views/posts/show.html.curly.

Presenters can declare a list of accepted variables using the presents method:

class Posts::ShowPresenter < Curly::Presenter
  presents :post
end

A variable can have a default value:

class Posts::ShowPresenter < Curly::Presenter
  presents :post
  presents :comment, default: nil
end

Any public method defined on the presenter is made available to the template as a component:

class Posts::ShowPresenter < Curly::Presenter
  presents :post

  def title
    @post.title
  end

  def author_link
    # You can call any Rails helper from within a presenter instance:
    link_to author.name, profile_path(author), rel: "author"
  end

  private

  # Private methods are not available to the template, so they're safe to
  # use.
  def author
    @post.author
  end
end

Presenter methods can even take an argument. Say your Curly template has the content {{t.welcome_message}}, where welcome_message is an I18n key. The following presenter method would make the lookup work:

def t(key)
  translate(key)
end

That way, simple ``functions'' can be added to the Curly language. Make sure these do not have any side effects, though, as an important part of Curly is the idempotence of the templates.

Layouts and content blocks

Both layouts and content blocks (see content_for) use yield to signal that content can be inserted. Curly works just like ERB, so calling yield with no arguments will make the view usable as a layout, while passing a Symbol will make it try to read a content block with the given name:

# Given you have the following Curly template in
# app/views/layouts/application.html.curly
#
#   <html>
#     <head>
#       <title>{{title}}</title>
#     </head>
#     <body>
#       <div id="sidebar">{{sidebar}}</div>
#       {{body}}
#     </body>
#   </html>
#
class ApplicationLayout < Curly::Presenter
  def title
    "You can use methods just like in any other presenter!"
  end

  def sidebar
    # A view can call `content_for(:sidebar) { "some HTML here" }`
    yield :sidebar
  end

  def body
    # The view will be rendered and inserted here:
    yield
  end
end

Rails helper methods

In order to make a Rails helper method available as a component in your template, use the exposes_helper method:

class Layouts::ApplicationPresenter < Curly::Presenter
  # The components {{sign_in_path}} and {{root_path}} are made available.
  exposes_helper :sign_in_path, :root_path
end

Testing

Presenters can be tested directly, but sometimes it makes sense to integrate with Rails on some levels. Currently, only RSpec is directly supported, but you can easily instantiate a presenter:

SomePresenter.new(context, assigns)

context is a view context, i.e. an object that responds to render, has all the helper methods you expect, etc. You can pass in a test double and see what you need to stub out. assigns is the hash containing the controller and local assigns. You need to pass in a key for each argument the presenter expects.

Testing with RSpec

In order to test presenters with RSpec, make sure you have rspec-rails in your Gemfile. Given the following presenter:

# app/presenters/posts/show_presenter.rb
class Posts::ShowPresenter < Curly::Presenter
  presents :post

  def body
    Markdown.render(@post.body)
  end
end

You can test the presenter methods like this:

# You can put this in your `spec_helper.rb`.
require 'curly/rspec'

# spec/presenters/posts/show_presenter_spec.rb
describe Posts::ShowPresenter, type: :presenter do
  describe "#body" do
    it "renders the post's body as Markdown" do
      assign(:post, double(:post, body: "**hello!**"))
      expect(presenter.body).to eq "<strong>hello!</strong>"
    end
  end
end

Note that your spec must be tagged with type: :presenter.

Examples

Here is a simple Curly template – it will be looked up by Rails automatically.

<!-- app/views/posts/show.html.curly -->
<h1>{{title}}<h1>
<p class="author">{{author}}</p>
<p>{{description}}</p>

{{comment_form}}

<div class="comments">
  {{comments}}
</div>

When rendering the template, a presenter is automatically instantiated with the variables assigned in the controller or the render call. The presenter declares the variables it expects with presents, which takes a list of variables names.

# app/presenters/posts/show_presenter.rb
class Posts::ShowPresenter < Curly::Presenter
  presents :post

  def title
    @post.title
  end

  def author
    link_to(@post.author.name, @post.author, rel: "author")
  end

  def description
    Markdown.new(@post.description).to_html.html_safe
  end

  def comments
    render 'comment', collection: @post.comments
  end

  def comment_form
    if @post.comments_allowed?
      render 'comment_form', post: @post
    else
      content_tag(:p, "Comments are disabled for this post")
    end
  end
end

Caching

Caching is handled at two levels in Curly – statically and dynamically. Static caching concerns changes to your code and templates introduced by deploys. If you do not wish to clear your entire cache every time you deploy, you need a way to indicate that some view, helper, or other piece of logic has changed.

Dynamic caching concerns changes that happen on the fly, usually made by your users in the running system. You wish to cache a view or a partial and have it expire whenever some data is updated – usually whenever a specific record is changed.

Dynamic Caching

Because of the way logic is contained in presenters, caching entire views or partials by the data they present becomes exceedingly straightforward. Simply define a #cache_key method that returns a non-nil object, and the return value will be used to cache the template.

Whereas in ERB you would include the cache call in the template itself:

<% cache([@post, signed_in?]) do %>
  ...
<% end %>

In Curly you would instead declare it in the presenter:

class Posts::ShowPresenter < Curly::Presenter
  presents :post

  def cache_key
    [@post, signed_in?]
  end
end

Likewise, you can add a #cache_duration method if you wish to automatically expire the fragment cache:

class Posts::ShowPresenter < Curly::Presenter
  ...

  def cache_duration
    30.minutes
  end
end

In order to set any cache option, define a #cache_options method that returns a Hash of options:

class Posts::ShowPresenter < Curly::Presenter
  ...

  def cache_options
    { compress: true, namespace: "my-app" }
  end
end

Static Caching

Static caching will only be enabled for presenters that define a non-nil #cache_key method (see Dynamic Caching.)

In order to make a deploy expire the cache for a specific view, set the version of the view to something new, usually by incrementing by one:

class Posts::ShowPresenter < Curly::Presenter
  version 3

  def cache_key
    # Some objects
  end
end

This will change the cache keys for all instances of that view, effectively expiring the old cache entries.

This works well for views, or for partials that are rendered in views that themselves are not cached. If the partial is nested within a view that is cached, however, the outer cache will not be expired. The solution is to register that the inner partial is a dependency of the outer one such that Curly can automatically deduce that the outer partial cache should be expired:

class Posts::ShowPresenter < Curly::Presenter
  version 3
  depends_on 'posts/comment'

  def cache_key
    # Some objects
  end
end

class Posts::CommentPresenter < Curly::Presenter
  version 4

  def cache_key
    # Some objects
  end
end

Now, if the version of Posts::CommentPresenter is bumped, the cache keys for both presenters would change. You can register any number of view paths with depends_on.

Curly integrates well with the caching mechanism in Rails 4 (or Cache Digests in Rails 3), so the dependencies defined with depends_on will be tracked by Rails. This will allow you to deploy changes to your templates and have the relevant caches automatically expire.

Thanks

Thanks to Zendesk for sponsoring the work on Curly.

Contributors

• Daniel Schierbeck (@dasch)
• Benjamin Quorning (@bquorning)
• Jeremy Rodi (@medcat)
• Alisson Cavalcante Agiani (@thelinuxlich)
• Łukasz Niemier (@hauleth)
• Cristian Planas (@Gawyn)
• Steven Davidovitz (@steved)

Build Status

---

Author: zendesk
Source code: https://github.com/zendesk/curly

#ruby   #ruby-on-rails 

Figma design kit built to integrate with Tailwind CSS

Hey everyone ✌🏻

Together with my friend, we developed a design kit in Figma specifically to be integrated with Tailwind CSS, a trending new utility first CSS framework.

You can find more information about the Tailwind CSS Figma design kit on Flowbite.

It’s open source 💙

#tailwind #figma #tailwind-figma #tailwind-ui #figma-ui #figma-ui-kit

Caching In WordPress: What You Need to Learn?

WordPress caching has nothing new to showcase in this context. WordPress websites also run on a specific server system and you have to make sure these servers work well for user engagement. So caching can help your website server work effectively to serve too many visitors collectively. The commonly requested items can be converted into varied copies that the website server doesn’t want to showcase every time to every website visitor. Classification of Caching is usually divided into two kinds. The Client-Side Caching & the Server Side Caching. Where client-side caching has nothing to do with your website, Server Side Caching is usually its opposite. Read more on https://bit.ly/3rbqvVh

#caching plugins #server side caching #client side caching #wordpress websites #wordpress caching

Sự khác biệt giữa Figma và Adobe XD

Trong bài viết này, hãy tìm hiểu về Sự khác biệt giữa Figma và Adobe XD. Việc chọn một công cụ như Figma so với Adobe XD rất quan trọng vì nó ảnh hưởng đến quy trình làm việc, trải nghiệm tổng thể và sự cộng tác với khách hàng - đó là công cụ quan trọng nhất mà các nhà thiết kế UX làm việc cùng.

Chào mừng bạn đến với cuộc sống của một nhà thiết kế UX, nơi bạn có nhiều lựa chọn khi nói đến phần mềm thiết kế giao diện người dùng (UI) và trải nghiệm người dùng (UI) tốt nhất 

Nếu bạn là một chuyên gia về UX/UI, hãy đọc tiếp để tìm hiểu thêm về cách Figma x Adobe XD hoạt động , các tính năng của nó và cái nào có thể là tốt nhất để bạn cung cấp một sản phẩm chất lượng cao.

---

Figma là gì?

Figma là một giao diện, thiết kế vector và phần mềm dựa trên đám mây chạy trên trình duyệt. Nó được nhiều nhà thiết kế coi là ứng dụng tốt nhất để hỗ trợ các dự án thiết kế hợp tác dựa trên nhóm. Figma cung cấp tất cả các công cụ và yếu tố cần thiết để tạo ra một thiết kế web hoàn chỉnh , tạo nguyên mẫu và tạo mã cho quá trình chuyển giao .

Figma dùng để làm gì?

Mặc dù Figma rất giống với các công cụ tạo mẫu khác, nhưng điểm khác biệt chính của nó là khả năng làm việc theo nhóm. Nhưng đơn giản thôi, Figma:

• Nó là một công cụ thiết kế giao diện người dùng trực tuyến hỗ trợ quá trình thiết kế sản phẩm.
• Cho phép bạn tạo biểu tượng , đồ họa mạng xã hội , bản trình bày và hơn thế nữa miễn phí;
• Truy cập hàng trăm phông chữ, hình dạng và màu sắc để tạo hình ảnh động ;
• Tạo các mô hình đáp ứng cho một bản nháp dựa trên thực tế hơn ;
• Cho phép bạn tạo thư viện nội dung của riêng mình hoặc sử dụng thư viện miễn phí từ những người sáng tạo khác;
• Tùy chỉnh tài nguyên thiết kế đồ họa của bạn với các tính năng mạnh mẽ ;
• Thiết kế trực tiếp trên trình duyệt, mọi thứ đều trực tuyến và miễn phí;
• Bạn có thể đồng chỉnh sửa với nhóm của mình trên cùng một tệp.

Do đó, Figma được coi là:

Một công cụ tạo mẫu

• Cho phép bạn thiết kế, tạo nguyên mẫu và trình bày tất cả trong cùng một công cụ;
• Tất cả các cập nhật cho thiết kế được phản ánh ngay lập tức trong nguyên mẫu mà không cần đồng bộ hóa xuất;
• Bạn có thể nhận phản hồi từ nhóm của mình bằng cách chia sẻ một liên kết;
• Bạn có thể chạy các nguyên mẫu trên thiết bị di động để thử nghiệm người dùng đáng tin cậy hơn;
• Nó gần đây đã bắt đầu hoạt hình thông minh;
• Hiện đã có một loạt nguyên mẫu với các kích thước màn hình khác nhau được tối ưu hóa cho đồng hồ Apple.

Bộ tạo mã cho chuyển giao

• Các nhà phát triển có thể kiểm tra, sao chép và xuất CSS trực tiếp từ tệp thiết kế và điều chỉnh nó cho iOS và Android;
• Họ có thể phản chiếu các thiết kế trên thiết bị di động bằng cách sử dụng "xem trước thiết bị trực tiếp";
• Họ cũng có thể điều chỉnh kích thước của khung để kiểm tra cách bố cục sẽ thích ứng với các kích thước màn hình khác nhau.

Điều quan trọng cần đề cập là Figma được hỗ trợ bởi một cộng đồng lớn gồm các nhà thiết kế và nhà phát triển , những người cung cấp các plugin để cải thiện chức năng và đơn giản hóa quy trình công việc. Tất cả đều được chào đón để đóng góp và chia sẻ .

Adobe XD là gì

Adobe XD là một công cụ thiết kế UI/UX dựa trên véc tơ cho phép bạn thiết kế mọi thứ từ ứng dụng đồng hồ thông minh đến trang web đầy đủ. Adobe XD hứa hẹn một luồng gió mới cho các chuyên gia vẫn đang sử dụng Photoshop hoặc Illustrator để thiết kế giao diện người dùng, là công cụ duy nhất của Adobe cho phép tạo mẫu.

Adobe XD dùng để làm gì?

Adobe XD được xây dựng có tính đến trải nghiệm web và di động và các nhóm thiết kế đang tận dụng các khả năng của Adobe XD cho quy trình thiết kế trải nghiệm từ đầu đến cuối.

Về mặt ứng dụng, Adobe XD được sử dụng cho:

Thiết kế trang web - Thiết kế trang web và Adobe XD phối hợp tốt với nhau, từ kiến ​​trúc thông tin đến bố cục và tạo mẫu. Các khái niệm và ý tưởng được kết hợp với nhau một cách dễ dàng bằng cách sử dụng các tính năng năng suất như Ngăn xếp, Khoảng đệm và Lưới lặp lại để xác định các mẫu điều hướng, cuộn và hơn thế nữa cho trang web của bạn;

Thiết kế ứng dụng - Thiết kế ứng dụng dành cho thiết bị di động, ứng dụng dành cho máy tính để bàn hoặc thậm chí cả ứng dụng web yêu cầu tương tác động, nhiều mẫu điều hướng và nhiều kích thước màn hình, bao gồm cả những kích thước ít phổ biến hơn như bảng quảng cáo kỹ thuật số. Adobe XD giúp dễ dàng tạo trải nghiệm ứng dụng với các tính năng như thay đổi kích thước đáp ứng, kích thước bản vẽ dựng sẵn cho các thiết bị phổ biến và các tính năng nguyên mẫu như trình kích hoạt hoạt hình kéo và tự động;

Thiết kế trò chơi - Bạn có thể vạch ra và kiểm tra các menu, cài đặt trò chơi và các thành phần giao diện khác trực tiếp trong Adobe XD bằng cách cắm vào bộ điều khiển trò chơi Bluetooth được hỗ trợ;

Thiết kế trợ lý giọng nói - Adobe XD cho phép bạn tạo nguyên mẫu của trợ lý ảo nhờ các lệnh thoại mạnh mẽ và kết nối với Amazon Alexa và Google Assistant cho phép bạn thử nghiệm trải nghiệm.

Về tính năng, Adobe XD có nhiều tính năng tương tự Figma:

Thiết kế giao diện người dùng - Với việc tích hợp với các ứng dụng Creative Cloud, như Photoshop và Illustrator, bạn có thể dễ dàng lấy nội dung và có quyền truy cập vào tất cả các công cụ cần thiết để thực hiện công việc của mình một cách tốt nhất;

Thiết kế UX - Bạn có thể lặp lại nhanh chóng, thử nghiệm các tương tác và quy trình, đồng thời có cảm giác chân thực hơn về các điểm chưa phù hợp để bạn có thể khắc phục chúng ngay khi phát hiện ra chúng;

Wireframing - Bộ giao diện người dùng cho phép bạn dễ dàng tạo các wireframe tương tác để kiểm tra thiết kế của mình và xem qua các luồng người dùng;

Tạo mẫu - Các khả năng nâng cao của Adobe XD như tự động tạo hoạt ảnh và giọng nói giúp dễ dàng xây dựng thiết kế nguyên mẫu mà người tiêu dùng có thể khám phá và tương tác - dẫn đến trải nghiệm người dùng tốt hơn;

Chuyển giao cho nhà phát triển - Chế độ chia sẻ của Adobe XD cho phép bạn cộng tác với các nhóm phát triển ngay từ đầu. Cho dù bạn đang sử dụng bản ghi âm thuyết minh để xem qua thiết kế của mình hay chia sẻ chi tiết quá trình phát triển, XD luôn giúp bạn kết nối.

Cộng tác nhóm - Đồng chỉnh sửa trực tiếp và lưu trữ đám mây cho phép cộng tác dễ dàng hơn trong nhóm của bạn.

Figma vs Adobe XD: sự khác biệt chính

Kể từ khi Adobe XD ra đời vào năm 2016, Figma và Adobe XD đã chạy đua với nhau. Sự cạnh tranh ban đầu không gay gắt, với các phiên bản đầu tiên của XD thiếu một số tính năng quan trọng, nhưng điều này đã được cải thiện trong những năm gần đây. Sự cạnh tranh giữa hai phần mềm hiện đã trở nên gay gắt hơn và việc chọn phần mềm nào là tốt nhất cho bạn và dự án của bạn trở nên khó khăn hơn.

Sự khác biệt chính giữa Figma và Adobe XD là giá cả . Mặc dù Figma miễn phí cho người dùng cá nhân và bạn chỉ phải trả tiền nếu muốn có quyền truy cập vào các tính năng như đồng nghiệp, nhưng đối với Adobe XD, bạn phải trả tiền trước khi sử dụng . Dưới đây, chúng tôi sẽ đề cập đến điểm tỏa sáng của từng cái và cái nào tốt hơn cho các trường hợp cụ thể của bạn.

Nền tảng được hỗ trợ

Figma

• Máy tính để bàn - Windows, Mac, Linux ( ứng dụng Figma-linux cung cấp hỗ trợ);
• Trình duyệt trên máy tính để bàn - Việc chỉnh sửa có thể được thực hiện trong bất kỳ trình duyệt hỗ trợ WebGL nào - ChromeOS, Linux và các hệ thống dựa trên Phân phối phần mềm Berkeley (BSD). Khách hàng cũng có thể xem trước các bản nháp trong trình duyệt máy tính để bàn;
• Trình duyệt thiết bị di động - iOS và Android khả dụng ở chế độ chỉ xem; hơn nữa Figma được hỗ trợ trên Safari, Chrome và Firefox;
• Ứng dụng dành cho thiết bị di động - iOS và Android có ứng dụng Figma Mirrow mô phỏng thiết bị di động.

adobe XD

• Máy tính để bàn - Windows và Mac;
• Trình duyệt trên máy tính để bàn và thiết bị di động - XD tạo bản xem trước của các thiết kế trong trình duyệt để khách hàng có thể đưa ra phản hồi;
• Ứng dụng dành cho thiết bị di động - iOS và Android có ứng dụng Adobe XD để xem trước trực tiếp.

Figma

• Nhiều người chơi - Bất kỳ số lượng người dùng nào cũng có thể đăng nhập và chỉnh sửa tài liệu cùng một lúc;
• Chế độ quan sát - Bạn có thể phản chiếu màn hình của đồng đội để có thể nhìn thấy khi họ di chuyển xung quanh tài liệu hoặc bản nháp. Điều này hữu ích nếu bạn muốn xem một khách hàng di chuyển qua một nguyên mẫu và xem liệu có bất kỳ sai sót nào không;
• Thư viện nhóm - Bạn có thể xây dựng các hệ thống thiết kế cho công việc của riêng mình, bao gồm các thành phần, bảng màu và kiểu phông chữ có thể tái sử dụng, đồng thời cung cấp các hệ thống thiết kế đó cho cả nhóm của bạn để mọi người làm việc với các yếu tố giống nhau;
• Tự động lưu và đồng bộ hóa - Mọi sửa đổi đối với tài liệu và hệ thống thiết kế sẽ được lưu và đồng bộ hóa ngay lập tức. Nếu một thay đổi xảy ra trong khi một thành viên trong nhóm đang làm việc trên một dự án được chia sẻ, họ sẽ được thông báo, đảm bảo rằng tất cả các thành viên trong nhóm luôn được cập nhật. Sẽ không cần tải lên, tải xuống hoặc hợp nhất tệp thủ công.

adobe XD

• Đồng chỉnh sửa - Có khả năng beta thiết kế "đồng chỉnh sửa" hợp tác kể từ tháng 11 năm 2019, hoạt động tương tự như tính năng "nhiều người chơi" của Figma. Sự khác biệt duy nhất có thể nhìn thấy giữa hai loại hiện tại là trên Adobe XD, bạn không nhìn thấy con trỏ trực tiếp của các nhà thiết kế khác đang làm việc trên tài liệu;
• Nội dung được liên kết - Khi tài liệu được lưu vào đám mây, các thành phần và kiểu của nó có thể được truy cập thông qua liên kết;
• Thư viện đám mây sáng tạo - Bạn có thể sắp xếp và truy cập nội dung thông qua Thư viện CC; điều này có thể giống với các thư viện nhóm của Figma, nhưng các tính năng hỗ trợ cộng tác không tốt bằng trong XD.

figma

• Nó sử dụng các khung hoạt động như các thùng chứa đại diện cho các khung nhìn và thiết kế các thành phần phụ như nút, phần nội dung, thành phần điều hướng, v.v. Các khung có tất cả chức năng mà các bảng vẽ bên dưới có và cũng có thể mang lại chức năng bổ sung cho các thành phần này, chẳng hạn như lưới và bố cục tự động .

adobe XD

• Nó sử dụng các bảng vẽ cũng hoạt động như các thùng chứa đại diện cho các khung nhìn chỉ chứa các thiết kế - ví dụ: màn hình điện thoại so với màn hình máy tính xách tay. Trong quá trình tạo mẫu, bạn có thể liên kết các bảng vẽ này với nhau để mô phỏng chuyển động của người dùng trong một trang web hoặc ứng dụng. Mặc dù các khung có thể làm được mọi thứ mà các bản vẽ nghệ thuật có thể làm, nhưng các bản vẽ XD không thể làm được mọi thứ mà các khung hình Figma có thể làm được.

tạo mẫu

Cả Figma và Adobe XD đều được sử dụng để tạo mẫu, nhưng XD tốt hơn một chút vì nó có một bộ kích hoạt hỗ trợ nhiều loại thiết kế giao diện người dùng hơn. Hãy xem qua.

figma

Nó cho phép nhiều tương tác trên mỗi phần tử miễn là chúng khác nhau:

gây nên

• bằng cách nhấp chuột
• Khi kéo
• trong khi lơ lửng
• trong khi nhấn
• chuột vào
• Tỷ lệ bạn biết
• Di chuột xuống
• di chuột lên
• sau khi trì hoãn

hành động

• Điều hướng đến (khung - sử dụng để di chuyển giữa các khung loại bảng vẽ)
  Mở lớp phủ (khung)
• Hoán đổi với (khung - sử dụng để hoán đổi trong các khung loại thành phần thay thế, ví dụ: các nút, xem phần tiếp theo để biết thêm thông tin)
• Quay trở lại
• đóng lớp phủ
• mở URL

chuyển tiếp

• Lập tức
• Để hòa tan
• Smart Animate (xem phần sau)
• Di chuyển
• Thay đổi
• Đẩy
• cầu trượt
• trượt ra

tạo điều kiện

• Xoa dịu
• Thư giãn
• Dễ dàng vào và ra
• tuyến tính

adobe XD

Cho phép nhiều tương tác trên mỗi mục, chẳng hạn như tương tác di chuột và tương tác nhấp chuột:

gây nên

• Vỗ nhẹ
• Lôi kéo
• nổi
• nhịp độ
• Tiếng nói
• lá hẹ
• Điều khiển

hành động

• chuyển tiếp
• tự động sinh động
• lớp phủ
• phát lại giọng nói
• clipboard trước đó
• thay đổi trạng thái

chuyển tiếp

• Phải
• Bên trên
• Dưới
• Để hòa tan
• Trượt sang trái
• vuốt sang phải
• trượt lên
• vuốt xuống
• đẩy sang trái

tạo điều kiện

• Không có (còn được gọi là tuyến tính)
• Thư giãn
• Xoa dịu
• Dễ dàng vào và ra
• hình chụp
• Xoăn
• nảy

Chúng ta có thể kết luận rằng Adobe XD cho phép nhiều hơn một tương tác trên mỗi phần tử , cho phép tạo các nguyên mẫu có chức năng gần với hành vi của mọi người hơn trong trình duyệt.

Ra tay

figma

Như đã đề cập, Figma có thể tạo CSS, Swift cho iOS và XML cho Android . Nó cũng cho phép bạn sao chép trực tiếp CSS hoặc SVG. Ngoài ra, nếu có thay đổi trong tài liệu, mã sẽ tự động được tạo lại .

adobe XD

XD tạo mã CSS , nhưng trước tiên bạn cần tạo liên kết nhà phát triển rồi mở liên kết đó trong trình duyệt. Không giống như Figma, nếu tài liệu thay đổi ở đây, bạn sẽ cần tạo lại liên kết và cập nhật nó .

Figma có tốt hơn Adobe XD không?

Câu trả lời ngắn gọn: có . Figma - được cho là - công cụ thiết kế duy nhất mà các nhóm thiết kế chọn vì tính năng cộng tác nhóm tuyệt vời của nó . Nó hợp lý hóa quy trình thiết kế và giúp các nhà thiết kế cũng như các nhóm làm việc cùng nhau hiệu quả hơn vì bạn có thể cộng tác trực tiếp với các đồng đội của mình. Hơn nữa, các nhà thiết kế và nhóm được hưởng lợi rất nhiều từ Figma vì:

• Nó miễn phí và bạn có thể truy cập nó mà không cần phải tải xuống ứng dụng;
• Hoạt động trên mọi nền tảng;
• Hợp tác đơn giản và quen thuộc;
• Chia sẻ không rắc rối và linh hoạt;
• Các tệp nhúng cung cấp khả năng cập nhật theo thời gian thực;
• Tạo mẫu đơn giản và trực quan;
• Chuyển nhà phát triển dễ dàng;
• Thư viện nhóm là nơi lý tưởng để thiết kế hệ thống, cho phép bất kỳ ai có quyền truy cập sử dụng các phiên bản mới nhất.

Phần kết luận

Cuộc chiến giữa Figma và Adobe XD sẽ tiếp tục và chắc chắn họ đang thúc đẩy lẫn nhau để cải thiện và đẩy mạnh trò chơi của họ. Rất thường xuyên, giờ đây chúng ta thấy các tính năng độc đáo của cái này xuất hiện trong cái kia, khiến các nhà thiết kế khó quyết định nên chọn cái nào để tạo ra một sản phẩm chất lượng cao.

Nhưng nếu sự hợp tác là quan trọng đối với bạn và nhóm của bạn, thì Figma là lựa chọn tốt nhất cho bạn . Nó được thiết kế từ đầu với tinh thần làm việc theo nhóm và do đó, không phần mềm nào khác có thể sớm cạnh tranh với nó. Nó cũng vượt trội so với Adobe XD bằng cách tốt hơn về khung hình so với bảng vẽ, bố cục tự động, khả năng phản hồi và thiết kế đồ họa/thiết kế giao diện người dùng tổng thể.

Mặt khác, bạn có nhiều cơ hội hơn với Adobe XD nếu bạn đã quen với hệ sinh thái Adobe và trong Creative Cloud. Ngoài ra, Adobe XD tốt hơn một chút trong việc tạo nguyên mẫu khi có hoạt ảnh và giọng nói tự động, giúp bạn dễ dàng chính xác hơn.

Bài viết gốc lấy từ: https://www.imaginarycloud.com

#figma #figma